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>

重置程式碼

自動運行

提交

預覽 Clear