纯CSS的选项卡（面试题）

2024-09-05 12:20:20

字体：大中小

来源：转载

供稿：网友

一道面试题，当场用纯CSS编写一个当前流行的网页选项卡，看似简单的功能，但要立即当着那么多人的面，还没有任何工具可以借助，能完成写出来，实属不易啊，支持一下。

<!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 id="container">	<ul>		<li>ASP</li>		<li>PHP</li>		<li>JSP</li>	</ul>	<div id="wrapper">		<div id="a1" style="background:#FF0000">ASP的源码内容		</div>		<div id="a2" style="background:yellow">PHP的源码内容		</div>		<div id="a3" style="background:skyblue;">JSP的源码内容		</div>	</div></div></body></html>

上一篇：三缺一边线菜单的CSS实现

下一篇：仿东京商城菜单、仿Win右键菜单、仿淘宝TAB整合特效