409day(navitems模块，底部服务模块)

最新推荐文章于 2024-09-25 13:44:47 发布

原创最新推荐文章于 2024-09-25 13:44:47 发布 · 640 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了电商网站中底部服务模块与导航栏的设计实现，包括具体的HTML结构与CSS样式，展示了如何通过布局和样式调整提升用户体验。

《2018年11月17日》【连续409天】

标题：navitems模块，底部服务模块；

内容：

<!-- 导航栏信息 -->
			<div class="navitems">
				<ul>
					<li><a href="#">秒杀</a></li>
					<li><a href="#">优惠券</a></li>
					<li><a href="#">闪购</a></li>
					 <li><a href="#">拍卖</a></li>
				</ul>
				<div class="spacer"></div>
				<ul>
					<li><a href="#">秒杀</a></li>
					<li><a href="#">优惠券</a></li>
					<li><a href="#">闪购</a></li>
					<li><a href="#">拍卖</a></li>
				</ul>
				<div class="spacer"></div>
				<ul>
					<li><a href="#">京东金融</a></li>
				</ul>
			</div>

 <!-- 页面底部 -->
	 <div class="footer">
	 	<!-- 底部服务 -->
	 	<div class="footer-service">
	 		<div class="w f-s-inner">
	 			<ul class="clearfix">
	 				<li>
	 					<div class="s-unit">
	 						<h5>多</h5>
	 						<p>品类齐全，轻松购物</p>
	 					</div>
	 				</li>
	 				<li>
	 					<div class="s-unit">
	 						<h5 class="kuai">快</h5>
	 						<p>品类齐全，轻松购物</p>
	 					</div>
	 				</li>
	 				<li>
	 					<div class="s-unit">
	 						<h5 class="duo">多</h5>
	 						<p>品类齐全，轻松购物</p>
	 					</div>
	 				</li>
	 				<li>
	 					<div class="s-unit">
	 						<h5 class="sheng">省</h5>
	 						<p>品类齐全，轻松购物</p>
	 					</div>
	 				</li>
	 			</ul>
	 		</div>
	 	</div>
	 </div>

/*导航栏信息*/
.navitems {
	position: absolute;
	left: 200px;
	bottom: 0;
}

.navitems ul {
	float: left;
}
.navitems ul li {
	float: left;
	margin-left: 30px;
}
.navitems li a {
	font-size: 17px;
	color: #555A5F;
	font-weight: 700;
	height: 40px;
	line-height: 40px;
	display: block;
}
.navitems li a:hover  {
	color: #f10215;
}
.navitems  .spacer {
	float: left;
	margin-right: -10px;
	margin-top: 15px;
	margin-left: 20px;
}
/*footer 开始*/
.footer {
	height: 560px;

}
.footer-service {
	height: 100px;
	border-bottom: 1px solid #DEDEDE;
}
.f-s-inner {
	padding: 30px 0;

}
.f-s-inner li {
	float: left;
	width: 297px;
	height: 42px;

}
.s-unit {
	width: 225px;
	height: 42px;
	margin: 0 auto;
	position: relative;
}
.s-unit h5 {
	width: 36px;
	height: 42px;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../images/ico_service.png) no-repeat;
	text-indent: -999px;
}
.s-unit p {
	line-height: 42px;
	margin-left: 45px;
	font-size: 18px;
	font-weight: 700;
}
.s-unit .kuai {
	background-position: 0 -43px;
}
.s-unit .duo {
	background-position: 0 -86px;
}
.s-unit .sheng {
	background-position: 0 -128px;
}