DIV CSS列形導(dǎo)航一例

2020-03-24 17:47:07

字體：大中小

供稿：網(wǎng)友

先看看XHTML代碼： div id="navcontainer"
ul id="navlist"
li id="active" a id="html' target='_blank'>current" Item one /a
ul id="subnavlist"
li id="subactive" a id="subcurrent" Subitem one /a /li
li a Subitem two /a /li
li a Subitem three /a /li
li a Subitem four /a /li
/ul
/li
li a Item two /a /li
li a Item three /a /li
li a Item four /a /li
/ul
/div 看看CSS是如何定久相關(guān)元素的：#navcontainer { margin-left: 30px; } #navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
} #navcontainer li { margin: 0; } #navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
} #navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
} #navcontainer ul ul li { margin: 0; } #navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
} #navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
} 看了這么多代碼，現(xiàn)在讓我們看看運(yùn)行效果吧！ !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 dw8.cn /title
style type="text/css" #navcontainer { margin-left: 30px; } #navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
} #navcontainer li { margin: 0; } #navcontainer a
{
display: block;
padding: 5px 10px;
width: 140px;
color: #000;
background-color: #ADC1AD;
text-decoration: none;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
border-bottom: 1px solid #333;
border-right: 1px solid #333;
font-weight: bold;
font-size: .8em;
background-image: url(images/vertical06.jpg);
background-repeat: no-repeat;
background-position: 0 0;
} #navcontainer a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
border-top: 1px solid #333;
border-left: 1px solid #333;
border-bottom: 1px solid #fff;
border-right: 1px solid #fff;
background-image: url(images/vertical06a.jpg);
background-repeat: no-repeat;
background-position: 0 0;
} #navcontainer ul ul li { margin: 0; } #navcontainer ul ul a
{
display: block;
padding: 5px 5px 5px 30px;
width: 125px;
color: #000;
background-color: #C5D8C5;
text-decoration: none;
font-weight: normal;
} #navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}
/style
/head body
div id="navcontainer"
ul id="navlist"
li id="active" a id="current" Item one /a
ul id="subnavlist"
li id="subactive" a id="subcurrent" Subitem one /a /li
li a Subitem two /a /li
li a Subitem three /a /li
li a Subitem four /a /li
/ul
/li
li a Item two /a /li
li a Item three /a /li
li a Item four /a /li
/ul
/div
/body
/html 本文作者:html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：CSS的偽類選擇器

下一篇：CSS技術(shù)在網(wǎng)頁設(shè)計(jì)中的運(yùn)用