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：图像签名