tab选项卡合理布局之运用a的1个选项方式

日期:2021-01-20 类型:科技新闻 

关键词:网页设计,移动端网页设计,大一网页设计作业成品,网页编辑软件,网页在线编辑


拷贝编码
编码以下:

#Tab{width:300px;line-height:30px;overflow:hidden;}
#Tab li{float:left;width:100px;line-height:30px;text-align:center;cursor:pointer;}
#Main{width:300px;height:300px;overflow:hidden;border:1px solid #000;}
#Main ul{height:300px;}
#Main ul li{height:30px;line-height:30px;}

运用了a的作用,把Main的超过一部分掩藏
html

拷贝编码
编码以下:

<div id="Tab">
<ul>
<li><a href="#01">标识1</a></li>
<li><a href="#02">标识2</a></li>
</ul>
</div>
<div id="Main">
<ul id="01">
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
<li>1111111</li>
</ul>
<ul id="02">
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
<li>2222222</li>
</ul>
</div>

这样就进行了1个选项卡的作用了
思路很新颖,值得好好思索。
上一篇:CSS a:hover伪类在IE6下的难题 返回下一篇:没有了