宠物狗网页制作作业 保护动物网页设计模板 简单学生网页设计 静态HTML CSS网站制作成品
🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (110套) 】
📂文章目录
- 二、📚网站介绍
- 三、🔗网站效果
- ▶️1.视频演示
- 🧩 2.图片演示
- 四、💒 网站代码
- 🧱HTML结构代码
- 🏠CSS样式代码
- 五、🎁更多源码
二、📚网站介绍
📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。
📓网站程序方面：计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器，已达到打开后就能即时看到网站的效果。
📘网站素材方面：计划收集各大平台好看的图片素材，并精挑细选适合网页风格的图片，然后使用PS做出适合网页尺寸的图片。
📒网站文件方面：网站系统文件种类包含：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,文字滚动, 图片放大等；
（3）📄 js文件包含：js实现动态轮播特效, 表单提交, 点击事件等等（个别网页中运用到js代码）。
三、🔗网站效果
▶️1.视频演示
U11BG 宠物狗（10页）
🧩 2.图片演示
四、💒 网站代码
🧱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样式代码
@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;
}
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻