摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>選項卡</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>選項卡</title>
<link rel="stylesheet" href="1.css">
</head>
<body>
<div class="page">
<div class="title">選項卡案例</div>
<div class="menu1"><h3>css</h3></div>
<div class="menu2"><h3>php</h3></div>
<div class="menu3"><h3>html</h3></div>
<div class="clear"></div>
<div class="s1">層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語言的一個子集）等文件樣式的計算機(jī)語言。CSS不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合各種腳本語言動態(tài)地對網(wǎng)頁各元素進(jìn)行格式化。</div>
<div class="s2">PHP（外文名:PHP: Hypertext Preprocessor，中文名：“超文本預(yù)處理器”）是一種通用開源腳本語言。語法吸收了C語言、Java和Perl的特點(diǎn)，利于學(xué)習(xí)，使用廣泛，主要適用于Web開發(fā)領(lǐng)域。PHP 獨(dú)特的語法混合了C、Java、Perl以及PHP自創(chuàng)的語法。它可以比CGI或者Perl更快速地執(zhí)行動態(tài)網(wǎng)頁。用PHP做出的動態(tài)頁面與其他的編程語言相比，</div>
<div class="s3">網(wǎng)頁的本質(zhì)就是超級文本標(biāo)記語言，通過結(jié)合使用其他的Web技術(shù)（如：腳本語言、公共網(wǎng)關(guān)接口、組件等），可以創(chuàng)造出功能強(qiáng)大的網(wǎng)頁。因而，超級文本標(biāo)記語言是萬維網(wǎng)（Web）編程的基礎(chǔ)，也就是說萬維網(wǎng)是建立在超文本基礎(chǔ)之上的。超級文本標(biāo)記語言之所以稱為超文本標(biāo)記語言，是因?yàn)槲谋局邪怂^“超級鏈接”點(diǎn)。</div>
</div>
</body>
</html>
-------------------------------------------------------------
以下是css樣式
-------------------------------------------------------------
*{
margin: 0;
padding: 0;
}
body{
background-color: black;
}
.page{
width: 600px;
height: 400px;
margin: 150px auto;
background-color: white;
border:3px solid gray;
border-radius: 10px;
box-shadow: 5px 5px #20B2AA;
}
.title{
text-align: center;
background: linear-gradient(white,black);
height:30px;
}
.menu1,.menu2,.menu3{
float: left;
width: 200px;
height: 100px;
line-height: 100px;
text-align: center;
color: white;
}
.menu1{
background: red;
}
.clear{
clear: both;
}
.menu2{
background: blue;
}
.menu3{
background: green;
}
.s1,.s2,.s3{
position: absolute;
background: gray;
width: 600px;
height: 270px;
z-index: 50;
color: white;
display: none;
}
.menu1:hover ~ .s1,
.menu2:hover ~.s2,
.menu3:hover ~.s3{
display: block;
}----------------------------------------------
以下是運(yùn)行效果圖
----------------------------------------------
--------------------------------------------------
總結(jié)如下：
--------------------------------------------------
因沒弄懂：hover偽類選擇器如何選擇對象，浪費(fèi)了不少時間。
.a:hover{選擇對象為自身}；
.a:hover .b{只能選擇子元素.b};.
a:hover + .b{只能選擇同級相鄰的.b元素}；
.a:hover ~ .b:hover{選擇鼠標(biāo)滑過的.a元素最近的一個.b元素}
批改老師：滅絕師太批改時間：2019-03-23 11:29:28
老師總結(jié)：效果有點(diǎn)丑,但是是自己花了心思的,選項卡一般不會用css來完成哦!