当前位置: 代码迷 >> HTML/CSS >> 网页设计tab菜单,该怎么处理
  详细解决方案

网页设计tab菜单,该怎么处理

热度:134   发布时间:2012-09-25 09:55:58.0
网页设计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 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.</p>
  相关解决方案