.container {
	width: 650px;
}

header {
	padding: 30px;
}

#box {  /* 初始化“盒模型”，设置宽度，因为不确定高度所以不设高度 */
 width: 500px;
 border: 2px solid #E6E6E6;
 font-size:15px;
 font-family:"微软雅黑";
 color:#414141;
 margin:20px;
 display:inline; /* 这条声明可以处理IE6浏览器双倍MARGIN的问题（BUG）,“例如：同时存在MARGIN-LEFT:20PX;FLOAT:LEFT; ，那么IE6浏览器会出现左侧外边距40px而不是20px” */
 float:left;  /* 这条能够使外层的DIV不脱离内层元素浮动后的文档流 */
}
.box-title {  /* 图片标题样式  */
 font-size:150%;
 font-weight:bold;
 color:#689EE8;
 padding-bottom:10px;  /* 图片标题和图片描述之间的间距 */
}
.box-description {    /* 图片描述样式 */
 text-indent:2em;   /* 首行缩进 */
 line-height:1.5em;   /* 行高 */
 font-family:"宋体";
 color:#333;
}
#box dl {   /* 对每个自定义列表的总体样式 */
 width:480px;   /* 宽度+两个外边距=外层DIV的总宽度500px */
 margin:10px;  /* 缩写，表示上下左右外边距都为10px */
 margin-bottom:20px;   /*	单独定义向下外边距 */
 display:inline;  /* 处理IE6浏览器双倍MARGIN的BUG */
 float:left;
}
#box dt img {    /* 定义图片样式 */
 padding:4px;   /* 内边距和边框结合会产生相框的效果 */
 border:1px solid #DCDCDE;    /* 边框的缩写，宽度1px，实线，颜色#DCDCDE */
 border-bottom-color:#7F7F7F;  /* 右侧和下边边框颜色加深形成阴影效果 */
 border-right-color:#7F7F7F;
}
#box .box-left dt {   /* 设置图片在左、文字在右的样式 */
 float:left;
 width:210px;   /* 设置浮动时通常要定义宽度，以免出错，图片宽200+内边距4*2+边框1*2=210 */
 margin-right:20px;    /* 设置图片与右侧文本之间的间距 */
}
#box .box-left dd {    /* 设置图片在左、文字在右的样式 */
 float:left;
 width:250px;    /* 文本宽度：480-210-20（margin-right:20px）=250 */
}
#box .box-right dt {   /* 设置图片在右、文字在左的样式 */
 float:right;
 width:210px; 
}
#box .box-right dd {   /* 设置图片在右、文字在左的样式  */
 float:left;
 width:250px;
 margin-right:20px;
}