页面排版_小米官网脚注随堂案例20201119_小米官网界面排版-优快云博客

本文链接：https://blog.youkuaiyun.com/JsonWuxin/article/details/109820317
在这里插入图片描述
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>网页脚部</title>
		<style type="text/css">
			.site-footer {
				width:100%;
			}
			.container {
				width:1226px;
				margin:0 auto;
				
				
			}
			.footer-service {
				padding: 27px 0px;
				border-bottom:1px solid #e0e0e0;
			}
			/*.clearfix {*zoom: 1; }*/
			.clearfix:before, .clearfix:after {
				display:table;/*block*/
				content:"";
				line-height:0;
			}
			.clearfix:after {clear: both;} 
			/*clearfix:before, .clearfix:after 
			{display: table;line-height: 0;content:"";}*/
			.list-service {
				margin:0;
				padding:0;
				list-style-type:none;
			}
			.list-service li:first-child {
				border-left:0;
			}
			.list-service li {
				float:left;
				width:19.8%;
				height:25px;
				font-size:16px;
				line-height:25px;
				text-align:center;
				border-left:1px solid #e0e0e0;
				
			}
			.list-service li a {
				text-decoration:none;
				color:#616161;
			}
			.list-service a:hover{
				color:#ff6700;
			}
			.footer-links {
				padding:40px 0px;
			}
			.footer-links .col-links {
				float:left;
				margin:0px;
				width:160px;
			}
			.footer-links .col-links dt {
				font-size:14px;
				line-height:1.25;
				color:#424242;
				margin:-1px 0 26px;
			}
			.footer-links .col-links dd {
				margin:10px 0 0;
				font-size:12px;
			}
			.footer-links .col-links dd a {
				color:#757575;
			}
			.col-contact {
				width:251px;
				float:right;
				border-left:1px solid #e0e0e0;
				text-align:center;
				color:#616161;
			}
			.col-contact .phone {
				color:#ff6700;
				font-size:22px;
				
			}
			.col-contact p {
				margin:0 0 5px 0;
				font-size:12px;
			}
			.col-contact a {
				text-decoration:none;
			}
			.btn{
				 border: 1px solid #b0b0b0;
				 margin:0;
				 padding:0;
				 text-align:center;
				 cursor:pointer;
			}
			.btn-line-primary {
				border-color: #ff6700;
			    background: #fff;
			    color: #ff6700;
			}
			.btn-small {
				width: 118px;
			    height: 28px;
			    font-size: 12px;
			    line-height: 28px;
			}
			.col-contact .follow {
				font-size:12px;
				margin-top:10px;
			}
			.col-contact .follow a {
				    width: 24px;
				    height: 24px;
				    display: inline-block;
				    vertical-align: middle;
				    margin-left: 6px;
				    margin-top: -3px;
			}
			.col-contact .follow .wb {
				background-image: url(img/wb.png);
				background-repeat: no-repeat;
				background-position: 50% 0;
				background-size:cover;
			}
			.col-contact .follow .wx {
				background-image: url(img/wx.png);
				background-repeat: no-repeat;
				background-position: 50% 0;
				background-size:cover;
			}
		</style>
	</head>
	<body>
		<div class="site-footer">
			<div class="container"><!--固定宽高-->
				<div class="footer-service">
					<ul class="list-service clearfix">
						<li>
							<a href="#">预约维修服务</a>
						</li>
						<li>
							<a href="#">7天无理由退换</a>
						</li>
						<li>
							<a href="#">15天免费换货</a>
						</li>
						<li>
							<a href="#">满99包邮</a>
						</li>
						<li>
							<a href="#">520余家售后服务</a>
						</li>
					</ul>
				</div>
				<div class="footer-links clearfix">
					<dl class="col-links">
						<dt>帮助中心</dt>
						<dd><a>账户管理</a></dd>
						<dd><a>购物指南</a></dd>
						<dd><a>订单操作</a></dd>
					</dl>
					<dl class="col-links">
						<dt>服务支持</dt>
						<dd><a>售后政策</a></dd>
						<dd><a>自助服务</a></dd>
						<dd><a>相关下载</a></dd>
					</dl>
					<dl class="col-links">
						<dt>线下门店</dt>
						<dd><a>售后政策</a></dd>
						<dd><a>自助服务</a></dd>
						<dd><a>相关下载</a></dd>
					</dl>
					<dl class="col-links">
						<dt>关于小米</dt>
						<dd><a>账户管理</a></dd>
						<dd><a>购物指南</a></dd>
						<dd><a>订单操作</a></dd>
					</dl>
					<dl class="col-links">
						<dt>关注我们</dt>
						<dd><a>账户管理</a></dd>
						<dd><a>购物指南</a></dd>
						<dd><a>订单操作</a></dd>
					</dl>
					<dl class="col-links">
						<dt>特色服务</dt>
						<dd><a>账户管理</a></dd>
						<dd><a>购物指南</a></dd>
						<dd><a>订单操作</a></dd>
					</dl>
					<div class="col-contact">
						<p class="phone">400-100-5678</p>
						<p>8:00-18:00（仅收市话费）</p>
						<a href="#" class="btn btn-line-primary btn-small">人工客服</a>
						<div class="follow">
							关注小米:
							<a href="" class="wb"></a>
							<a href="" class="wx"></a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>