本文實例講述了基于CSS3實現的黑色個性導航菜單效果。分享給大家供大家參考。具體如下：

黑色個性的CSS3導航菜單，豎直排列的菜單，基本原理與橫向的區別并不大，適合學習CSS。

運行效果截圖如下：

在線演示地址如下：

具體代碼如下：

復制代碼代碼如下:

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

黑色菜單

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

body { background: #1d1d1d; color: #fff; background-image:url("images/bg.png"); background-repeat:repeat-x; }

h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }

h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }

h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif; text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }

h2 a:hover { color: #90bcd0; }

h3 { font-style:italic; border-left:10px solid #eee; padding:10px 20px; margin:30px 0; color:#eee; }

h3 code { display:block; }

/* WRAPPER */

#wrapper { width:800px; margin:40px auto; }

/* LIST #1 */

#list1 { }

#list1 ul { list-style:none; text-align:center; border-top:1px solid #eee; border-bottom:1px solid #eee; padding:10px 0; }

#list1 ul li { display:inline; text-transform:uppercase; padding:0 10px; letter-spacing:10px; }

#list1 ul li a { text-decoration:none; color:#eee; }

#list1 ul li a:hover { text-decoration:underline; }

/* LIST #2 */

#list2 { width:320px; }

#list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#bfe1f1; }

#list2 ol li { }

#list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:13px; color:#eee; border-left: 1px solid #999; }

#list2 ol li p em { display:block; }

/* LIST #3 */

#list3 { }

#list3 ul { list-style-image: url("images/arrow.png"); color:#eee; font-size:18px; }

#list3 ul li { line-height:30px; }

/* LIST #4 */

#list4 { width:320px; font-family:Georgia, Times, serif; font-size:15px; }

#list4 ul { list-style: none; }

#list4 ul li { }

#list4 ul li a { display:block; text-decoration:none; color:#000000; background-color:#FFFFFF; line-height:30px;

border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#CCCCCC; padding-left:10px; cursor:pointer; }

#list4 ul li a:hover { color:#FFFFFF; background-image:url(images/hover.png); background-repeat:repeat-x; }

#list4 ul li a strong { margin-right:10px; }

/* LIST #5 */

#list5 { color:#eee; }

#list5 ol { font-size:18px; }

#list5 ol li { }

#list5 ol li ol { list-style-image: url("images/nested.png"); padding:5px 0 5px 18px; font-size:15px; }

#list5 ol li ol li { color:#bfe1f1; height:15px; margin-left:10px; }

/* LIST #6 */

#list6 { font-family: 'Trebuchet MS', 'Lucida Grande', Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif; }

#list6 ol { list-style-type: upper-roman; color:#eee; font-size:14px; list-style-position: inside; }

#list6 ol li { }

/* LIST #7 */

#list7 { }

#list7 ul { color:#eee; font-size:18px; font-family:Georgia, Times, serif; }

#list7 ul li { display: inline; }

#list7 ul li:after { content: ", "; }

#list7 ul li.last:after { content: ". "; }

/* LIST #8 */

#list8 { }

#list8 ul { list-style:none; }

#list8 ul li { font-family:Georgia,serif,Times; font-size:18px; }

#list8 ul li a { display:block; width:300px; height:28px; background-color:#333; border-left:5px solid #222; border-right:5px solid #222; padding-left:10px;

text-decoration:none; color:#bfe1f1; }

#list8 ul li a:hover { -moz-transform:rotate(-5deg); -moz-box-shadow:10px 10px 20px #000000;

-webkit-transform:rotate(-5deg); -webkit-box-shadow:10px 10px 20px #000000;

transform:rotate(-5deg); box-shadow:10px 10px 20px #000000; }

Styling your listsusing only CSS

腳本之家

• Home
• Blog
• About
• Contact

希望本文所述對大家CSS3網頁設計有所幫助。

總結

以上是生活随笔為你收集整理的导航条css代黑色背景代码,基于CSS3实现的黑色个性导航菜单效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。