相关文章
太创意了!让人称绝的404错误页面 中...
网站设计HTML语言剖析（一）Html简介
网站制作实现页面图片阴影特效
北京网站建设Dreamweaver MX建网页图片超链接
网站制作滑动菜单的制作
北京网页设计Dreamweaver 4 简明教程(七、网页的排版3)
网页设计抗日Flash集之：大中华ⷱ937
北京网站设计FLASH中响应键盘事件的四种方法
北京网站设计FLASH8新功能体验：第二章滤镜 7.调整颜色
网页设计Dreamweaver基础视频教程4 设置导航栏上
品牌理念
北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!
友好连接
文章搜索
你的位置：首页 >> 网站制作 >> 北京网页设计北京网页设计CSS+DIV设计实例：超酷的竖排导航栏
北京网页设计北京网页设计CSS+DIV设计实例：超酷的竖排导航栏
作者： 北京网站建设 日期：2008-03-27 06:03:34 来源： http://www.qitongnet.com
| 以下是引用片段： 网站设计网页设计 <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> 北京网站设计 网站制作 北京网站建设 www.qitongnet.com </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; 北京网站制作 } |
北京网站制作
网页设计
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.