以下保存為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>
微信網站
