您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> DIV+CSS专栏 >> 文章正文
教你DIV+CSS制作另一导航条效果           ★★★
教你DIV+CSS制作另一导航条效果
作者:Arting36…  文章来源:Arting365.com  点击数:  更新时间:2007-8-14 10:54:43 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:
程序代码
友情提示:全选代码复制运行,您也可以先修改部分代码再运行查看效果 。

<style>
#nav{background:#000; font-size:12px; float:left; margin-left:50px; width:250px; padding:50px;}
#nav div{margin:8px;}
#nav span{display:none; display:block;}
#nav a{color:#666;text-decoration:none; display:block;}
#nav a:hover{color:#FFFF00; position:relative;}
#nav a:hover span{display:block;left:-10px;position:absolute;color:#FFff00;border-top: 12px solid #ffff00;border-left:4px solid #ffff00;line-height:0px;}
</style>
 CSS部分:
<style>
*{
 margin: 0;
 padding: 0;
 }
#nav{
 width: 250px;
 font-size: 12px;
 background: #f60;
 }
#nav ul{
 display: block;
 list-style-type: none;
 }
#nav li{
 display: block;
 }
#nav li a{
 padding: 0 0 0 10px;
 width: 200px;
 display: block;
 color: #666;
 text-decoration: none;
 }
#nav li a:link,#nav li a:visited{
 color: #666;
 }
#nav li a:hover{
 padding: 0 0 0 8px;
 border-left: 2px solid #FF0000;
 color: #cccc00;
 }
</style>
结构部分:
<div id="nav">
 <ul>
 <li><a href="
http://www.admin5.com">网站首页</a></li>
  <li><a href="
http://www.admin5.com">站长资讯</a></li>
  <li><a href="
http://www.admin5.com">网页设计</a></li>
  <li><a href="
http://www.admin5.com">网站欣赏</a></li> 
  <li><a href="
http://www.admin5.com">站长学习乐园</a></li>
  <li><a href="
http://www.admin5.com">admin5欢迎您</a></li>
 </ul>
</div>

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:Rainsion    责任编辑:Rainsion  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    经验之谈!解读Div+CSS网页制作误区
    div+css实现圆角边框
    基于XHTML标准DIV+CSS布局对SEO的影响
    Div+CSS网站设计的优点
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门