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

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

CSS样式表: 做网页中需要掌握的八个CSS布局技巧; CSS属性 - white-space 空白属性使用说明; 用CSS构建iframe效果代码; 用div+css解决出现水平滚动条问题; ul在Firefox和IE下的不同表现的解决方法; 用css实现隐藏文本框; css实现行间距效果; 研究了一下div+css的高度自适应问题; 做网页字体大小参考网页中同字号字体的不同单位对比列表; css 之 background-position-x; css实现兼容各个浏览器的技巧的代码; css中的行间距的代码; HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解; scrollWidth,clientWidth与offsetWidth的区别; 大家需要掌握的 html下SPAN和DIV的区别; 布局用CSS+DIV的优点总结; 纯CSS生成抗锯齿圆角的代码; IE6，IE7和firefox对DIV的支持区别; DIV+CSS布局的网站对网站SEO的影响分析; 非常不错的关于IE与FireFox的js和css几处不同点[转自星火燎原]

No. « ‹ 39 40 41 42 › »

技术文章搜索

关键字

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

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

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