网页设计tab菜单,该怎么处理
日期：2014-05-17 浏览次数：20646 次
网页设计tab菜单
网页设计菜鸟求解我做的一个tab菜单的示例但是还没有设置好！我实在不知道怎样设计了，求解!
<!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" />
<title>无标题文档</title>
<style type="text/css">
#home {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 10px;
}
#tabnav {
list-style-type: none;
margin: 0px;
padding-left: 0px; /*左侧无空隙 */
padding-bottom: 23px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #11a3ff; /*菜单的下边框*/
font-size: 12px;
}
#tabnav li {
float: left;
height: 22px;
background-color: #a3dbff;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
border: 1px solid #11a3ff;
}
#tabnav a:link, #tabnav a:visited {
display: block;
color: #006eb3;
text-decoration: none;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
#tabnav a:hover {
color: #FFFFFF;
background-color: #006eb3;
}
#tabnav .home a:hover,#tabnav .news a:hover,#tabnav .sports a:hover,#tabnav .music a:hover,#tabnav .blog a:hover{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
background-color: #FFF;
color: #000;
}
#content {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #11A3FF;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #11A3FF;
border-bottom-color: #11A3FF;
padding: 15px;
font-size: 12px;
}
</style>
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="#">首页</a></li>
<li class="news"><a href="#">新闻</a></li>
<li class="sports"><a href="#">体育</a></li>
<li class="music"><a href="#">音乐</a></li>
<li class="blog"><a href="#">博客</a></li>
</ul>
<div id="content">
<div id="header">
<h1 align="center" >Head Line</h1>
</div>
<p><span id="ti">T</span>he Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.he Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which
网页设计菜鸟求解我做的一个tab菜单的示例但是还没有设置好！我实在不知道怎样设计了，求解!
<!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" />
<title>无标题文档</title>
<style type="text/css">
#home {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
margin: 10px;
}
#tabnav {
list-style-type: none;
margin: 0px;
padding-left: 0px; /*左侧无空隙 */
padding-bottom: 23px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #11a3ff; /*菜单的下边框*/
font-size: 12px;
}
#tabnav li {
float: left;
height: 22px;
background-color: #a3dbff;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 0px;
margin-left: 0px;
border: 1px solid #11a3ff;
}
#tabnav a:link, #tabnav a:visited {
display: block;
color: #006eb3;
text-decoration: none;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 3px;
padding-left: 10px;
}
#tabnav a:hover {
color: #FFFFFF;
background-color: #006eb3;
}
#tabnav .home a:hover,#tabnav .news a:hover,#tabnav .sports a:hover,#tabnav .music a:hover,#tabnav .blog a:hover{
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFF;
background-color: #FFF;
color: #000;
}
#content {
border-left-width: 1px;
border-left-style: solid;
border-left-color: #11A3FF;
border-right-width: 1px;
border-bottom-width: 1px;
border-right-style: solid;
border-bottom-style: solid;
border-right-color: #11A3FF;
border-bottom-color: #11A3FF;
padding: 15px;
font-size: 12px;
}
</style>
</head>
<body id="home">
<ul id="tabnav">
<li class="home"><a href="#">首页</a></li>
<li class="news"><a href="#">新闻</a></li>
<li class="sports"><a href="#">体育</a></li>
<li class="music"><a href="#">音乐</a></li>
<li class="blog"><a href="#">博客</a></li>
</ul>
<div id="content">
<div id="header">
<h1 align="center" >Head Line</h1>
</div>
<p><span id="ti">T</span>he Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.he Internet Society's mission is to achieve a world in which everyone everywhere is connected to an open and universally accessible Internet. Since its inception in 1992, ISOC has been at the forefront of global Internet education by bringing essential information and training to people throughout the world.The Internet Society's mission is to achieve a world in which
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
