CSS制作的背景动态变化的网页导航- CSS样式表

当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > CSS制作的背景动态变化的网页导航

CSS样式表: css分页样式代码; 用css filter做鼠标滑过图片效果; 有关于IE8 Beta 1两个提醒; css Hspace 和vspace的图片控制实例; firefox background-image垂直平铺问题的解决方法; 发一个css比较清爽的写法; htm页面中<a name>加name和id的冲突附解决方法; javascript 获取特定的 CSS属性值; CSS教程之CSS的应用; html页面head区域的编码书写规范; html滚动条样式; 不用图片作背景CSS做的小灯笼效果_练习用; 网页绿色系配色应用实例图文; 网页中英文混排行高不等问题的解决方法; CSS Hack 汇总速查手册浏览器兼容必会; css文本框与按钮美化效果代码; 网页设计中的 serif 和 sans-serif字体应用; 采用XHTML和CSS设计可重用可换肤的WEB站点的方法; CSS 浏览器的等宽空格问题解决; 欲练CSS ，必先解决IE的一些细节分析

No. « ‹ 89 90 91 92 › »

技术文章搜索

关键字

CSS样式表中的 CSS制作的背景动态变化的网页导航

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-09 浏览: 118 ::

收藏到网摘: n/a

8个设计规范的表格Table CSS样式应用网页选项卡TAB设计原则和应用案例教程

自己写的个导航,感觉还不错...惟一的不足就是hack比较多,如果有简洁的方式实现,请留言告诉我...呵呵...

样式部分:

#headerMenu {
    width:560px;
    margin:30px auto;
}
.menu {
    font-size:14px;
    line-height:18px;
    *line-height:32px;
}
.menu li {
    display:inline;
}
.menu a:link,
.menu a:visited{
    display:-moz-inline-stack;/*FF下有效*/
    *display:inline;/*此行及下行为IE定义*/
    zoom:1;
    width:80px;
    padding:8px 0px 6px 0px;
    *padding:0;
    float:left;
    color:#014A99;
    text-align:center;
    text-decoration:none;
    background:url(/files/081222/1_164717.gif);
}
.menu a:hover{
    color:#FFF;
    font-weight:bold;
    background:url(/upload/tech/20091009/20091009151711_6c524f9d5d7027454a783c841250ba71.gif);
}
.home{
    background:url(/upload/tech/20091009/20091009151711_6c524f9d5d7027454a783c841250ba71.gif)!important;
    color:#FFF !important;
    font-weight:bold;
}

运行查看效果:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="Author" content="软晨学习网" /> <meat name="Author BlogURL" content="http://www.ruanchen.com" /> <title>li等宽水平导航</title> <style type="text/css"> <!-- *{ margin:0; padding:0; } body{ background:#FFF; font:12px normal Arial, Helvetica, sans-serif #444; line-height:18px; } #headerMenu { width:560px; margin:30px auto; } .menu { font-size:14px; line-height:18px; *line-height:32px; } .menu li { display:inline; } .menu a:link, .menu a:visited{ display:-moz-inline-stack;/*FF下有效*/ *display:inline;/*此行及下行为IE定义*/ zoom:1; width:80px; padding:8px 0px 6px 0px; *padding:0; float:left; color:#014A99; text-align:center; text-decoration:none; background:url(http://www.ruanchen.com/"runCode(this.offsetParent.getElementsByTagName('textarea')[0])" type="button" value="运行代码" /> [Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]</span></p> <div style="text-align:left; margin-top:0px; clear:both;"> </div> <div id="tpage"> <span style="float:left;width:45%" class="text-truncate"> <img align="absmiddle" src="https://static.ruanchen.com/img/pre_art.gif" /> <a href="/tech/view/doc/35639/p/91/" title="8个设计规范的表格Table CSS样式应用">8个设计规范的表格Table CSS样式应用</a></span> <span style="float:right;width:45%;text-align:right" class="text-truncate"> <a href="/tech/view/doc/35641/p/91/" title="网页选项卡TAB设计原则和应用案例教程">网页选项卡TAB设计原则和应用案例教程</a> <img align="absmiddle" src="https://static.ruanchen.com/img/next_art.gif"/></span> </div> </div> <div style="clear:both;"> <script language="javascript"> var infoid = '35640'; var classid = 'tech'; </script> <script language="JavaScript" src="https://static.ruanchen.com/js/mood.js"></script> </div> <div id="cmt"> <h3> <img src="https://static.ruanchen.com/img/cmt.gif" align="absmiddle" /> 评论 (0) <small class="pagenav-listbar"> <a style="padding:5px;" href="javascript:tech_cmt('35640')">All</a> </small> </h3> <div id="cmt-list"></div> <form method="post" action="#cmt" onsubmit="alert('您还没有登陆，登陆后才能进行此操作。');return false;"> <textarea id="content" name="content" style="width:100%; height:100px;">

登陆还没注册？

CSS样式表 中的 CSS制作的背景动态变化的网页导航

CSS样式表中的 CSS制作的背景动态变化的网页导航