小米商城一部分

题目

在这里插入图片描述

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.one{
				width: 246px;
				height: 174px;
				float: left;
			}
			.one ul{
				margin: 0;
				padding: 0;
			}
			.one li{
				width: 80px;
				height: 85px;
				background-color: rgba(95,87,80,0.7);
				list-style: none;
				float: left;
				border: 0.01px solid white;
			}
			.one img{
				width: 24px;
				height: 24px;
				margin: 0 auto 1px;
				display: block;
			}
			.one span{
				font-size: 12px;
				margin-left: 16px;
				color: white;
			}
			.one div{
				margin-top: 18px;
			}
			.two{
				width: 998px;
				height: 170px;
				float: left;
			}
			.two ul{
				margin: 0;
				padding: 0;
				float: left;
			}
			.two li{
				list-style: none;
				width: 316px;
				height: 170px;
				padding-left: 14px;
				float: left;
			}
			.two img{
				width: 316px;
				height: 170px;	
			}
			.head-two{
				width: 100%;
				height: 130px;
				margin-top: 22px;
				/* margin-left: -246px; */
				
				float: left;
			}
			.head-two img{
				width: 1226px;
				height: 120px;
			}
		</style>
	</head>
	<body>
		<div id="center">
			<div class="head">
				<div class="one">
					<ul>
						<li>
							<div>
								<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="加载失败">
								<span>保障服务</span>
							</div>
						</li>
						<li>
							<div>
								<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="加载失败">
								<span>企业团购</span>
							</div>
						</li>
						<li>
							<div>
								<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="加载失败">
								<span>F码通道</span>
							</div>
						</li>
						<li>
							<div>
								<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="加载失败">
								<span style="margin-left: 21px;">米粉卡</span>
							</div>
						</li>
						<li>
							<div>
								<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="加载失败">
								<span>以旧换新</span>
							</div>
						</li>
						<li>
							<div>
								<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="加载失败">
								<span>话费充值</span>
							</div>
						</li>
					</ul>
				</div>
				<div class="two">
					<ul>
						<li>
							<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0cf5e958bc88727b50c5c5fba7a8f47a.jpg?w=632&h=340" alt="加载失败">
						</li>
						<li>
							<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6dd2f3e0de4e6cbba98fd3799cfa5bf7.jpg?w=632&h=340" alt="加载失败">
						</li>
						<li>
							<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d7d4be1a9e701e16de498f89b1865867.jpg?w=632&h=340" alt="加载失败">
						</li>
					</ul>
				</div>
			</div>
			<div class="head-two">
				<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/7fffc6ee6d2c0867a8e3dee2c65c6067.jpg?thumb=1&w=1533&h=150&f=webp&q=90" alt="加载失败">
			</div>
		</div>
	</body>
</html>

代码展示

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值