DIV CSS列形导航一例

2020-03-24 17:47:07

字体：大中小

来源：转载

供稿：网友

先看看XHTML代码： div id="navcontainer"
ul id="navlist"
li id="active" a href="http://www.dw8.cn/" id="html' target='_blank'>current" Item one /a
ul id="subnavlist"
li id="subactive" a href="http://www.dw8.cn/" id="subcurrent" Subitem one /a /li
li a href="http://www.dw8.cn/" Subitem two /a /li
li a href="http://www.dw8.cn/" Subitem three /a /li
li a href="http://www.dw8.cn/" Subitem four /a /li
/ul
/li
li a href="http://www.dw8.cn/" Item two /a /li
li a href="http://www.dw8.cn/" Item three /a /li
li a href="http://www.dw8.cn/" Item four /a /li
/ul
/div 看看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;
} 看了这么多代码，现在让我们看看运行效果吧！ !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 href="http://www.dw8.cn/" id="current" Item one /a
ul id="subnavlist"
li id="subactive" a href="http://www.dw8.cn/" id="subcurrent" Subitem one /a /li
li a href="http://www.dw8.cn/" Subitem two /a /li
li a href="http://www.dw8.cn/" Subitem three /a /li
li a href="http://www.dw8.cn/" Subitem four /a /li
/ul
/li
li a href="http://www.dw8.cn/" Item two /a /li
li a href="http://www.dw8.cn/" Item three /a /li
li a href="http://www.dw8.cn/" Item four /a /li
/ul
/div
/body
/html 本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：CSS的伪类选择器

下一篇：CSS技术在网页设计中的运用