ul li及css製作韓國風格菜單代碼_經驗交流-css教學-PHP中文網

首頁

web前端

css教學

ul li及css製作韓國風格菜單代碼_經驗交流

May 16, 2016 pm 12:06 PM

css

ul li及css製作韓國風格選單代碼_經驗交流

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

登入後複製

韓國網站的設計風格特徵鮮明，色彩明快，現在越來越多的人正在模仿這種風格。

韓國風格的網站設計想法之所以受到大家的喜歡，因為其色彩變化豐富，韓國風格的網站有一個最明顯的特點就是對於表格或是標題欄常會加上橫或豎的一條色帶。我們平常常過圖象圖片軟體來製作這樣的效果，圖片體積大，下載較慢。我們完全可以用css來做這樣的風格，因為用css只是對樣式定義，不需要套用圖片，下載速度會大大加快。

首先我們定義了列表項，寬度外邊距及內邊距。再設定連結文字的樣式。我們使用類別aa、bb、cc來定義不同清單項目的色彩，在這三個類別的定義中，我們定義了上邊框為4px。也就是韓國風格中最常見的色帶。

以上就是ul li及css製作韓國風格選單代碼_經驗交流的內容，更多相關內容請關注php中文網（www.php.cn）！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn