CSS的样式结合应用

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