12、margin边界、图片拼版及圆角表格制作知识

2.15 margin边界

Margin是边界，一个盒子的边界是4个。
Margin：10px；上、下、左、右全是10px
Margin：10px 50px；第一个参数是上、下，第二个参数是左、右。
Margin：10px auto 50px；第一个是上，第二个是左右，第三个是下
Margin：10px 20px 30px 40px；顺序：上右下左（顺时针旋转）
同理：padding后面参数的属性是一样的。
例1：导航栏的CSS样式示例

<style type="text/css">
*{
	/*星号表示所有标记，在拼版的第一步将所有的标记清零*/
	margin:0px;
	padding:0px;
}
#content{
	width:780px;
	list-style-type:none;/*去除ul前面的点*/
	font-size:16px;
	font-family:"新宋体";
	color:#FFFFFF;
	margin:50px auto 0px;/*上——左右——下*/		
}
#content li{
	background-color:#006633;/*给ul添加一个背景色*/
	float:left;/*所有的li排成一行*/
	width:129px;/*每个li宽度是130,因为边框的宽度是1，所以li就是129*/
	height:30px;
	line-height:30px;/*设置行高的目的是为了将字垂直居中*/
	border-right:#CCFFCC solid 1px;/*li的右边框*/
	text-align:center;/*将字水平居中*/	
}
#content li a{
	text-decoration:none;/*去除超链接的下划线*/
	color:#FFFFFF;
	display:block;
}	
#content li a:hover{
	background-color:#99FFCC;
</style>

2.16 图片拼版

CSS程序如下：

style type="text/css">
*{/*消除所有标签原始属性*/
	margin:0px;
	padding:0px;
}
ul{
	width:440px;
	list-style-type:none;/*消除列表的圆点*/
	overflow:hidden;/*使对应的盒子高度扩张*/
	margin:50px auto;/*上下50px、左右自动居中*/
}
li{
	
	float:left;
	width:110px;
}
img{
	height:180px;
	width:100px;
}
</style>

  *多学一招：在项目中，拼版用div+css+table的方式拼版，如果拼的是展示性页面用div+css，如果显示的是数据，用table，除此，后台一般用table。

2.17 圆角表格制作

  一、传统方法：用图形图像处理工具制作一个图形，切片导出，再新建一个表格拼版放到网页中。

  二、CSS的方法
  Border-radius：用来做圆角矩形（兼容性ie8.0以前版本不支持）。其后面的参数与margin类似。记忆时将矩形顺时针旋转45度

CSS代码示例：

<style type="text/css">
div{
	border:#000000 solid 1px;
	width:200px;
	height:200px;
	margin-bottom:10px;
	text-align:center;
	line-height:200px;/*文字上下居中*/
}
div:nth-of-type(1){/*表示第一个div，nth序数词英语缩写*/
	border-radius:30px;/*radius:半径，圆的半径是30px*/
}
div:nth-of-type(2){
	border-radius:10px 50px;/*上下-左右*/
}
div:nth-of-type(3){
	border-radius:10px 50px 0px;/*上-左右-下*/
}
div:nth-of-type(4){
	border-radius:30px 30px 0px 0px;/*上-右-下-左*/
}
div:nth-of-type(5){
 	border-radius:200px 0px 0px 0px;
}
div:nth-of-type(6){（圆）
	border-radius:100px;
}
div:nth-of-type(7){（圆）
	border-radius:50%;
}
</style>