純CSS的選項卡（面試題）

2024-09-05 12:20:20

字體：大中小

供稿：網(wǎng)友

一道面試題，當(dāng)場用純CSS編寫一個當(dāng)前流行的網(wǎng)頁選項卡，看似簡單的功能，但要立即當(dāng)著那么多人的面，還沒有任何工具可以借助，能完成寫出來，實屬不易啊，支持一下。

<!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=gb2312" /><title>CSS選項卡</title><style type="text/css">*{	margin:0;	padding:0;	list-style:none;	font-size:12px;	}#container{	width:300px;	margin:10px auto;	position:relative;	border:1px solid #666;	}ul{	width:20px;	height:100px;	position:absolute;	right:5px;	top:100px;	}ul li{	height:33px;	}ul li a{	display:block;	width:20px;	height:20px;	line-height:20px;	text-align:center;	color:#000;	background:#ccc;	text-decoration:none;	}ul li a:hover{	color:#fff;	background:#666;	}#wrapper{	height:300px;	overflow:hidden;	}#a1,#a2,#a3{	width:300px;	height:300px;	}</style></head><body><div   class="iwvjtn8m0"   id="container">	<ul>		<li>ASP</li>		<li>PHP</li>		<li>JSP</li>	</ul>	<div   class="iwvjtn8m0"   id="wrapper">		<div   class="iwvjtn8m0"   id="a1" style="background:#FF0000">ASP的源碼內(nèi)容		</div>		<div   class="iwvjtn8m0"   id="a2" style="background:yellow">PHP的源碼內(nèi)容		</div>		<div   class="iwvjtn8m0"   id="a3" style="background:skyblue;">JSP的源碼內(nèi)容		</div>	</div></div></body></html>

上一篇：三缺一邊線菜單的CSS實現(xiàn)

下一篇：仿東京商城菜單、仿Win右鍵菜單、仿淘寶TAB整合特效