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>