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

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

CSS样式表: 网页布局教程:掌握CSS网页布局属性; WEB标准的CSS网页布局技巧5则; 你怎么书写CSS代码？; CSS教程：表单元素不继承body的字体属性; 调整CSS的方式给滚动条换色; CSS网页布局中表格制作实例; 网页设计学习教程:CSS盒模型; 网页制作学习教程:CSS Position; 网页九宫格布局:应用透明的外圆角; CSS网页布局学习的参考诀窍; 把网页按钮伪装成超链接; CSS教程:检验CSS书写是否标准合理; 你的网页最好通过HTML校验和CSS校验; 网页制作教程:CSS的好处; 网页制作心得:分离之后怎么做？; CSS教程:数字和字母将容器撑大问题解决; CSS Sprites优化网页代码的方法; CSS实例:精简代码的兼容各浏览器的滑动门; CSS网页制作技巧:提高CSS可阅读性; 英文教程:CSS的Float

No. « ‹ 60 61 62 63 › »

技术文章搜索

关键字

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

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

收藏到网摘: 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/62/" 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/62/" 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制作的背景动态变化的网页导航