网页设计-[CSS+DIV设计实例:超酷的竖排导航栏 ]
2008-11-17 17:51
633 查看
HTML:
以下为引用的内容:
CSS:
以下为引用的内容:
以下为引用的内容:
<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> <li><a href="#">Subitem two</a></li> <li><a href="#">Subitem three</a></li> <li><a href="#">Subitem four</a></li> </ul> </li> <li><a href="#">Item two</a></li> <li><a href="#">Item three</a></li> <li><a href="#">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; }
相关文章推荐
- CSS+DIV设计实例:超酷的竖排导航栏
- CSSHTML实例:超酷的竖排导航栏
- 网页设计-[CSS+DIV设计实例:纯CSS制作下拉导航菜单]
- CSS网页实例 利用box-sizing实现div仿框架结构实现代码
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局教程
- 收藏网站制作常用经典css.div.布局.设计实例打包下载(下方有其他链接)
- 十天学会web标准(DIV+CSS)系列(十)div+css网页标准布局实例教程
- 【网上收藏】Web 2.0网页设计DIV+CSS必备资源
- 十天学会DIV+CSS第十天 div+css网页标准布局实例教程
- [网页设计] 27款后台管理页面设计 DIV+CSS+JS
- DIV+CSS网页另类上下布局的实例代码
- 网页设计基础:Div+CSS布局
- DIV+CSS网页设计布局应用详解视频教程
- 用DIV+CSS来设计网页的好处
- 网页设计与开发:HTML、CSS、JavaScript实例教程 (郑娅峰) pdf扫描版
- 网页设计-----DIV+CSS规则
- <div+css页面布局课堂笔记>9---页面布局网站首页设计实例__1
- web技术_css+div完成网页设计
- 网页设计【DIV+CSS常用的网页布局代码】
- DIV+CSS进行网页设计