CSS实例:Tab选项卡效果

时间:2021-03-10 17:09:00

页面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>
下面是效果截图

CSS实例:Tab选项卡效果