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

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

CSS样式表: 关于CSS的一些基础应用; 纯CSS实现的无侵入的卡盘（幻灯片）; w3c标准自适应高度height100%不起作用的问题分析; CSS代码组合和嵌套; CSS常用属性缩写实例; CSS代码缩写实例以及CSS缩写原因总结; 网页字体大小的设计技巧; CSS3的新特性介绍; DOCTYPE和XHTML的相关认识; DIV CSS建立的符合web标准网页的好处; CSS语法缩写规则; FireFox浏览器和IE浏览器下CSS兼容问题; CSS代码属性分组的写法例子; 解决全部网页木马的技巧; css教程:DIV垂直居中的办法; css常用布局多行多列; 不同浏览器的CSS Hack写法小结; CSS 控制字符宽度省略号效果兼容浏览器; 纯CSS实现的三级下拉菜单实现代码; 快速定位页面中复杂 CSS BUG

No. « ‹ 11 12 13 14 › »

技术文章搜索

关键字

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

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

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