200字范文 > 宠物狗网页制作作业保护动物网页设计模板简单学生网页设计静态HTML CSS网站制作成品

宠物狗网页制作作业保护动物网页设计模板简单学生网页设计静态HTML CSS网站制作成品

时间：2022-02-18 08:18:29

🌩️ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 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多种犬。每一种都具有独特的体格、皮毛颜色以及习性。为了发现造成犬的特定性状的基因突变，Akey等分析了10个品种共275头家犬的基因组。此前的研究发现带来产生地特定特性的基因，诸如达克斯犬的短腿。他们分析了一系列品种的犬，从而确定数个世纪的选择性育种对于整个犬基因组的影响。</a></p><p><a href="view2.html">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 @ 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;}