CSS+DIV实现多标签页面。

来源：互联网发布：水屏幕恶作剧软件编辑：程序博客网时间：2024/06/10 23:01

学习时自娱自乐。

index.html

-----------------------

<!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>无标题文档</title><link href="tab.css" mce_href="tab.css" type="text/css" rel="stylesheet" /></head><body><div class="selbar"><ul><li class="wbottom addto"><a href="#" mce_href="#">页面1</a></li><li><a href="index2.html" mce_href="index2.html">页面2</a></li><li><a href="index3.html" mce_href="index3.html">页面3</a></li><li><a href="index4.html" mce_href="index4.html">页面4</a></li><li><a href="index5.html" mce_href="index5.html">页面5</a></li></ul></div><div class="content"><p>1</p><p>1</p><p>1</p><p>1</p></div></body></html>

tab.css

---------------------------

body{margin:10px;}.selbar{width:364px;}.content{border-bottom:1px solid #0033FF;border-left:1px solid #0033FF;border-right:1px solid #0033FF;padding:15px;width:332px;}ul{list-style-type:none;margin:0px;padding-left:10px;padding-bottom:23px;border-bottom:1px solid #0033FF;font:bold 12px verdana, arial;}li{background-color:#99CCCC;float:left;height:22px;margin:0px 3px 0px 0px;border:1px solid #0033FF;}a:link,a:visited {text-decoration:none;display:block;padding:3.5px 10px 3.5px 10px;}a:hover {background-color:#CC0000;color:#FFFFFF;}.wbottom{border-bottom-color:#FFFFFF;background-color:#FFFFFF;}.addto a:hover{background-color:#FFFFFF;color:#0033FF;text-decoration:underline;}