CSS3学习笔记(中)

一、列表

<ul  style=“list-style-type:square”>

style=“list-style-type:square”               ---disc实心圆  circle空心圆 

style=“list-style-image:url(logo.jpg)”

style=“list-style-position:outside”            ---inside

style=“list-style:outsidecircle”

二、表格

<table style=“border:1px solid blue;border-collapse:collapse;caption-side:bottom;table-layout:automatic”>

/*                                       separate                             fixed   */

<caption>成绩</caption>

<tr>

   <th style=“border: 1px solid blue;width:50px;height:100px”>语文</th>

<th style=“border: 1px solid blue;vertical-align:top;text-align:right”>数学</th>

<th style=“border: 1px solid blue;padding:10px”>英语</th>

</tr>

<tr>

<td style=“border: 1px solid blue” >90</td>

<td style=“border: 1px solid blue” >90</td>

<td style=“border: 1px solid blue” >90</td>

</tr>

 

三、链接

 

a:link{color:blue;}        /*伪类:link用于浏览者从未访问过的链接*/

a:visited{color:red;}       /* 伪类:visited用于浏览者已访问过的链接。*/

a:hover{ text-transform: uppercase;

       font-style:italic;

           font-weight:bold;

           color:blue;

           background-color:yellow;

      letter-spacing: 10px;

}                /* 伪类:hover用于有鼠标悬停的链接*/

a:active{color:yellow;}     /* 伪类:active用于活动的链接（即获得当前焦点的链接）*/

a{text-decoration:none}    /*去掉下划线*/

四．盒模型

 

1、内、外边距

<p style=“margin:10px 20px 30px 40px”>第一段</p>            /*外边距，顺序依次为上、右、下、左*/

<p style=“margin=10px 11px 12px 13px”>第二段</p>           /*上下相遇取大值*/

<th style=“boder:padding:10px” >英语</th>                  /*内边距，顺序依次为上、右、下、左*/

 

2、边框

p {

border-width: 1px;

border-style: solid; 

border-color: blue;

            }

3、设置高、宽度

div.box {

                        height: 500px;

                        width: 200px;

                        border: 1px solid black;

                        background: orange;

         }

五、定位

1、绝对定位----采用绝对定位的元素不获得任何空间。这意味着：该元素在被定位后不会留下空位。

#box1 {

                        position:absolute;

                        top: 50px;

                        left: 50px;

            }

 

2、相对定位----采用相对定位的元素，其位置是相对于它在文档中的原始位置计算而来的。这意味着，相对定位是通过将元素从原来的位置向右、向左、向上或向下移动来定位的。采用相对定位的元素会获得相应的空间。

#box1 {

                        position:absolute;

                        top: 50px;

                        left: 50px;

            }