html+css宠物网页设计网站模板源码分享

# 一、作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置,有div的样式格局,这个实例比较全面,有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

---

# 二、作品效果

## ▶️视频演示

https://live.csdn.net/v/embed/240759


U11BG 宠物狗(10页)

## 截图演示



# 三、 作品代码

## HTML代码

```html

宠迷网


   


   

     

     

      注册

   


   


   

     

   


   


   


   


   


   


   


   


   


   


```

##  CSS代码

```css

@charset "utf-8";

*{margin:0;padding:0;box-sizing:border-box;

}

html body{font-size:12px;font-family:"Microsoft YaHei";color:#555;background-color:#efeae4;

}

a{color:#555;text-decoration:none;

}

.container{width:1000px;margin:0 auto;overflow:hidden;

}

.wrapper{float:left;width:1000px;background-color:#fff;

}

.header{float:left;width:1000px;height:80px;background-color:#dc9158;

}

.header a{font-weight:bold;color:#fff;

}

.header a.logo{float:left;margin:15px 0 0 24px;font-size:30px;

}

.header a.login{float:right;margin:32px 24px 0 0;font-size:15px;

}

.header a.register{float:right;margin:32px 25px 0 0;font-size:15px;

}

.nav{float:left;width:1000px;height:43px;line-height:43px;font-size:14px;font-weight:bold;background-color:#ffdfb6;

}

.nav a{margin:0 43px 0 25px;color:#a9836c;

}

.nav a:nth-last-child(1){margin-right:0;

}

.focus{float:left;width:1000px;

}

.focus img{float:left;width:1000px;height:450px;

}

.list{float:left;width:300px;height:380px;margin:30px 0 0 25px;

}

.list h2{float:left;width:300px;height:30px;line-height:30px;font-size:18px;

}

.list img{float:left;width:300px;height:210px;margin-top:10px;

}

.list p{float:left;width:300px;line-height:27px;margin-top:10px;

}

.text{float:left;width:300px;height:380px;margin:30px 0 0 25px;

}

.text h2{float:left;width:300px;height:30px;line-height:30px;font-size:18px;

}

.text p{float:left;width:300px;line-height:27px;margin-top:7px;

}

.line{float:left;width:462px;margin:30px 0 10px 25px;

}

.line img{float:left;width:230px;height:160px;

}

.line h2{float:right;width:220px;height:25px;line-height:25px;font-size:16px;

}

.line p{float:right;width:220px;line-height:27px;margin-top:5px;

}

.word{float:left;width:1000px;padding-bottom:10px;

}

.word h2{float:left;width:900px;height:30px;line-height:30px;margin:30px 0 10px 50px;font-size:18px;text-align:center;

}

.word img{float:left;width:900px;margin:10px 0 10px 50px;

}

.word p{float:left;width:900px;line-height:27px;margin:5px 0 0 50px;text-indent:25px;

}

.work{float:left;width:1000px;padding-bottom:10px;

}

.work h2{float:left;width:900px;height:30px;line-height:30px;margin:30px 0 0 50px;font-size:18px;text-align:center;

}

.work article{float:left;width:425px;margin:20px 0 0 50px;

}

.work article h3{float:left;width:425px;height:30px;line-height:30px;margin-top:5px;text-align:center;

}

.work article p{float:left;width:425px;line-height:28px;margin-top:5px;

}

.into{float:left;width:1000px;min-height:500px;padding:60px 0;

}

.into p{float:left;width:1000px;height:55px;margin-top:10px;

}

.into p span{float:left;width:330px;height:60px;line-height:60px;font-size:14px;text-align:right;

}

.into p input{float:left;width:330px;height:35px;margin:15px 0 0 10px;

}

.into p b{float:left;width:130px;height:60px;line-height:60px;margin-left:20px;font-size:14px;font-weight:normal;

}

.into p input.submit{letter-spacing:3px;color:#fff;background-color:#dc9158;border:0;

}

.footer{float:left;width:1000px;height:80px;line-height:80px;margin-top:30px;text-align:center;color:#fff;background-color:#dc9158;

}

```


# 四、更多源码

【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库(持续更新中...)

【web学习指南】从web基础、计算机基础到前端常用框架的教程,涵盖前端大部分必备知识(学习指南 + 技术文章 + 资源分享)

[Gitee仓库地址(来个Star吧~):](https://gitee.com/zhanyuqiu2022/my-app) https://gitee.com/zhanyuqiu2022/my-app

你可能感兴趣的:(html+css宠物网页设计网站模板源码分享)