CSS的样式结合应用
1.无序列表。
list-style-type: none;
list-style-image: url(1.png);
}
2.Table
border-bottom: #0C0 double 6px; /*虚实线*/
border-left: #0C0 solid 6px; /*实线*/
border-right: #0C0 solid 6px;
border-top: #0C0 solid 6px;
width: 500px;
}
table td{
border: #FF0 double 3px;
padding: 20px; /*内边距,文字与table之间间距*/
margin: 5px; /*外边距,单元格之间间距*/
}
除了表格,其他只要是区域都可以设置边界属性(div)
表格中输入效果
<tr>
<td>name:<input type="text"/ class="ced"></td>
<td>number:<input type="text"/ class="ced"></td>
<td>password:<input type="text"/ class="bef"></td>
</tr>
<tr>
<td>单元格二一</td>
<td>单元格二二</td>
<td>单元格二三</td>
</tr>
</table>
/*in html*/
input.ced{
border: none;
border-left: #000 3px solid;
border-right: #000 3px solid;
border-top: #000 3px solid;
border-bottom: #CF9 6px solid;
}
input.bef{
border: none;
border-left: #845 3px solid;
border-right: #854 3px solid;
border-top: #854 3px solid;
border-bottom: #AB9 6px solid;
}
/*in third.css*/
3.Filter滤镜
View the code.
CSS盒子模型box
Div+css
Use html and id selector
1.边框:border
{top right bottom left }
height: 100px;
width: 200px;
border: #09F solid 2px;
}
2.内边距:padding
{top right…}
height: 100px;
width: 200px;
border: #09F solid 2px;
padding: 40px 40px 40px 40px;
/* 1上下左右 2.1上下 2.2左右 3.1上 3.2左右 3.3下 4上右下左(顺时针)*/
/*margin: 10px ;*/
}
3.外边距:margin
{top …}
可以设置body的外边距
background-color: #000;
color: #FFF;
border-bottom: #09F solid 6px;
border-top: #09F solid 6px;
border-left: #09F solid 6px;
border-right: #09F solid 6px;
margin: 0px ;
}
#div-2{
}
#div-3{
}
body{
margin: 0px;
}
CSS布局
A:漂浮float|none|left|right
*none:默认不漂浮
*left:文本流向对象右边
*right:文本流向对象左边
background-color: #000;
color: #FFF;
float: left;
}
Clear:none|left|right|both
left:不允许左边有浮动对象
Right:不允许右边有浮动对象
Both:不允许有浮动对象
B:定位position
Position:static|absolute|fixed|relative
static|默认
absolute|绝对:从文档流中拖出,漂浮在空中
background-color: #000;
color: #FFF;
position: absolute;
top: 50px;
left: 200px;
} //可以飞动;
没有指定父本,相对body而言
fixed|
Relative|对象不可层叠,在正常的文档流中偏移位置。
background-color: #000;
color: #FFF;
position: relative;
top: 50px;
left: 200px;
}
C:图文混排
D:图像签名