DIV CSS列形导航一例

____默然不语丶

____默然不语丶

2016-02-19 13:37

下面图老师小编要跟大家分享DIV CSS列形导航一例,简单的过程中其实暗藏玄机,还是要细心学习,喜欢还请记得收藏哦!

先看看XHTML代码:

div
ul
lia href="http://www.dw8.cn/"Item one/a 
ul
lia href="http://www.dw8.cn/"Subitem one/a/li
lia href="http://www.dw8.cn/"Subitem two/a/li
lia href="http://www.dw8.cn/"Subitem three/a/li
lia href="http://www.dw8.cn/"Subitem four/a/li
/ul
/li
lia href="http://www.dw8.cn/"Item two/a/li
lia href="http://www.dw8.cn/"Item three/a/li
lia 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;
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

#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;
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

#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" /
titledw8.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;
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

#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;
}

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

#navcontainer ul ul a:hover
{
color: #000;
background-color: #889E88;
text-decoration: none;
}
/style
/head

body
div
ul
lia href="http://www.dw8.cn/"Item one/a 
ul
lia href="http://www.dw8.cn/"Subitem one/a/li
lia href="http://www.dw8.cn/"Subitem two/a/li
lia href="http://www.dw8.cn/"Subitem three/a/li
lia href="http://www.dw8.cn/"Subitem four/a/li
/ul
/li
lia href="http://www.dw8.cn/"Item two/a/li
lia href="http://www.dw8.cn/"Item three/a/li
lia href="http://www.dw8.cn/"Item four/a/li
/ul
/div
/body
/html

展开更多 50%)
分享

猜你喜欢

DIV CSS列形导航一例

Web开发
DIV CSS列形导航一例

CSS form表单布局经典一例

Web开发
CSS form表单布局经典一例

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

实现FTP访问一例

Linux Linux命令 Linux安装 Linux编程 Linux桌面 Linux软件 Linux内核 Linux管理
实现FTP访问一例

smtp邮件发送一例

PHP
smtp邮件发送一例

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CAD解题思路一例

autocad教程
CAD解题思路一例

照片阴影处理一例

PS PS教程
照片阴影处理一例

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

J2ME编程实例---之数字键的测试

J2ME编程实例---之数字键的测试

J2ME学习笔记(4)—用MIDP API开发MIDlets

J2ME学习笔记(4)—用MIDP API开发MIDlets
下拉加载更多内容 ↓