CSS基礎教學之列表及邊框屬性

CSS清單屬性

項目符號或編號前面的各種符號無法改變樣式,所以在實際中我們一般不用。

  • list-style:清單樣式,取值:none。去掉項目符號或編號前面的各種符號。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
        ul,li{list-style:none;}/*去掉前面的符号*/
    </style>
    </head>
    <body>
        <ul>
            <li>HTML+CSS</li>
            <li>JavaScript</li>
            <li>MySQL</li>
            <li>PHP</li>
        </ul>
    </body>
</html>

CSS邊框屬性:每個元素都可以加上邊框線

  •  border-left:左邊框線。

  •  格式:border-left:粗細 線型 線的顏色;

  •  線型:none(無線) 、solid(實線)、dashed(虛線)、dotted(點狀線)

  • # 舉例:border-left:5px  dashed  red;

  • border-right:右邊框線。

  • border-top:上邊框線。

  • border-bottom:下邊框線。

border:同時為四個邊加上邊框線。


<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    <style type="text/css">
        .box{
            background-color:#66ff66;
            width:200px;
            height:200px;
            border-left:6px solid red;
            border-right:3px dashed blue;
            border-top:5px dotted black;
        }
    </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>
#########
繼續學習
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> <style type="text/css"> ul,li{list-style:none;}/*去掉前面的符号*/ </style> </head> <body> <ul> <li>HTML+CSS</li> <li>JavaScript</li> <li>MySQL</li> <li>PHP</li> </ul> </body> </html>