您现在的位置： 圆点视线 >> 教程 >> 网页设计 >> 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分
    　评论内容： ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点，与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门