首页 > 分享 > 宠物狗网站前端设计

宠物狗网站前端设计

萌宠菠菠乐园
2024-12-25 20:38

️ 精彩专栏推荐
作者主页: 【进入主页—获取更多源码】
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> 1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192

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; } 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103