一仗考、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)戒努。該實例里面有設(shè)置了css的樣式設(shè)置，有div的樣式格局肆饶，這個實例比較
一改衩、??作品介紹
HTML實例網(wǎng)頁代碼, 本實例適合于初學(xué)HTML的同學(xué)。該實例里面有設(shè)置了css的樣式設(shè)置驯镊，有div的樣式格局葫督，這個實例比較全面，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計板惑。
二橄镜、??作品效果
??視頻演示
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>寵迷網(wǎng)</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">寵迷網(wǎng)</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">形態(tài)特征</a>
<a href="view5.html">生活習(xí)性</a>
<a href="view6.html">主要行為</a>
<a href="view7.html">馴養(yǎng)方式</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">狗屬于脊索動物門冯乘、脊椎動物亞門洽胶、哺乳綱、真獸亞綱裆馒、食肉目姊氓、裂腳亞目、犬科動物喷好。中文亦稱“犬”翔横，狗分布于世界各地。狗與馬梗搅、牛禾唁、羊、豬无切、雞并稱“六畜”蟀俊。有科學(xué)家認為狗是由早期人類從灰狼馴化而來。</a></p>
</div>
<div class="text">
<h2>基因密碼</h2>
<p><a href="view2.html">在過去1.4萬年中订雾，經(jīng)過不斷地馴化，產(chǎn)生了400多種犬矛洞。每一種都具有獨特的體格洼哎、皮毛顏色以及習(xí)性烫映。為了發(fā)現(xiàn)造成犬的特定性狀的基因突變，2009年Akey等分析了10個品種共275頭家犬的基因組噩峦。此前的研究發(fā)現(xiàn)帶來產(chǎn)生地特定特性的基因锭沟，諸如達克斯犬的短腿。他們分析了一系列品種的犬识补，從而確定數(shù)個世紀的選擇性育種對于整個犬基因組的影響族淮。
</a></p>
<p><a href="view2.html">2012年Chen等對犬和狼的嗅覺受體基因家族進行分類及測序分析，發(fā)現(xiàn)由于馴養(yǎng)導(dǎo)致的生殖隔離凭涂，犬和狼中嗅覺受體基因進化的方向不一致祝辣，中國鄉(xiāng)村犬中嗅覺受體基因序列比較保守。狗生成的麥芽糖酶-葡糖淀粉酶要多12倍切油，這是因為該酶基因發(fā)生了數(shù)個突變蝙斜。</a></p>
</div>
<div class="text">
<h2>文明影響</h2>
<p><a href="view3.html">在中國吉林榆樹縣周家油坊等地層中，即舊石器時代的更新世晚期澎胡，約在公元前2.6萬～公元前1萬年孕荠，發(fā)現(xiàn)了大量哺乳類化石，除人類的化石之外攻谁，出現(xiàn)了家狗的頭骨“半化石”稚伍。雖然有人認為它屬于更新世動物化石，但更多的專家則認為它們是全新世或現(xiàn)代動物的遺骸戚宦。這類舊石器時代的家狗遺骸个曙，可以表明中國東北地區(qū)的居民已開始將狗家化，開始馴化狗阁苞。</a></p>
<p><a href="view3.html">由此可見困檩，東北和蒙古是舊石器時代晚期和新石器早、中期的家狗馴化的中心那槽。除此之外悼沿，在河南安陽、河北磁山骚灸、陜西西安半坡糟趾、山東大汶口、江蘇常州等地均發(fā)掘到全新世后期家狗的骨骼化石甚牲，由此可以肯定义郑，中國是家化狗的中心之一。</a></p>
</div>
<div class="line">
<a href="view4.html"><img src="images/view4.jpg"/></a>
<h2>形態(tài)特征</h2>
<p><a href="view4.html">犬的嗅覺靈敏度位居各畜之首丈钙，眼瞎的狗可以利用鼻子生活的像正常犬非驮。犬靈敏的嗅覺主要表現(xiàn)兩個方面：一是對氣味的敏感程度；二是辨別氣味的能力雏赦。敏感度會因味道的種類而有所差別劫笙。</a></p>
</div>
<div class="line">
<a href="view5.html"><img src="images/view5.jpg"/></a>
<h2>生活習(xí)性</h2>
<p><a href="view5.html">狗喜歡啃咬骨頭芙扎。這也是原生態(tài)時撕咬獵物所留下的習(xí)慣。我們在喂養(yǎng)時要經(jīng)常給它一些骨頭填大。（切記：不可用禽骨戒洼，可能會刺穿狗的腸胃）。狗普遍存在不同程度的以人類和自身糞便為食的習(xí)性允华。</a></p>
</div>
<div class="line">
<a href="view6.html"><img src="images/view6.jpg"/></a>
<h2>主要行為</h2>
<p><a href="view6.html">狗在群居時圈浇，也有“等級制度”。建立這樣的秩序可以保持整個群體的穩(wěn)定靴寂，減少因為食物磷蜀、生存空間和異性的爭奪而引起的惡斗和戰(zhàn)爭。狗臥下前榨汤，總在周圍轉(zhuǎn)一轉(zhuǎn)蠕搜，確定無危險后，才會安心睡覺收壕。</a></p>
</div>
<div class="line">
<a href="view7.html"><img src="images/view7.jpg"/></a>
<h2>馴養(yǎng)方式</h2>
<p><a href="view7.html">犬的生物學(xué)起源可追溯到幾千萬年前妓灌，犬的馴化史大約在一萬五千年前的中石器時代，甚至有科學(xué)家從遺傳學(xué)的角度論證稱蜜宪，可能在距今10萬年前虫埂，早在遠古時代，犬就已經(jīng)被人類馴服圃验。</a></p>
</div>
<div class="footer">
Copyright @ 2021 chongmi.com All Rights Reserved. 寵迷網(wǎng) 版權(quán)所有
</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;
}
四掉伏、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計算機基礎(chǔ)到前端常用框架的教程澳窑，涵蓋前端大部分必備知識（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
Gitee倉庫地址（來個Star吧~）： https://gitee.com/zhanyuqiu2022/my-app
全面斧散，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實踐設(shè)計。
二摊聋、??作品效果
??視頻演示
https://live.csdn.net/v/embed/240759
U11BG 寵物狗（10頁）
?? 截圖演示
image
image
image
image
image
image
image
image
image
image
三鸡捐、?? 作品代碼
??HTML代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>寵迷網(wǎng)</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">寵迷網(wǎng)</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">形態(tài)特征</a>
<a href="view5.html">生活習(xí)性</a>
<a href="view6.html">主要行為</a>
<a href="view7.html">馴養(yǎng)方式</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">狗屬于脊索動物門、脊椎動物亞門麻裁、哺乳綱箍镜、真獸亞綱、食肉目煎源、裂腳亞目色迂、犬科動物。中文亦稱“犬”手销，狗分布于世界各地歇僧。狗與馬、牛锋拖、羊诈悍、豬埂淮、雞并稱“六畜”。有科學(xué)家認為狗是由早期人類從灰狼馴化而來写隶。</a></p>
</div>
<div class="text">
<h2>基因密碼</h2>
<p><a href="view2.html">在過去1.4萬年中，經(jīng)過不斷地馴化讲仰，產(chǎn)生了400多種犬慕趴。每一種都具有獨特的體格、皮毛顏色以及習(xí)性鄙陡。為了發(fā)現(xiàn)造成犬的特定性狀的基因突變冕房，2009年Akey等分析了10個品種共275頭家犬的基因組。此前的研究發(fā)現(xiàn)帶來產(chǎn)生地特定特性的基因趁矾，諸如達克斯犬的短腿耙册。他們分析了一系列品種的犬，從而確定數(shù)個世紀的選擇性育種對于整個犬基因組的影響毫捣。
</a></p>
<p><a href="view2.html">2012年Chen等對犬和狼的嗅覺受體基因家族進行分類及測序分析详拙，發(fā)現(xiàn)由于馴養(yǎng)導(dǎo)致的生殖隔離，犬和狼中嗅覺受體基因進化的方向不一致蔓同，中國鄉(xiāng)村犬中嗅覺受體基因序列比較保守饶辙。狗生成的麥芽糖酶-葡糖淀粉酶要多12倍，這是因為該酶基因發(fā)生了數(shù)個突變斑粱。</a></p>
</div>
<div class="text">
<h2>文明影響</h2>
<p><a href="view3.html">在中國吉林榆樹縣周家油坊等地層中弃揽，即舊石器時代的更新世晚期，約在公元前2.6萬～公元前1萬年则北，發(fā)現(xiàn)了大量哺乳類化石矿微，除人類的化石之外，出現(xiàn)了家狗的頭骨“半化石”尚揣。雖然有人認為它屬于更新世動物化石涌矢，但更多的專家則認為它們是全新世或現(xiàn)代動物的遺骸。這類舊石器時代的家狗遺骸惑艇，可以表明中國東北地區(qū)的居民已開始將狗家化蒿辙，開始馴化狗。</a></p>
<p><a href="view3.html">由此可見滨巴，東北和蒙古是舊石器時代晚期和新石器早思灌、中期的家狗馴化的中心。除此之外恭取，在河南安陽泰偿、河北磁山、陜西西安半坡蜈垮、山東大汶口耗跛、江蘇常州等地均發(fā)掘到全新世后期家狗的骨骼化石裕照，由此可以肯定，中國是家化狗的中心之一调塌。</a></p>
</div>
<div class="line">
<a href="view4.html"><img src="images/view4.jpg"/></a>
<h2>形態(tài)特征</h2>
<p><a href="view4.html">犬的嗅覺靈敏度位居各畜之首晋南，眼瞎的狗可以利用鼻子生活的像正常犬。犬靈敏的嗅覺主要表現(xiàn)兩個方面：一是對氣味的敏感程度羔砾；二是辨別氣味的能力负间。敏感度會因味道的種類而有所差別。</a></p>
</div>
<div class="line">
<a href="view5.html"><img src="images/view5.jpg"/></a>
<h2>生活習(xí)性</h2>
<p><a href="view5.html">狗喜歡啃咬骨頭姜凄。這也是原生態(tài)時撕咬獵物所留下的習(xí)慣政溃。我們在喂養(yǎng)時要經(jīng)常給它一些骨頭。（切記：不可用禽骨态秧，可能會刺穿狗的腸胃）董虱。狗普遍存在不同程度的以人類和自身糞便為食的習(xí)性。</a></p>
</div>
<div class="line">
<a href="view6.html"><img src="images/view6.jpg"/></a>
<h2>主要行為</h2>
<p><a href="view6.html">狗在群居時申鱼，也有“等級制度”愤诱。建立這樣的秩序可以保持整個群體的穩(wěn)定，減少因為食物润讥、生存空間和異性的爭奪而引起的惡斗和戰(zhàn)爭转锈。狗臥下前，總在周圍轉(zhuǎn)一轉(zhuǎn)楚殿，確定無危險后撮慨，才會安心睡覺。</a></p>
</div>
<div class="line">
<a href="view7.html"><img src="images/view7.jpg"/></a>
<h2>馴養(yǎng)方式</h2>
<p><a href="view7.html">犬的生物學(xué)起源可追溯到幾千萬年前脆粥，犬的馴化史大約在一萬五千年前的中石器時代砌溺，甚至有科學(xué)家從遺傳學(xué)的角度論證稱，可能在距今10萬年前变隔，早在遠古時代规伐，犬就已經(jīng)被人類馴服。</a></p>
</div>
<div class="footer">
Copyright @ 2021 chongmi.com All Rights Reserved. 寵迷網(wǎng) 版權(quán)所有
</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學(xué)習(xí)指南】從web基礎(chǔ)猖闪、計算機基礎(chǔ)到前端常用框架的教程，涵蓋前端大部分必備知識（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
