W3C标准盒模型
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋内距＋边框＋外距
element空间宽度＝内容宽度＋内距＋边框＋外距
内盒尺寸计算（元素大小）
element高度＝内容高度＋内距＋边框（height为内容高度）
element宽度＝内容宽度＋内距＋边框（width为内容宽度）
2.IE传统下盒模型（IE6以下，不包含IE6版本或”QuirksMode下IE5.5+”）
外盒尺寸计算（元素空间尺寸）
element空间高度＝内容高度＋外距（height包含了元素内容宽度、边框、内距）
element宽间宽度＝内容宽度＋外距（width包含了元素内容宽度、边框、内距）
内盒尺寸计算（元素大小）
element高度＝内容高度（height包含了元素内容宽度、边框、内距）
element宽度＝内容宽度（width包含了元素内容宽度、边框、内距）
在CSS3中新增加了box-sizing属性，能够事先定义盒模型的尺寸解析方式，其语法规则如下：
box-sizing: content-box | border-box | inherit
网络课程分类
title_icon.gif
submenu.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>课程导航</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">课程导航</h1><ul>
<li class="current"><a href="#">ACCP 软件工程师</a></li>
<li><a href="#">BTEST 软件测试工程师</a></li>
<li><a href="#">BENET 网络工程师</a></li>
<li><a href="#">JBNS 网站工程师</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="#">网络营销</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>洗发 护发 沐浴 身体乳 手足护理<br/>
护手霜 纤体 身体精油 颈部护理<br/>
个人护理 卫生用品 脱毛
</dd>
<dt>礼盒套装</dt>
<dd>护肤套装 身体护理套装 彩妆套装 <br/>
旅行装 香水套装 男士套装
</dd>
<dt>美容工具</dt>
<dd>护肤 彩妆 美发 美体 美甲 <br/>
美容仪器 其他美容工具
</dd>
<dt>母婴专区</dt>
<dd>奶粉 尿裤湿巾 母婴洗护</dd>
<dt>男士专区</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>
效果图
