Senarai tutoria...LOGIN

Senarai tutorial asas CSS dan sifat sempadan

Atribut senarai CSS

Pelbagai simbol di hadapan peluru atau nombor tidak boleh diubah dalam gaya, jadi dalam praktiknya kita biasanya tidak menggunakan mereka.

  • gaya senarai: gaya senarai, nilai: tiada. Keluarkan pelbagai simbol sebelum peluru atau nombor.

<!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>

Atribut sempadan CSS: Setiap elemen boleh mempunyai sempadan

  • sempadan-kiri: garis sempadan kiri.

  • Format: sempadan-kiri: Gaya garisan Ketebalan Warna garisan; pepejal (garisan pepejal), putus-putus (garis putus-putus), putus-putus (garis putus-putus)

  • Contoh: sempadan-kiri: 5px merah putus-putus; >

  • sempadan-kanan: Garisan sempadan kanan.
  • bahagian atas sempadan: garisan sempadan atas.
  • bahagian bawah sempadan: garisan sempadan bawah.

  • sempadan: Tambahkan sempadan pada empat sisi pada masa yang sama.

  • <!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>

  • bahagian seterusnya
<!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>
babperisian kursus