CSS無序列表創(chuàng)建的標(biāo)準(zhǔn)菜單效果代碼
發(fā)布時(shí)間：2015-10-13 10:27:27 作者：佚名 
我要評論
我要評論這篇文章主要為大家介紹了CSS無序列表創(chuàng)建的標(biāo)準(zhǔn)菜單效果代碼,通過控制css屬性實(shí)現(xiàn)列表菜單切換的效果,非常簡單實(shí)用,需要的朋友可以參考下
本文實(shí)例講述了CSS無序列表創(chuàng)建的標(biāo)準(zhǔn)菜單效果代碼。分享給大家供大家參考。具體如下：
這是一款用LI無序列表創(chuàng)建的標(biāo)準(zhǔn)CSS菜單，這是國外一個(gè)網(wǎng)站的CSS制作教程，這里重新整理了一下，去除了廣告代碼，兼容性不錯(cuò)，在IE6/IE7/IE8、火狐下都表現(xiàn)很好，研究CSS的朋友請注意一些CSS的用法，很新穎。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.jb51.net/js/2015/css-list-menu-style-codes/
具體代碼如下：
復(fù)制代碼
代碼如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS菜單</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
color:#222;
background:#fff;
}
body {
padding:10px;
font:76%/150% Verdana, Arial, sans-serif;
}
#nav {
margin:0;
padding:0;
background:#808259;
width:100%;
float:left;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
</style>
</head>
<body id="home">
<ul id="nav">
<li id="nav-home"><a href="#">我的博客</a></li>
<li id="nav-about"><a href="#">日志排行</a></li>
<li id="nav-archive"><a href="#">日志存檔</a></li>
<li id="nav-lab"><a href="#">我的書庫</a></li>
<li id="nav-reviews"><a href="#">活動(dòng)圖集</a></li>
<li id="nav-contact"><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</body>
</html>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS菜單</title>
<style type="text/css">
html,body {
margin:0;
padding:0;
color:#222;
background:#fff;
}
body {
padding:10px;
font:76%/150% Verdana, Arial, sans-serif;
}
#nav {
margin:0;
padding:0;
background:#808259;
width:100%;
float:left;
border:1px solid #42432d;
border-width:1px 0;
}
#nav li {
display:inline;
padding:0;
margin:0;
}
#nav a:link,#nav a:visited {
color:#000;
background:#b2b580;
padding:20px 40px 4px 10px;
float:left;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
text-shadow: 2px 2px 2px #555;
}
#nav a:hover {
color:#fff;
background:#727454;
}
#nav li:first-child a {
border-left:1px solid #42432d;
}
#home #nav-home a,
#about #nav-about a,
#archive #nav-archive a,
#lab #nav-lab a,
#reviews #nav-reviews a,
#contact #nav-contact a {
background:#e35a00;
color:#fff;
text-shadow:none;
}
#home #nav-home a:hover,
#about #nav-about a:hover,
#archive #nav-archive a:hover,
#lab #nav-lab a:hover,
#reviews #nav-reviews a:hover,
#contact #nav-contact a:hover {
background:#e35a00;
}
#nav a:active {
background:#e35a00;
color:#fff;
}
</style>
</head>
<body id="home">
<ul id="nav">
<li id="nav-home"><a href="#">我的博客</a></li>
<li id="nav-about"><a href="#">日志排行</a></li>
<li id="nav-archive"><a href="#">日志存檔</a></li>
<li id="nav-lab"><a href="#">我的書庫</a></li>
<li id="nav-reviews"><a href="#">活動(dòng)圖集</a></li>
<li id="nav-contact"><a href="#">聯(lián)系我們</a></li>
</ul>
</div>
</body>
</html>
希望本文所述對大家的CSS網(wǎng)頁設(shè)計(jì)有所幫助。
相關(guān)文章
CSS實(shí)現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)帶有小圖片的LI圖標(biāo)列表菜單,可實(shí)現(xiàn)css圖標(biāo)的正常顯示及滑過、點(diǎn)擊呈現(xiàn)不同顏色的功能,涉及css針對visited、hover及active等使用技巧,需要2015-09-15- 這是一個(gè)很簡單的教程,主要教你怎么用list的邊框樣式和背景圖像來創(chuàng)建一個(gè)菜單出來.技巧在于使用list的相對定位,來轉(zhuǎn)移邊框的位置.2009-11-30
UL、LI 無序列表實(shí)現(xiàn)純CSS網(wǎng)站導(dǎo)航菜單
三行的純CSS網(wǎng)站導(dǎo)航欄菜單，改改風(fēng)格，讓大家感到新鮮一點(diǎn)，其它主要還是使用了Li列表，整體布局簡潔，美觀大方，適合大部分網(wǎng)站使用，顏色和菜單空隙可隨意調(diào)節(jié)，希望大2009-11-08- 網(wǎng)頁制作Webjx文章簡介：不知道是標(biāo)準(zhǔn)害了大家還是大家害了標(biāo)準(zhǔn)，繼class和div被濫用后，ul列表也有被不正確使用的趨勢。 今天交流會上，分享前端的開發(fā)經(jīng)2009-04-02
CSS實(shí)現(xiàn)帶倒三角標(biāo)記的WEB標(biāo)準(zhǔn)菜單效果代碼
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)帶倒三角標(biāo)記的WEB標(biāo)準(zhǔn)菜單效果代碼,通過純css實(shí)現(xiàn)鼠標(biāo)滑過呈現(xiàn)倒三角標(biāo)記的顯示效果,非常簡單實(shí)用,需要的朋友可以參考下2015-10-12
CSS3實(shí)現(xiàn)液態(tài)膠合效果環(huán)形菜單特效源碼
這是一款基于CSS3實(shí)現(xiàn)的液態(tài)膠合效果環(huán)形菜單特效源碼，是一款基于HTML5+CSS3實(shí)現(xiàn)的非常有創(chuàng)意的液態(tài)膠合效果環(huán)形菜單按鈕效果。點(diǎn)擊按鈕可彈出環(huán)形菜單，鼠標(biāo)滑過菜單項(xiàng)可2015-10-08- 這篇文章主要為大家介紹了CSS使用圖片美化的漂亮菜單效果,涉及css背景圖片動(dòng)態(tài)設(shè)置的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-28
CSS實(shí)現(xiàn)自動(dòng)變?yōu)榇髮懙淖赃m應(yīng)漂亮菜單效果
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)自動(dòng)變?yōu)榇髮懙淖赃m應(yīng)漂亮菜單效果,涉及css中text-transform屬性設(shè)置uppercase實(shí)現(xiàn)大寫轉(zhuǎn)換的相關(guān)技巧,需要的朋友可以參考下2015-09-28CSS實(shí)現(xiàn)菜單背景自適應(yīng)寬度的方法
這篇文章主要為大家介紹了CSS實(shí)現(xiàn)菜單背景自適應(yīng)寬度的方法,涉及基于css屬性控制背景圖片自適應(yīng)寬度的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-28純CSS+XHTML實(shí)現(xiàn)的二級導(dǎo)航菜單效果
這篇文章主要為大家介紹了純CSS+XHTML實(shí)現(xiàn)的二級導(dǎo)航菜單效果,通過簡單的鼠標(biāo)事件操作頁面元素樣式變換實(shí)現(xiàn)二級導(dǎo)航菜單的功能,非常簡單實(shí)用,需要的朋友可以參考下2015-09-25
