0731-55587844
其他(360、58、霸屏、搜狗、小程序)等代理合作請發郵箱254596208@qq.com
站內公告:  如果您有其它業務聯系,請發郵件至yaner@y1web.com郵箱,謝謝您的配合!
營銷型網站建設第一品牌——優度網絡
現在的位置:首頁 > 發布營銷型網站建設 > 新聞資訊 > DIV 選項卡制作 流行的Tab菜單
DIV 選項卡制作 流行的Tab菜單
信息來源:優度網絡  發布日期:2009/3/23 瀏覽數量:1305
文章導讀:

以下保存為CSS

body{
 margin:10px;
}
#ler{
margin:0px;
width:400px;
padding:0px;
height:100px;
background-color:#99CC33;
}

#content{        /* 具體內容 */
 border-left:1px solid #11a3ff;  /* 左邊框 */
 border-right:1px solid #11a3ff;  /* 右邊框 */
 border-bottom:1px solid #11a3ff; /* 下邊框 */
 padding:15px;
 font-size:12px;
}
ul#tabnav{
 list-style-type:none;
 margin:0px;
 padding-left:0px;     /* 左側無空隙 */
 padding-bottom:23px;
 border-bottom:1px solid #11a3ff; /* 菜單的下邊框 */
 font:bold 12px verdana, arial;
}
ul#tabnav li{
 float:left;
 height:22px;
 background-color:#a3dbff;
 margin:0px 3px 0px 0px; 
 border:1px solid #11a3ff;
}
ul#tabnav a:link, ul#tabnav a:visited{
 display:block;      /* 塊元素 */
 color:#006eb3;
 text-decoration:none;
 padding:5px 10px 3px 10px;
}
ul#tabnav a:hover{
 background-color:#006eb3;
 color:#FFFFFF;
}
body#home li.home, body#news li.news, /* 當前頁面的菜單項 */
body#sports li.sports, body#music li.music{
 border-bottom:1px solid #FFFFFF; /* 白色下邊框,覆蓋<ul>中的藍色下邊框 */
 color:#000000;
 background-color:#FFFFFF;
}
body#home li.home a:link, body#home li.home a:visited, /* 當前頁面的菜單項的超鏈接 */
body#news li.news a:link, body#news li.news a:visited,
body#sports li.sports a:link, body#sports li.sports a:visited,
body#music li.music a:link, body#music li.music a:visited{
 color:#000000;
 background-color:#FFFFFF;
}
body#home li.home a:hover, body#news li.news a:hover,
body#sports li.sports a:hover, body#music li.music a:hover{
 color:#006eb3;
 text-decoration:underline;
}

以下是CSS調用一

<html>
<head>
<title>流行的Tab菜單</title>
<link href="8-9.css" type="text/css" rel="stylesheet">
   </head>
<body id="blog">
<ul id="tabnav">
 <li class="home"><a href="8-9_home.html">項目描述</a></li>
 <li class="news"><a href="8-9_news.html">項目交流</a></li>
 <li class="sports"><a href="8-9_sports.html">提交的作品</a></li>
 <li class="music"><a href="8-9_music.html">中標的作品</a></li>
</ul>
<div id="content">
 <h3>Blog</h3>
</div>
</body>
</html>

 

相關信息
  • 網絡營銷培訓
  • 微網站
  • 掃二維碼
  • 1
  • 2
  • 3
  • 最新上傳
  • 精品案例
  • 自動流水線嘉
  • 湖南省湘江重
  • 湘潭家居\建
  • 湘潭學校微網
0731-55587844
傳真:0731-55587844
郵箱:254596208@qq.com
地址:湖南省湘潭市岳塘區霞光東路58號(維也納酒店6樓)
優度官方微信掃一掃關注官方微信

關注優度

官方微信
官方微博
官網首頁
亚洲A 一级黄片|av一级中文在线观看|中文字幕国产在线