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

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章
倉庫:如何復興隊友
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
1 週前
By 尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間?
3 週前
By DDD
Hello Kitty Island冒險:如何獲得巨型種子
3 週前
By 尊渡假赌尊渡假赌尊渡假赌
公眾號網頁更新緩存難題:如何避免版本更新後舊緩存影響用戶體驗?
3 週前
By 王林

熱門文章標籤

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)