masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu

pautan CSS

1 Empat status pautan CSS:

a:pautan - biasa, pautan tidak dilawati a:dilawati - pautan yang pengguna telah lawati a:hover - penuding tetikus berada di atas pautan a:aktif - saat pautan diklik

Mari kita tetapkan atribut warna bagi kelakuan yang sepadan ini: Masih sama seperti proses sebelumnya, kita mula-mula mencipta index.html, dan kemudian mencipta fail test.css, dipautkan ke html. Berikut ialah kandungan fail html: 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>css test</title>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="test.css">
</head>
<body > 
<a href="http://www.php.cn">php</a>
</body>
</html>

Berikut ialah kandungan fail CSS: 

a:link {color:#FF0000;}    /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;}   /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}  /* 正在被点击的链接 */

Mari kita lihat kesannya dahulu: Ini adalah warna yang tidak dilawati:

QQ截图20161208104329.png

Ini ialah warna pautan apabila tetikus digerakkan:

QQ截图20161208104336.png

Ini adalah warna pautan yang sedang diklik:

QQ截图20161208104343.png

Ini adalah warna selepas diklik:

QQ截图20161208104348.png

Apa yang perlu kita perhatikan di sini ialah tertib empat atribut ini harus ditetapkan: a:hover mesti terletak dalam After :link dan a:visited, a:active mesti terletak selepas a:hover

1.2 CSS Menetapkan warna latar belakang pautan

Ini semudah mengubah suai warna latar belakang atribut yang sepadan. Jika kita ingin bereksperimen, cuma gantikan atau tambahkan fail CSS tadi: 

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Anda boleh mencuba, saya tidak akan mengambil tangkapan skrin satu persatu di sini

1.3 Ubah suai pautan yang digariskan

Tidak setiap masa kita memerlukan garis bawah di bawah pautan, kadangkala ia menjejaskan penampilan. Jadi di sini kita perlu menambah atribut hiasan teks pada atribut pautan, dan menukar rujukan pemindahan kepada kosong Selepas pengubahsuaian, hasil berikut ialah:

QQ截图20161208104515.png

.
Meneruskan pembelajaran
||
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>css test</title> <script src="app.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> </head> <body > <a href="http://www.php.cn">php</a> </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)  492854 permainan