415day（tab栏切换模块制作）

最新推荐文章于 2022-10-17 16:41:24 发布

原创最新推荐文章于 2022-10-17 16:41:24 发布 · 165 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了一种网页设计中的Tab栏切换模块制作方法，包括HTML结构定义与CSS样式设置，适用于实现促销、公告等内容的分类展示，提高用户体验。

《2018年11月23日》【连续415天】

标题：tab栏切换模块制作；
内容：

<div class="news">
	 				<div class="tab-hd">
	 					<a href="javascript:;" class="cuxiao">促销</a>
	 					<a href="javascript:;">公告</a>
	 					<a href="#" class="more1">更多</a>
	 					<div class="line"></div>
	 				</div>
	 				<div class="tab-bd">
	 					<ul>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 					</ul>			 		
	 					<!-- <ul>					
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 						<li><a href="#">蓄电池专场下单立减</a></li>
	 					</ul> -->
	 				</div>
	 			</div>

.jd-clo3 a{
	font-size: 12px;
	color: #747474;
}
.news {
	height: 149px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 5px 15px 0;
}
.tab-hd {
	border-bottom: 1px solid #ccc;
	padding: 3px 0; 
	position: relative;
}
.tab-hd a{
	margin: 0 4px;
}
.cuxiao {
	border-right: 1px solid #ccc;
	padding-right: 10px;
}
.news .more1 {
	position: absolute;
	top: 2px;
	right: 0;
}
.line {
	width: 28px;
	height: 2px;
	background-color: #f10215;
	position: absolute;
	bottom: -1px;
	left: 0;
}
.tab-bd {
	margin-top: 10px;
}
.tab-bd li {
	height: 23px;
	line-height: 23px;
}