W3C標準盒模型
外盒尺寸計算（元素空間尺寸）
element空間高度＝內(nèi)容高度＋內(nèi)距＋邊框＋外距
element空間寬度＝內(nèi)容寬度＋內(nèi)距＋邊框＋外距
內(nèi)盒尺寸計算（元素大小）
element高度＝內(nèi)容高度＋內(nèi)距＋邊框（height為內(nèi)容高度）
element寬度＝內(nèi)容寬度＋內(nèi)距＋邊框（width為內(nèi)容寬度）
2.IE傳統(tǒng)下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸計算（元素空間尺寸）
element空間高度＝內(nèi)容高度＋外距（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
element寬間寬度＝內(nèi)容寬度＋外距（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
內(nèi)盒尺寸計算（元素大小）
element高度＝內(nèi)容高度（height包含了元素內(nèi)容寬度、邊框、內(nèi)距）
element寬度＝內(nèi)容寬度（width包含了元素內(nèi)容寬度、邊框、內(nèi)距）
在CSS3中新增加了box-sizing屬性，能夠事先定義盒模型的尺寸解析方式，其語法規(guī)則如下：
box-sizing: content-box | border-box | inherit
網(wǎng)絡(luò)課程分類
title_icon.gif
submenu.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>課程導(dǎo)航</title>
<link href="css/course.css" rel="stylesheet" type="text/css" />
<style>
*{
padding: 0px;
margin: 0px;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
#course_list {
width: 200px;
border: 1px solid #aacbee ;
background:#f5f9fc ;
margin-left: 50px;
}
body{
width: 1000px;
}
.titles{
font-size: 15px;
background: url("title_icon.gif")2px center no-repeat;
text-indent: 20px;
line-height: 30px;
color: #1f376d;
}
li{
border-top: solid #aacbee 1px;
line-height: 25px;
background: url("submenu.gif") right center no-repeat;
}
ul{
margin: 5px;
}
</style>
</head>
<body>
<div id="course_list">
<h1 class="titles">課程導(dǎo)航</h1><ul>
<li class="current"><a href="#">ACCP 軟件工程師</a></li>
<li><a href="#">BTEST 軟件測試工程師</a></li>
<li><a href="#">BENET 網(wǎng)絡(luò)工程師</a></li>
<li><a href="#">JBNS 網(wǎng)站工程師</a></li>
<li><a href="#">ACCP 啟蒙星</a></li>
<li><a href="#">ANDROID 軟件工程師</a></li>
<li><a href="#">JAVA 軟件工程師</a></li>
<li><a href="#">.NET 軟件工程師</a></li>
<li><a href="#">網(wǎng)絡(luò)營銷</a></li>
</ul>
</div>
</body>
</html>
效果圖
聚美商品分類
icon_01.gif
icon_02.gif
icon_03.gif
icon_04.gif
icon_05.gif
icon_06.gif
icon_07.gif
icon_08.gif
icon_09.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>商品分類</title>
<link href="css/product.css" rel="stylesheet" type="text/css"/>
<style>
</style>
</head>
<body>
<div id="product">
<h1>全部分類</h1>
<dl>
<dt>護膚</dt>
<dd>潔面 化妝水 噴霧 美容液 眼霜<br/>
眼部精華 眼膜 面膜 面膜貼<br/>
水洗面膜 免洗面膜 精華 精油<br/>
凝露 乳液 面霜 日霜 晚霜
</dd>
<dt>彩妝</dt>
<dd>卸妝 防曬 隔離 BB霜 粉底 粉餅<br/>
睫毛膏 眼影 唇彩 腮紅 眼線筆<br/>
底妝 遮瑕 蜜粉 眉筆 美甲
</dd>
<dt>香氛</dt>
<dd>男香 女香 小Q裝 中性香水</dd>
<dt>身體護理</dt>
<dd>洗發(fā) 護發(fā) 沐浴 身體乳 手足護理<br/>
護手霜 纖體 身體精油 頸部護理<br/>
個人護理 衛(wèi)生用品 脫毛
</dd>
<dt>禮盒套裝</dt>
<dd>護膚套裝 身體護理套裝 彩妝套裝 <br/>
旅行裝 香水套裝 男士套裝
</dd>
<dt>美容工具</dt>
<dd>護膚 彩妝 美發(fā) 美體 美甲 <br/>
美容儀器 其他美容工具
</dd>
<dt>母嬰專區(qū)</dt>
<dd>奶粉 尿褲濕巾 母嬰洗護</dd>
<dt>男士專區(qū)</dt>
<dd>潔面 爽膚水 面霜 男香<br/>
眼霜 凝膠 乳液 精華 沐浴
</dd>
<dt>食品保健</dt>
<dd>瘦身類 保健類 美容類 食品類</dd>
</dl>
</div>
</body>
</html>
未加樣式圖為：
原圖
<style>
*{
margin:0px;
padding: 0px;
}
#product{
width: 300px;
margin-left: 300px;
background: white;
}
body{
background: gray;
}
h1{
background: black;
color: white;
line-height: 40px;
height: 40px;
font-size: 15px;
text-indent: 20px;
}
dd{
border-bottom: 1px dashed black ;
padding-left10px: 40px;
font-size:15px ;
line-height: 30px;
}
dt:nth-of-type(1)
{
background: url("icon_01.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(2)
{
background: url("icon_02.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(3)
{
background: url("icon_03.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(4)
{
background: url("icon_04.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
} dt:nth-of-type(5)
{
background: url("icon_05.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(6)
{
background: url("icon_06.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(7)
{
background: url("icon_07.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(8)
{
background: url("icon_08.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
dt:nth-of-type(9)
{
background: url("icon_09.gif") 0 center no-repeat;
line-height: 50px;
height: 50px;
text-indent: 20px;
}
<style>
效果圖
