一、??作品介紹
HTML實(shí)例網(wǎng)頁代碼, 本實(shí)例適合于初學(xué)HTML的同學(xué)陨帆。該實(shí)例里面有設(shè)置了css的樣式設(shè)置诵闭，有div的樣式格局，這個實(shí)例比較全面咪惠，有助于同學(xué)的學(xué)習(xí),本文將介紹如何通過從頭開始設(shè)計個人網(wǎng)站并將其轉(zhuǎn)換為代碼的過程來實(shí)踐設(shè)計击吱。
二、??作品效果
??視頻演示
https://live.csdn.net/v/embed/239867
(title-C101SJ-家具網(wǎng)帶js輪播圖三級(7頁))]
?? 截圖演示
07.png
06.png
05.png
04.png
03.png
02.png
三、?? 作品代碼
??HTML代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>家具網(wǎng)</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/banner.js" type="text/jscript"></script>
</head>
<body>
<!----網(wǎng)站頭部開始---->
<div class="top"><div class="logo"><img src="images/logo.png"/></div></div>
<div id="nav">
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="about.html">關(guān)于家具</a></li>
<li><a href="zhanshi.html">家具展示</a></li>
<li><a href="xuzhi.html">收藏保養(yǎng)</a></li>
<li><a href="news.html">家具知識</a></li>
<li><a href="liuyan.html">在線留言</a></li>
</ul>
</div>
<!-----網(wǎng)站頭部結(jié)束-------------->
<!------網(wǎng)站主體部分開始----------------------->
<div class="main">
<div class="wrap" id="wrap">
<ul id="pic">
<li><img src="images/banner1.jpg" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
</ul>
<ol id="list">
<li class="on">1</li>
<li>2</li>
<li>3</li>
</ol>
</div>
<div class="nr">
<div class="box1">
<div class="box1-left"><img src="images/gr.jpg"></div>
<div class="box1-right">
<a href="about.html"><div class="box1-right-tit">關(guān)于家具</div></a>
<p>家具是指人類維持正常生活、從事生產(chǎn)實(shí)踐和開展社會活動必不可少的器具設(shè)施大類妆够。家具也跟隨時代的腳步不斷發(fā)展創(chuàng)新，到如今門類繁多永脓，用料各異，品種齊全鞋仍，用途不一常摧。是建立工作生活空間的重要基礎(chǔ)。</p>
<p>家具是由材料威创、結(jié)構(gòu)落午、外觀形式和功能四種因素組成，其中功能是先導(dǎo)那婉，是推動家具發(fā)展的動力;結(jié)構(gòu)是主干，是實(shí)現(xiàn)功能的基礎(chǔ)党瓮。這四種因素互相聯(lián)系详炬，又互相制約。由于家具是為了滿足人們一定的物質(zhì)需求和使用目的而設(shè)計與制作的寞奸，因此家具還具有材料和外觀形式方面的因素呛谜。</p>
<p>結(jié)構(gòu)是指家具所使用的材料和構(gòu)件之間的一定組合與連接方式，它是依據(jù)一定的使用功能而組成的一種結(jié)構(gòu)系統(tǒng)枪萄。它包括家具的內(nèi)在結(jié)構(gòu)和外在結(jié)構(gòu)隐岛，內(nèi)在結(jié)構(gòu)是指家具零部件間的某種結(jié)合方式，它取決于材料的變化和科學(xué)技術(shù)的發(fā)展瓷翻。像傳統(tǒng)的榫接方式和現(xiàn)代板式家具用的五金件連接方式都是內(nèi)在結(jié)構(gòu)聚凹。</p>
</div>
</div>
<div class="caiz">
<ul>
<li><a href="zhanshi.html"><img src="images/dg1.jpg" /><p>北歐布藝沙發(fā)組合</p><p><span>價格：4980元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg2.jpg" /><p>北歐實(shí)木床日式主臥</p><p><span>價格：2980元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg3.jpg" /><p>輕奢大理石電視柜茶幾組合</p><p><span>價格：4848元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg4.jpg" /><p>北歐輕奢乳膠布藝沙發(fā)組合</p><p><span>價格：3543元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg5.jpg" /><p>歐式輕奢家具實(shí)木床</p><p><span>價格：4838元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg6.jpg" /><p>現(xiàn)代簡約移門臥室大衣柜</p><p><span>價格：3068元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg7.jpg" /><p>真皮沙發(fā)現(xiàn)代簡約實(shí)木休閑椅</p><p><span>價格：2115元</span></p></a></li>
<li><a href="zhanshi.html"><img src="images/dg8.jpg" /><p>木沙發(fā)簡約現(xiàn)代客廳椅</p><p><span>價格：640元</span></p></a></li>
</ul>
</div>
</div>
</div>
<!------網(wǎng)站主體結(jié)束--------------------------->
<!------網(wǎng)站底部分開始----------------------->
<div class="foot">
<div class="banq">
網(wǎng)站版權(quán) 家具網(wǎng)
</div>
</div>
<!------網(wǎng)站底部體結(jié)束--------------------------->
</body>
</html>
??CSS代碼
body {
margin: 0 auto;
font-size: 14px;
font-family: "微軟雅黑";
line-height: 22px;
background: #fbf6d9
}
.about-main ul li a img {
display: block;
height: 138px;
width: 102px;
border: 1px solid #c4c4c4;
padding: 3px;
}
.about-main ul li span {
font-size: 12px;
}
.new_lt {
height: 30px;
float: left;
text-align: left;
width: 840px;
}
.new_rt {
height: 30px;
float: right;
margin-right: 13px;
display: inline;
}
.neirong {
width: 960px;
height: auto;
overflow: hidden;
background: #FFF;
padding: 20px;
}
.biaoti {
color: #3d2915;
font-weight: bold;
font-size: 16px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
_margin-bottom: 10px;
border-bottom: #CCC 1px dashed;
}
.cernt {
margin: 0 auto;
display: block;
}
.foot {
width: 1000px;
height: 83px;
background:#039bac;
margin: 0 auto;
padding-top: 60px;
}
.banq {
width: 1000px;
height: 40px;
line-height: 40px;
color: #FFF;
margin: 0 auto;
text-align: center;
}
.lyleft{
width:390px;
height: 550px;
float: left;
margin-right: 30px;
}
.lyright{
width: 540px;
height: 550px;
float: left;
}
.iput{
width: 530px;
height: 40px;
line-height: 40px;
border: #a6a5a5 1px solid;
padding-left: 10px;
color: #bcbcbc;
font-size: 14px;
margin-bottom: 30px;
}
.liuyan{
width: 530px;
height: 220px;
line-height: 40px;
border: #a6a5a5 1px solid;
padding-left: 10px;
color: #bcbcbc;
font-size: 14px;
margin-bottom: 40px;
}
.btn{
width: 131px;
height: 36px;
line-height: 36px;
background: url(../images/more.png) no-repeat;
text-align: center;
color: #FFF;
border: none;
display: block;
margin: 0 auto;
}
四割坠、??更多源碼
【干貨分享】自學(xué)編程的小伙伴可以前往我的 gitee 倉庫（持續(xù)更新中...）
??【web學(xué)習(xí)指南】從web基礎(chǔ)、計算機(jī)基礎(chǔ)到前端常用框架的教程妒牙，涵蓋前端大部分必備知識（學(xué)習(xí)指南 + 技術(shù)文章 + 資源分享）
