模型盒.png
不能对内边距和外边距指定颜色，也不能加任何装饰。元素的背景颜色（或背景图像）会延伸到内边距，但不会延伸到外边距。
guarantee.png
.guarantee {
line-height: 1.9em;
font-style: italic;
font-family: Georgia, "Times New Roman", Times, serif;
color: #444444;
border-color: white;
border-width: 1px;
border-style: dashed;/*solid实线，dashed虚线; 边框宽度：thin, medium, shick, 1px, ……; 可以指定任一边框的值，border-top-color/width/style*/
background-color: #a7cece;
padding: 25px;
padding-left: 80px;/*放在padding之后可以覆盖原值*/
margin: 30px;
margin-right: 250px;
background-image: url(image/background.gif);/*可以是相对路径，也可以是绝对路径；url两边不需要加引号*/
background-repeat: no-repeat;/*no-repeat不重复，repeat-x水平方向重复，repeat-y垂直方向上重复，inherit按父元素设置*/
background-position: top-left;
}
- 指定边框圆角
1、指定4角：
border-radius: 15px;
2、单独指定各角：
border-top-left-radius: 3em;
border-top-right-radius: 0em;
border-bottom-right-radius: 0em;
border-bottom-left-radius: 3em;
- 使用多个样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Head First Lounge</title>
<link type="text/css" rel="stylesheet" href="corporate.css">
<link type="text/css" rel="stylesheet" href="branch-one.css">
<link type="text/css" rel="stylesheet" href="branch-two.css">/*顺序很重要，下面的样式表会覆盖上面的样式表*/
</head>
<body>
.
.
.
</body>
</html>
- 媒体查询
1、外部样式表，根据不同设备的屏幕大小设置样式表
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width:481px)">/*屏幕横向像素高于480*/
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and (max-width:480px)">/*屏幕横向像素低于480*/
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">/*打印显示*/
2、直接在css中新增媒体查询
@media screen and (min-width: 481px) {
#guarantee {
margin-right: 250px;
}
}
@media screen and (max-width:480px) {
#guarantee {
margin-right: 30px;
}
}
@media print {
body {
font-family: Times, "Times New Roman", serif;
}
}