masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

Pemilih kelas pseudo tutorial asas CSS

Pemilih kelas pseudo CSS: Tambah gaya pada hiperpautan (tambah gaya pada keadaan pautan yang berbeza)

Hiperpautan mempunyai empat Status:

Status biasa (:link): Tetikus tidak diletakkan pada gaya pautan sebelumnya.

Keadaan tuding (: hover): Gaya apabila tetikus diletakkan pada pautan.

Keadaan aktif (:aktif): Tahan butang kiri tetikus tanpa melepaskannya Keadaan ini adalah jangka pendek.

Status dilawati (:dilawati): Tekan butang kiri tetikus dan timbulkannya, kesan gaya pada masa ini.

Dalam kerja harian, kaedah penulisan berikut digunakan untuk menambah gaya yang berbeza pada pautan:

a:pautan, a:dilawati{ warna:#444; ; } //Gabungkan "keadaan biasa" dan "keadaan yang dilawati" menjadi satu.

a:hover{ color:#990000; text-decoration:underline; } //"Tetikus di atas" untuk mencipta satu kesan

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>php.cn</title>
    </head>
    <style type="text/css">
        .box {
            
            height:30px;
            border:1px solid red;
            padding:10px;
        }
        .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/
        .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/
       
    </style>
    <body>
        <div class="box">
            <a href="#">欢迎来到php.cn</a>|
            <a href="#">首页</a>|
            <a href="#">课程</a>|
            <a href="#">问答</a>|
            <a href="#">手记</a>
        </div>
    </body>
</html>



Meneruskan pembelajaran
||
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>php.cn</title> </head> <style type="text/css"> .box { height:30px; border:1px solid red; padding:10px; } .box a:link,.box a:visited{color:#66ff88;text-decoration:none; }/*将“正常状态”和“访问过的状态”合二为一。*/ .box a:hover{color:#ff0000;text-decoration:underline;}/*“鼠标放上”单做一种效果*/ </style> <body> <div class="box"> <a href="#">欢迎来到php.cn</a>| <a href="#">首页</a>| <a href="#">课程</a>| <a href="#">问答</a>| <a href="#">手记</a> </div> </body> </html>
serahkanTetapkan Semula Kod
Bahagian sebelumnya bahagian seterusnya
Senarai Tutorial
dapatkan bantuan
  • Cadangan kursus
  • Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~

Pelajar yang telah menonton kursus ini juga sedang belajar

Tutorial video perdana dunia ThinkPHP 5.1 terkini (60 hari untuk menjadi kursus latihan dalam talian pakar PHP)  492414 permainan