页面1
<!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>tab2</title>
<style type="text/css">
/*设置全局属性*/
body{
/*定义tab选项卡的位置*/
margin:100px 300px 200px 300px;
}
/*设置内容的基本属性*/
#content{
border-left:1px solid #0033FF; /*添加左边框*/
border-right:1px solid #0033FF; /*添加右边框*/
border-bottom:1px solid #0033FF; /*添加底部边框*/
padding:15px;/*内容距离边界的空隙*/
font-size:17px;/*字号*/
}
/*设置无序列表的基本样式*/
ul#tabul{
list-style:none;/*去除无序列表前的点*/
margin:0px;
padding-left:0px;
padding-bottom:28px;
font:bold 17px Arial, Helvetica, sans-serif;/*定义字体*/
border-bottom:1px solid #0033ff;
}
/*设置无序列表元素的基本样式*/
ul#tabul li{
float:left;/*向左浮动*/
height:27px;
margin:0px 4px 0px 0px;
border:1px solid #0033ff;
background:#00CCCC;
}
/*设置链接以及访问过的样式*/
ul#tabul a:link,ul#tabul a:visited{
display:block;/*设置列表元素块状显示*/
color:#0000CC;
text-decoration:none;/*去掉下划线*/
padding:5px 10px 3px 10px;
}
/*设置鼠标经过时的样式*/
ul#tabul a:hover{
background:#990000;
color:ff0000;
}
body#news li.news,body#game li.game,body#music li.music,body#movie li.movie,body#story li.story{/*重定义列表菜单*/
border-bottom:1px solid #ffffff;/*给块状菜单重新定义白色的下边框，起到覆盖原先定义的蓝色下边框*/
color:#000000;
background-color:#ffffff;
/*以下css代码为激活时菜单的超链接效果*/
body#news li.news a:link,body#news li.news a:visited,
body#game li.game a:link,body#game li.game,a:visited,
body#music li.music a:link,body#music li.music a:visited,
body#movie li.movie a:link,body#movie li.movie a:visited,
body#story li.story a:link,body#story li.story a:visited{color:#000000;}
body#news li.news a:hover,
body#game li.game a:hover,
body#music li.music a:hover,
body#movie li.movie a:hover,
body#story li.story a:hover{color:#0000cc;text-decoration:underline;}
</style>
</head>
<body>
<ul id="tabul">
<li class="news"><a href="tab-a-news.html">News</a></li>
<li class="game"><a href="tab-a-game.html">Game</a></li>
<li class="music"><a href="tab-a-music.html">Music</a></li>
<li class="movie"><a href="tab-a-movie.html">Movie</a></li>
<li class="story"><a href="tab-a-story.html">Story</a></li>
</ul>
<div>
<p>Welcome!</p>
</div>
</body>
</html>
<!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>tab2</title>
<style type="text/css">
/*设置全局属性*/
body{
/*定义tab选项卡的位置*/
margin:100px 300px 200px 300px;
}
/*设置内容的基本属性*/
#content{
border-left:1px solid #0033FF; /*添加左边框*/
border-right:1px solid #0033FF; /*添加右边框*/
border-bottom:1px solid #0033FF; /*添加底部边框*/
padding:15px;/*内容距离边界的空隙*/
font-size:17px;/*字号*/
}
/*设置无序列表的基本样式*/
ul#tabul{
list-style:none;/*去除无序列表前的点*/
margin:0px;
padding-left:0px;
padding-bottom:28px;
font:bold 17px Arial, Helvetica, sans-serif;/*定义字体*/
border-bottom:1px solid #0033ff;
}
/*设置无序列表元素的基本样式*/
ul#tabul li{
float:left;/*向左浮动*/
height:27px;
margin:0px 4px 0px 0px;
border:1px solid #0033ff;
background:#00CCCC;
}
/*设置链接以及访问过的样式*/
ul#tabul a:link,ul#tabul a:visited{
display:block;/*设置列表元素块状显示*/
color:#0000CC;
text-decoration:none;/*去掉下划线*/
padding:5px 10px 3px 10px;
}
/*设置鼠标经过时的样式*/
ul#tabul a:hover{
background:#990000;
color:ff0000;
}
body#news li.news,body#game li.game,body#music li.music,body#movie li.movie,body#story li.story{/*重定义列表菜单*/
border-bottom:1px solid #ffffff;/*给块状菜单重新定义白色的下边框，起到覆盖原先定义的蓝色下边框*/
color:#000000;
background-color:#ffffff;
/*以下css代码为激活时菜单的超链接效果*/
body#news li.news a:link,body#news li.news a:visited,
body#game li.game a:link,body#game li.game,a:visited,
body#music li.music a:link,body#music li.music a:visited,
body#movie li.movie a:link,body#movie li.movie a:visited,
body#story li.story a:link,body#story li.story a:visited{color:#000000;}
body#news li.news a:hover,
body#game li.game a:hover,
body#music li.music a:hover,
body#movie li.movie a:hover,
body#story li.story a:hover{color:#0000cc;text-decoration:underline;}
</style>
</head>
<body>
<ul id="tabul">
<li class="news"><a href="tab-a-news.html">News</a></li>
<li class="game"><a href="tab-a-game.html">Game</a></li>
<li class="music"><a href="tab-a-music.html">Music</a></li>
<li class="movie"><a href="tab-a-movie.html">Movie</a></li>
<li class="story"><a href="tab-a-story.html">Story</a></li>
</ul>
<div>
<p>Welcome!</p>
</div>
</body>
</html>
页面2
<!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>tab2</title>
<style type="text/css">
/*设置全局属性*/
body{
/*定义tab选项卡的位置*/
margin:100px 300px 200px 300px;
}
/*设置内容的基本属性*/
#content{
border-left:1px solid #0033FF; /*添加左边框*/
border-right:1px solid #0033FF; /*添加右边框*/
border-bottom:1px solid #0033FF; /*添加底部边框*/
padding:15px;/*内容距离边界的空隙*/
font-size:17px;/*字号*/
}
/*设置无序列表的基本样式*/
ul#tabul{
list-style:none;/*去除无序列表前的点*/
margin:0px;
padding-left:0px;
padding-bottom:28px;
font:bold 17px Arial, Helvetica, sans-serif;/*定义字体*/
border-bottom:1px solid #0033ff;
}
/*设置无序列表元素的基本样式*/
ul#tabul li{
float:left;/*向左浮动*/
height:27px;
margin:0px 4px 0px 0px;
border:1px solid #0033ff;
background:#00CCCC;
}
/*设置链接以及访问过的样式*/
ul#tabul a:link,ul#tabul a:visited{
display:block;/*设置列表元素块状显示*/
color:#0000CC;
text-decoration:none;/*去掉下划线*/
padding:5px 10px 3px 10px;
}
/*设置鼠标经过时的样式*/
ul#tabul a:hover{
background:#990000;
color:ff0000;
}
body#news li.news,body#game li.game,body#music li.music,body#movie li.movie,body#story li.story{/*重定义列表菜单*/
border-bottom:1px solid #ffffff;/*给块状菜单重新定义白色的下边框，起到覆盖原先定义的蓝色下边框*/
color:#000000;
background-color:#ffffff;
/*以下css代码为激活时菜单的超链接效果*/
body#news li.news a:link,body#news li.news a:visited,
body#game li.game a:link,body#game li.game,a:visited,
body#music li.music a:link,body#music li.music a:visited,
body#movie li.movie a
<!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>tab2</title>
<style type="text/css">
/*设置全局属性*/
body{
/*定义tab选项卡的位置*/
margin:100px 300px 200px 300px;
}
/*设置内容的基本属性*/
#content{
border-left:1px solid #0033FF; /*添加左边框*/
border-right:1px solid #0033FF; /*添加右边框*/
border-bottom:1px solid #0033FF; /*添加底部边框*/
padding:15px;/*内容距离边界的空隙*/
font-size:17px;/*字号*/
}
/*设置无序列表的基本样式*/
ul#tabul{
list-style:none;/*去除无序列表前的点*/
margin:0px;
padding-left:0px;
padding-bottom:28px;
font:bold 17px Arial, Helvetica, sans-serif;/*定义字体*/
border-bottom:1px solid #0033ff;
}
/*设置无序列表元素的基本样式*/
ul#tabul li{
float:left;/*向左浮动*/
height:27px;
margin:0px 4px 0px 0px;
border:1px solid #0033ff;
background:#00CCCC;
}
/*设置链接以及访问过的样式*/
ul#tabul a:link,ul#tabul a:visited{
display:block;/*设置列表元素块状显示*/
color:#0000CC;
text-decoration:none;/*去掉下划线*/
padding:5px 10px 3px 10px;
}
/*设置鼠标经过时的样式*/
ul#tabul a:hover{
background:#990000;
color:ff0000;
}
body#news li.news,body#game li.game,body#music li.music,body#movie li.movie,body#story li.story{/*重定义列表菜单*/
border-bottom:1px solid #ffffff;/*给块状菜单重新定义白色的下边框，起到覆盖原先定义的蓝色下边框*/
color:#000000;
background-color:#ffffff;
/*以下css代码为激活时菜单的超链接效果*/
body#news li.news a:link,body#news li.news a:visited,
body#game li.game a:link,body#game li.game,a:visited,
body#music li.music a:link,body#music li.music a:visited,
body#movie li.movie a
最低0.47元/天 解锁文章
1368
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
