CSS实例：Tab选项卡效果
2015-08-11 11:18
766 查看
页面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>
页面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: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 id="news">
<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 to News!</p>
<p>News is packaged information about current events happening somewhere else; or, alternatively, news is that which the news industry sells. News moves through many different media, based on word of mouth, printing, postal systems, broadcasting, and electronic communication. Common topics for news reports include war, politics, and business, as well as athletic contests, quirky or unusual events, and the doings of celebrities. Government proclamations, concerning royal ceremonies, laws, taxes, public health, and criminals, have been dubbed news since ancient times. Humans exhibit a nearly universal desire to learn and share news from elsewhere, which they satisfy by traveling and talking to each other. Technological and social developments, often driven by government communication and espionage networks, have increased the speed with which news can spread, as well as influenced its content. The genre of news as we know it today is closely associated with the newspaper, which originated in China as a court bulletin and spread, with paper and printing press, to Europe. The development of the electric telegraph in the mid-19th century revolutionized news by enabling nearly instantaneous transmissions, and by empowering a cartel of news agencies which consolidated the world news system. In the 20th century, the style of news and its impact on national populations expanded considerably with constant live broadcasting of radio and television, and finally, with the popularization of the internet.</p>
</div>
</body>
</html>
页面3
<!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 id="game">
<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 to Game!</p>
<p>A game is structured playing, usually undertaken for enjoyment and sometimes used as an educational tool. Games are distinct fromwork, which is usually carried out for remuneration, and from art, which is more often an expression of aesthetic or ideological elements. However, the distinction is not clear-cut, and many games are also considered to be work (such as professional players of spectator sports/games) or art (such as jigsaw puzzles or games involving an artistic layout such as Mahjong, solitaire, or some video games).
Key components of games are goals, rules, challenge, and interaction. Games generally involve mental or physical stimulation, and often both. Many games help develop practical skills, serve as a form of exercise, or otherwise perform an educational, simulational, or psychological role.Attested as early as 2600 BC, games are a universal part of human experience and present in all cultures. The Royal Game of Ur, Senet, and Mancala are some of the oldest known games.</p>
</div>
</body>
</html>
页面4
<!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 id="music">
<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 to Music!</p>
<p> Music is an art form whose medium is sound and silence. Generally, a song is considered the smallest standalone work of music,especially when involving singing. The common elements of music are pitch (which governs melody and harmony), rhythm (and its associated concepts tempo,meter, and articulation), dynamics, and the sonic qualities of timbre and texture. The word derives from Greek μουσική (mousike; "art of the Muses").[1] In its most general form the activities describing music as an art form include the production of works of music, the criticism of music, the study of the history of music, and the aesthetic dissemination of music.
<br/>
The creation, performance, significance, and even the definition of music vary according to culture and social context. Music ranges from strictly organized compositions (and their recreation in performance), through improvisational music to aleatoric forms. Music can be divided into genres and subgenres, although the dividing lines and relationships between music genres are often subtle, sometimes open to personal interpretation, and occasionally controversial. Within the arts, music may be classified as a performing art, a fine art, and auditory art. Music may be played and heard live, may be part of a dramatic work or film, or may be recorded.
</p>
</div>
</body>
</html>
页面5
<!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 id="movie">
<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 to Movie!</p>
<p> A film, also called a movie or motion picture, is a series of still images which, when shown on a screen, creates the illusion of moving images due to the phi phenomenon. This optical illusion causes the audience to perceive continuous motion between separate objects viewed rapidly in succession. A film is created by photographing actual scenes with a motion picture camera; by photographing drawings or miniature models using traditional animation techniques; by means of CGI and computer animation; or by a combination of some or all of these techniques and other visual effects. The word "cinema" is often used to refer to the industry of films and filmmaking or to the art of filmmaking itself. The contemporary definition of cinema is the art of simulating experiences to communicate ideas, stories, perceptions, feelings, beauty or atmosphere by the means of recorded or programmed moving images along with other sensory stimulations.
</p>
</div>
</body>
</html>
页面6
<span style="font-size:24px;"><strong><!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 id="story">
<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 to Story!</p>
<p>The purpose of a Disambiguation page (as Lenin sadly failed to note) is to disambiguate.
The accompanying Dab page is currently a florid example of neglect in the face of cluelessness about the only thing that a Dab must do, and the thing that it must do, efficiently, even at the cost of thwarting every other valuable thing that it could arguably be a step toward.
If you're interested in writing about the nature or role of stories and story-telling, or compiling things relevant to them, there may be a place (an article or list, or both, or several different ones) for that work within Wikipedia, but the accompanying Dab is not that place. MoSDab and Dab should help make that clear to you.
--Jerzy•t 16:51, 1 April 2008 (UTC) </p>
</div>
</body>
</html>
</strong></span>下面是效果截图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ORA-39212 XSL样式错误.
- 使用css3设置隐藏文字为省略号
- css font的简写规则
- win10图片浏览的模式怎么改回到改win7样式的？
- css3:bacground-size
- DIV CSS字体居中实现DIV文字水平左右居中
- 你应该知道的9个优秀的CSS框架
- DIV+CSS高手必知的15个CSS常识
- css3 matrix 2D矩阵和canvas transform 2D矩阵
- button样式设置
- Retext 语法高亮、数学公式、自定义样式
- [CSS3] 新增属性
- JS+CSS实现美化的下拉列表框效果
- ajax动态增加html节点时，jqm样式未加载出来，须实现refresh操作
- css中position:relative和overflow:hidden的问题
- 闲聊CSS之关于clearfix--清除浮动
- css3 选择器（二）
- CSS学习笔记---（六）
- 史上最全的CSS hack方式一览
- Day2_CSS_CSS语法及HTML结合