文章详情

Php文档 Php问答 行业资讯 Php论坛 Php手册 Php博客
  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
关闭搜索
php爱好者> php文档>css导航

css导航

时间：2008-05-15  来源：jiajiaquanzxc

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
<!--
* {
    margin: 0; padding:0
}
body {
    margin-top: 10px;
    margin-right: auto;
    margin-bottom: 10px;
    margin-left: auto;
    text-align: center;
    
    width: auto;
    background-color: #666666;
    font-size: 12px;
    color: #000000;
}
#container {
    text-align: left;
    width: 760px;
    
    background-color: #FFFFFF;
    padding: 20px;
}
#container #title {
    
}
#container #title li {
    float: left;
    list-style-type: none;
    
    line-
    text-align: center;
    margin-right: 1px;
}
#container #title ul {
    background-color: #FFFFFF;
    
}
#container #title a {
    text-decoration: none;
    color: #000000;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -29px;
}
#container #title a span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -29px;
    padding: 0 15px 0 15px;
}
#container #title #tag1 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -87px;
}
#container #title #tag1 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title #tag2 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left 0px;
}
#container #title #tag2 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right 0px;
    padding: 0 15px 0 15px;    
}
#container #title #tag3 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -58px;
}
#container #title #tag3 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -58px;
    padding: 0 15px 0 15px;    
}
#container #title #tag4 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -145px;
}
#container #title #tag4 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title #tag5 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -174px;
}
#container #title #tag5 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #title #tag6 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -203px;
}
#container #title #tag6 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -203px;
    padding: 0 15px 0 15px;
}
#container #title #tag7 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -232px;
}
#container #title #tag7 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -232px;
    padding: 0 15px 0 15px;
}
#container #title #tag8 a:hover {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -261px;
}
#container #title #tag8 a:hover span{
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -261px;
    padding: 0 15px 0 15px;
}
#container #title .selectli1 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -87px;
}
#container #title a .selectspan1 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -87px;
    padding: 0 15px 0 15px;
}
#container #title .selectli2 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left 0px;
}
#container #title a .selectspan2 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right 0px;
    padding: 0 15px 0 15px;
}
#container #title .selectli3 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -58px;
}
#container #title a .selectspan3 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -58px;
    padding: 0 15px 0 15px;
}
#container #title .selectli4 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -145px;
}
#container #title a .selectspan4 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -145px;
    padding: 0 15px 0 15px;
}
#container #title .selectli5 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -174px;
}
#container #title a .selectspan5 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -174px;
    padding: 0 15px 0 15px;
}
#container #title .selectli6 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -203px;
}
#container #title a .selectspan6 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -203px;
    padding: 0 15px 0 15px;
}
#container #title .selectli7 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -232px;
}
#container #title a .selectspan7 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -232px;
    padding: 0 15px 0 15px;
}
#container #title .selectli8 {
    text-decoration: none;
    color: #ffffff;
    display: block;
    width: auto;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif") no-repeat left -261px;
}
#container #title a .selectspan8 {
    display: block;
    background: url("http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif") no-repeat right -261px;
    padding: 0 15px 0 15px;
}
#container #content ul {margin: 10px;}
#container #content li {margin: 5px; }
#container #content li img {margin: 5px;display:block;}
#container #content {
    
    padding: 10px;
}
.content1 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #3A81C8;
    border-right-color: #3A81C8;
    border-bottom-color: #3A81C8;
    border-left-color: #3A81C8;
    background-color: #DFEBF7;
}
.content2 {
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #ff950b;
    border-right-color: #ff950b;
    border-bottom-color: #ff950b;
    border-left-color: #ff950b;
    background-color: #FFECD2;
}
.content3 {
    
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #FE74B8;
    border-right-color: #FE74B8;
    border-bottom-color: #FE74B8;
    border-left-color: #FE74B8;
    background-color: #FFECF5;
}
.content4 {
    
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #00988B;
    border-right-color: #00988B;
    border-bottom-color: #00988B;
    border-left-color: #00988B;
    background-color: #E8FFFD;
}
.content5 {
    
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #A8BC1F;
    border-right-color: #A8BC1F;
    border-bottom-color: #A8BC1F;
    border-left-color: #A8BC1F;
    background-color: #F7FAE2;
}
.content6 {
    
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #DD5A31;
    border-right-color: #DD5A31;
    border-bottom-color: #DD5A31;
    border-left-color: #DD5A31;
    background-color: #E7A996;
}
.content7 {
    
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #B65E5D;
    border-right-color: #B65E5D;
    border-bottom-color: #B65E5D;
    border-left-color: #B65E5D;
    background-color: #C29A99;
}
.content8 {
    
    padding: 10px;
    border-top-width: 3px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-color: #B67BD8;
    border-right-color: #B67BD8;
    border-bottom-color: #B67BD8;
    border-left-color: #B67BD8;
    background-color: #E8C4FF;
}
.hidecontent {display:none;}
-->
</style>

</head>
<body>
<table width="950" border="0" align="center">
  <tr>
    <td height="94" colspan="3"><div id="container">
  <div id="title">
    <ul>
      <li id="tag1"><a href="#" onclick="switchTag('tag1','content1');this.blur();" class="selectli1"><span class="selectspan1">首页</span></a></li>
      <li id="tag2"><a href="#" onclick="switchTag('tag2','content2');this.blur();"><span>产品介绍</span></a></li>
      <li id="tag3"><a href="#" onclick="switchTag('tag3','content3');this.blur();"><span>连锁加盟</span></a></li>
      <li id="tag4"><a href="#" onclick="switchTag('tag4','content4');this.blur();"><span>CCSOS常识</span></a></li>
      <li id="tag5"><a href="#" onclick="switchTag('tag5','content5');this.blur();"><span>培训资讯</span></a></li>
      <li id="tag6"><a href="#" onclick="switchTag('tag6','content6');this.blur();"><span>长沙旗舰馆</span></a></li>
      <li id="tag7"><a href="#" onclick="switchTag('tag7','content7');this.blur();"><span>提问区</span></a></li>
      <li id="tag8"><a href="#" onclick="switchTag('tag8','content8');this.blur();"><span>联系我们</span></a></li>
    </ul>
  </div>
<div id="content" class="content1">
  <div id="content1"><p>仿淘宝网站的导航效果。此方法有几个优点：</p>1、根据字数自适应项目长度</div>    
  <div id="content2" class="hidecontent">2、不同的项目使用不同的颜色来区分</div>
  <div id="content3" class="hidecontent">3、这回需要使用到js了，呵呵</div>
  <div id="content4" class="hidecontent">4、背景图片只需要两个图片文件就足够，减少服务器负担</div>
  <div id="content5" class="hidecontent">5、这是使用到的两个图片：
         <table width="58%" border="1" cellspacing="2" cellpadding="0">
           <tr>
             <td width="70%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_left_bk2.gif" width="250" height="290" /></td>
             <td width="30%" align="center"><img src="http://pics.taobao.com/2k5/sys/component/tab_selected_right_bk2.gif" width="15" height="290" /></td>
           </tr>
         </table>
  </div>
<div id="content6" class="hidecontent">6.不是什么地方用ajax都合适的！</div>
<div id="content7" class="hidecontent">7.该刷新的地方还是要刷新！</div>
<div id="content8" class="hidecontent">8.刷新用cookie保存还是很不方便的！！！！！！！！ </div>
</div>  
</div></td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载

Copyright 2006-2020 (phpxiu.com) All Rights Reserved.

本站为非盈利性网站，不接受任何广告。php爱好者