ul+li dan css untuk mencipta kod menu gaya Korea_Pertukaran pengalaman

PHP中文网
Lepaskan: 2016-05-16 12:06:50
asal
1916 orang telah melayarinya

Ul+li dan css untuk mencipta kod menu gaya Korea_Pertukaran pengalaman

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>www.jb51.net</title> 
<style type="text/css"> 
<!--  
* {font-size:13px;font-family:Arial;} 
#nav li {list-style:none; width:200px; margin-top:5px;padding:4px 6px;} 
#nav li a {text-decoration:none; color:#666;} 
#nav li a:hover {color:#000;} 
.aa {border-top:4px solid #7BC110; background:#be6;} 
.bb {border-top:4px solid #ff9900; background:#fc3;} 
.cc {border-top:4px solid #ff66ff; background:#fcf;} 
--> 
</style> 
</head> 
<body> 
<ul id="nav"> 
<li class="aa"><a href="/">CSS Templates Free Download </a></li> 
<li class="bb"><a href="/">CSS WebSites Showcase </a></li> 
<li class="cc"><a href="/">CSS Web Design Article </a></li> 
</ul> 
</body> 
</html>
Salin selepas log masuk


Gaya reka bentuk laman web Korea adalah tersendiri dan berwarna-warni, dan kini terdapat lebih banyak lagi lebih ramai yang meniru gaya ini. | reben tajuk. Kami biasanya menggunakan perisian imej untuk mencipta kesan sedemikian, tetapi saiz imej adalah besar dan muat turun adalah perlahan. Kami boleh menggunakan CSS sepenuhnya untuk mencipta gaya sedemikian, kerana menggunakan CSS hanya mentakrifkan gaya tanpa menggunakan imej, dan kelajuan muat turun akan dipercepatkan.

Mula-mula kita tentukan item senarai, lebar, jidar dan padding. Kemudian tetapkan gaya teks pautan. Kami menggunakan kelas aa, bb dan cc untuk mentakrifkan warna item senarai yang berbeza Dalam definisi ketiga-tiga kelas ini, kami mentakrifkan sempadan atas menjadi 4px. Iaitu, reben yang paling biasa dalam gaya Korea.

Di atas adalah kandungan ul+li dan css untuk membuat pertukaran kod_pengalaman menu gaya Korea Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn)!

Label berkaitan:
css
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan