CSS+DIV设计实例:超酷的竖排导航栏

柳絮滋润着思绪

柳絮滋润着思绪

2016-02-19 17:26

下面图老师小编跟大家分享CSS+DIV设计实例:超酷的竖排导航栏,一起来学习下过程究竟如何进行吧!喜欢就赶紧收藏起来哦~

HTML:
以下是引用片段:
div id="navcontainer"
ul id="navlist"
li id="active"a href="#" id="current"Item one/a 
ul id="subnavlist"
li id="subactive"a href="#" id="subcurrent"Subitem one/a/li
lia href="#"Subitem two/a/li
lia href="#"Subitem three/a/li
lia href="#"Subitem four/a/li
/ul

/li
lia href="#"Item two/a/li
lia href="#"Item three/a/li
lia href="#"Item four/a/li
/ul
/div

CSS:
以下是引用片段:
#navcontainer { margin-left: 30px; }

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

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-family: verdana, arial, Helvetica, sans-serif;
}

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

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

ABOUT THE CODE
Some lists within the Listamatic site had to be modified so that they could work on Listamatic's simple list model. When in doubt, use the external resource first, or at least compare both models to see which one suits your needs.

展开更多 50%)
分享

猜你喜欢

CSS+DIV设计实例:超酷的竖排导航栏

Web开发
CSS+DIV设计实例:超酷的竖排导航栏

CSS实例:超酷的网站导航按钮

Web开发
CSS实例:超酷的网站导航按钮

s8lol主宰符文怎么配

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

网页设计之css+div PK table+css

Web开发
网页设计之css+div PK table+css

CSS+DIV设计实例:不同色链接和其下划线

Web开发
CSS+DIV设计实例:不同色链接和其下划线

lol偷钱流符文搭配推荐

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

CSS+DIV制作页面圆角效果

Web开发
CSS+DIV制作页面圆角效果

CSS+DIV实现Yahoo搜索框的制作

Web开发
CSS+DIV实现Yahoo搜索框的制作

lolAD刺客新符文搭配推荐

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

网页设计应用:使用CSS截字

网页设计应用:使用CSS截字

如何学习Oracle?分清几个概念是关键

如何学习Oracle?分清几个概念是关键
下拉加载更多内容 ↓