web前端大作业 html+css宠物网页设计网站模板源码分享

一、??作品介绍

HTML实例网页代码, 本实例适合于初学HTML的同学。该实例里面有设置了css的样式设置，有div的样式格局，这个实例比较

一、??作品介绍

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

二、??作品效果

??视频演示

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

(title-U11BG 宠物狗（10页）)]

?? 截图演示

[图片上传失败...(image-1f6003-1664699066442)]
[图片上传失败...(image-d7933c-1664699066442)]
[图片上传失败...(image-39c0bf-1664699066442)]
[图片上传失败...(image-e734a4-1664699066442)]
[图片上传失败...(image-a8e1f8-1664699066442)]
[图片上传失败...(image-d3ed97-1664699066442)]
[图片上传失败...(image-c66f99-1664699066442)]
[图片上传失败...(image-13e8fc-1664699066442)]
[图片上传失败...(image-31570f-1664699066442)]
[图片上传失败...(image-2c789e-1664699066442)]

三、?? 作品代码

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

四、??更多源码

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

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

Gitee仓库地址（来个Star吧~）： https://gitee.com/zhanyuqiu2022/my-app

全面，有助于同学的学习,本文将介绍如何通过从头开始设计个人网站并将其转换为代码的过程来实践设计。

二、??作品效果

??视频演示

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

U11BG 宠物狗（10页）

?? 截图演示

image

三、?? 作品代码

??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;

}

四、??更多源码

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

?著作权归作者所有,转载或内容合作请联系作者

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 214,172评论 6赞 493
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,346评论 3赞 389
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事?！?“怎么了？”我有些...
开封第一讲书人阅读 159,788评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,299评论 1赞 288
?港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,409评论 6赞 386
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,467评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,476评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,262评论 0赞 269
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,699评论 1赞 307
?护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,994评论 2赞 328
?白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,167评论 1赞 343
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,827评论 4赞 337
?日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,499评论 3赞 322
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,149评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,387评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,028评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,055评论 2赞 352

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

web前端大作业 html+css宠物网页设计网站模板源码分享

web前端大作业 html+css宠物网页设计网站模板源码分享

一、??作品介绍

一、??作品介绍

二、??作品效果

??视频演示

?? 截图演示

三、?? 作品代码

??HTML代码

??CSS代码

四、??更多源码

二、??作品效果

??视频演示

?? 截图演示

三、?? 作品代码

??HTML代码

??CSS代码

四、??更多源码

推荐阅读更多精彩内容

传奇手游全部平台_三端传奇开服网址大全下载_三端传奇版本下载教程

web前端大作业 html+css宠物网页设计网站模板源码分享

一、??作品介绍

一、??作品介绍

二、??作品效果

??视频演示

?? 截图演示

三、?? 作品代码

??HTML代码

??CSS代码

四、??更多源码

二、??作品效果

??视频演示

?? 截图演示

三、?? 作品代码

??HTML代码

??CSS代码

四、??更多源码

推荐阅读更多精彩内容

一、??作品介绍

二、??作品效果

三、?? 作品代码

四、??更多源码

二、??作品效果

三、?? 作品代码

四、??更多源码