# 一、📚作品介绍
HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。
---
# 二、🔗作品效果
## ▶️视频演示
https://live.csdn.net/v/embed/240759
U11BG 宠物狗（10页）
## 🧩 截图演示
<hr>
# 三、💒 作品代码
## 🧱HTML代码
```html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>宠迷网</title>
<link rel="stylesheet" type="text/css" href="css/common.css"/>
</head>
<body>
<div class="container">
<div class="wrapper">
<div class="header">
<a href="index.html" class="logo">宠迷网</a>
<a href="login.html" class="login">登录</a>
<a href="register.html" class="register">注册</a>
</div>
<div class="nav">
<a href="index.html">宠物首页</a>
<a href="view1.html">犬类起源</a>
<a href="view2.html">基因密码</a>
<a href="view3.html">文明影响</a>
<a href="view4.html">形态特征</a>
<a href="view5.html">生活习性</a>
<a href="view6.html">主要行为</a>
<a href="view7.html">驯养方式</a>
</div>
<div class="focus">
<a href="view1.html"><img src="images/focus1.jpg"/></a>
</div>
<div class="list">
<h2>犬类起源</h2>
<a href="view1.html"><img src="images/view1.jpg"/></a>
<p><a href="view1.html">狗属于脊索动物门、脊椎动物亚门、哺乳纲、真兽亚纲、食肉目、裂脚亚目、犬科动物。中文亦称“犬”，狗分布于世界各地。狗与马、牛、羊、猪、鸡并称“六畜”。有科学家认为狗是由早期人类从灰狼驯化而来。</a></p>
</div>
<div class="text">
<h2>基因密码</h2>
<p><a href="view2.html">在过去1.4万年中，经过不断地驯化，产生了400多种犬。每一种都具有独特的体格、皮毛颜色以及习性。为了发现造成犬的特定性状的基因突变，2009年Akey等分析了10个品种共275头家犬的基因组。此前的研究发现带来产生地特定特性的基因，诸如达克斯犬的短腿。他们分析了一系列品种的犬，从而确定数个世纪的选择性育种对于整个犬基因组的影响。
</a></p>
<p><a href="view2.html">2012年Chen等对犬和狼的嗅觉受体基因家族进行分类及测序分析，发现由于驯养导致的生殖隔离，犬和狼中嗅觉受体基因进化的方向不一致，中国乡村犬中嗅觉受体基因序列比较保守。狗生成的麦芽糖酶-葡糖淀粉酶要多12倍，这是因为该酶基因发生了数个突变。</a></p>
</div>
<div class="text">
<h2>文明影响</h2>
<p><a href="view3.html">在中国吉林榆树县周家油坊等地层中，即旧石器时代的更新世晚期，约在公元前2.6万～公元前1万年，发现了大量哺乳类化石，除人类的化石之外，出现了家狗的头骨“半化石”。虽然有人认为它属于更新世动物化石，但更多的专家则认为它们是全新世或现代动物的遗骸。这类旧石器时代的家狗遗骸，可以表明中国东北地区的居民已开始将狗家化，开始驯化狗。</a></p>
<p><a href="view3.html">由此可见，东北和蒙古是旧石器时代晚期和新石器早、中期的家狗驯化的中心。除此之外，在河南安阳、河北磁山、陕西西安半坡、山东大汶口、江苏常州等地均发掘到全新世后期家狗的骨骼化石，由此可以肯定，中国是家化狗的中心之一。</a></p>
</div>
<div class="line">
<a href="view4.html"><img src="images/view4.jpg"/></a>
<h2>形态特征</h2>
<p><a href="view4.html">犬的嗅觉灵敏度位居各畜之首，眼瞎的狗可以利用鼻子生活的像正常犬。犬灵敏的嗅觉主要表现两个方面：一是对气味的敏感程度；二是辨别气味的能力。敏感度会因味道的种类而有所差别。</a></p>
</div>
<div class="line">
<a href="view5.html"><img src="images/view5.jpg"/></a>
<h2>生活习性</h2>
<p><a href="view5.html">狗喜欢啃咬骨头。这也是原生态时撕咬猎物所留下的习惯。我们在喂养时要经常给它一些骨头。（切记：不可用禽骨，可能会刺穿狗的肠胃）。狗普遍存在不同程度的以人类和自身粪便为食的习性。</a></p>
</div>
<div class="line">
<a href="view6.html"><img src="images/view6.jpg"/></a>
<h2>主要行为</h2>
<p><a href="view6.html">狗在群居时，也有“等级制度”。建立这样的秩序可以保持整个群体的稳定，减少因为食物、生存空间和异性的争夺而引起的恶斗和战争。狗卧下前，总在周围转一转，确定无危险后，才会安心睡觉。</a></p>
</div>
<div class="line">
<a href="view7.html"><img src="images/view7.jpg"/></a>
<h2>驯养方式</h2>
<p><a href="view7.html">犬的生物学起源可追溯到几千万年前，犬的驯化史大约在一万五千年前的中石器时代，甚至有科学家从遗传学的角度论证称，可能在距今10万年前，早在远古时代，犬就已经被人类驯服。</a></p>
</div>
<div class="footer">
Copyright @ 2021 chongmi.com All Rights Reserved. 宠迷网 版权所有
</div>
</div>
</div>
</body>
</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;
}
```
<hr>
# 四、🎁更多源码
【干货分享】自学编程的小伙伴可以前往我的 gitee 仓库（持续更新中...）
📕【web学习指南】从web基础、计算机基础到前端常用框架的教程，涵盖前端大部分必备知识（学习指南 + 技术文章 + 资源分享）
[Gitee仓库地址（来个Star吧~）：](https://gitee.com/zhanyuqiu2022/my-app) https://gitee.com/zhanyuqiu2022/my-app
