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

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

CSS样式表: CSS入门 XHTML文档结构树; IE6下 vertical-align:middle 和 height 引发的边框消失; 详解CSS（层叠样式表）渐进增强; css vertical-align属性详细图解分析; CSS 垂直居中的5种实现方法; css 条件注释使用指南; CSS 样式表书写风格分析; CSS教程:条件注释的格式以及作用; 探讨：网页外部引用CSS的两种方式; 简化的CSS Reset:15套CSS重设实例; CSS技巧：IE6用import导入CSS的问题; 编写适合所有项目的通用的reset.css; 英文css教程：Introduction CSS; CSS学习之CSS网页制作的10个技巧; 条件CSS的高级用法; 纯语义化XHTML CSS设计表单方法; CSS 浏览器兼容问题整理大全(比较全); import link的具体区别; 菜单 stepdown 呈递下沉的解决方法; CSS3 box-sizing属性

No. « ‹ 75 76 77 78 › »

技术文章搜索

关键字

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

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

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