商城静态页面（仿小米官网）

joeyhao123

已于 2022-03-14 00:26:40 修改

阅读量4.7k

点赞数 7

分类专栏： # JavaScript # 前端技术栈文章标签： html css

于 2020-04-27 18:00:45 首次发布

本文为博主原创文章，不得用于商业用途，转载请注明出处，谢谢。

本文链接：https://blog.csdn.net/zxhzm_life/article/details/105796006

版权

前端技术栈同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

JavaScript

13 篇文章 0 订阅

订阅专栏

这是一个仿小米商城静态首页的小练习，后续我会继续添加相应的一些动态效果。
最终效果（目前还不太完善）
在这里插入图片描述

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>网站项目</title>
	<link rel="stylesheet" href="website1.css">
</head>
<body>
	<!-- crucial infrom -->
	<div class="yiqing">
		<a href="https://www.mi.com/a/h/13931.html"><h1>应对疫情小米业务调整通知</h1></a>
	</div>
	<!-- 导航开始 -->
	<div class="top">
		<div class="logo">
			<a href="html+css项目练手.html"><img src="images/logo.png" alt=""></a>
			<div class="logo-con">
				
			</div>
		</div>
		<ul class="nav">
			<li><a href="#">博客首页</a></li>
			<li><a href="#">web前端</a></li>
			<li><a href="#">Python</a></li>
			<li><a href="#">JavaScript</a></li>
			<li><a href="#">MindMaster</a></li>
		</ul>	
	</div>
	<!-- <button>登录/注册</button> -->
	<!-- 导航结束 -->
	<!-- 轮播图开始 -->
	<div class="shift">
		<ul class="img">
			<img src="images/shift3.png" alt="">
		</ul>
		<ul class="page">
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<span class="span-left">
			<img src="images/arrow-left.png" alt="">
		</span>
		<span class="span-right">
			<img src="images/arrow-right.png" alt="">
		</span>
	</div>
	<!-- 轮播图结束 -->
	<div class="insert">
		<img src="images/insert.png" alt="">
	</div>
	<!-- 版心主要内容开始 -->
	<div class="banner">
		<div class="banner-left">
			<img src="images/阿尔法.png" alt="">
		</div>
		<div class="banner-middle">
			<div class="middle-top">
				<img src="images/watch.png" alt="">		
			</div>
			<div class="middle-down">
				<div class="middle-down-left">
					<video src="images/MP4c.mp4" controls="
					controls" height=""></video>
				</div>
				<div class="middle-down-right">
					<img src="images/shaver.png" alt="">
				</div>
			</div>
		</div>
		<div class="banner-right">
			<div class="right-top">
				<img src="images/glass.png" alt="">
			</div>
			<div class="right-down">
				<img src="images/平衡车.png" alt="">
			</div>
		</div>
	</div>
	<!-- 版心主要内容结束 -->
	<div class="insert">
		<img src="images/insert2.png" alt="">
	</div>
	<!-- 产品介绍开始 -->
	<div class="products clearfix">
		<div class="pro1 fl">
			<img src="images/product1.png" alt="">
		</div>
		<div class="des fr">
			<h2><strong>小米CC9 Pro</strong></h2>
			<p>&nbsp&nbsp「分期享6期免息，购机享1TB小米云空间1年使用权，+1元得撞色飘带保护套，+99元得冰封散热背夹」1亿像素主摄 / 全场景五摄像头 / 四闪光灯 / 3200万自拍 / 10 倍混合光学变焦，50倍数字变焦 / 5260mAh ⼤电量 / 标配 30W疾速快充 / ⼩米⾸款超薄屏下指纹 / 德国莱茵低蓝光认证 / 多功能NFC / 红外万能遥控 / 1216超线性扬声器</p>
		</div>
	</div>
		<div class="products clearfix">
		<div class="pro1 fr">
			<img src="images/product2.png" alt="">
		</div>
		<div class="des fl">
			<h2><strong>小米手环 4</strong></h2>
			<p>&nbsp&nbsp大屏彩显还有 380 多种个性组合*6 轴传感器从日常健身到专业运动游泳教练泳姿识别，50 米防水*心率预警24 小时高精准心率监测NFC版人工智能语音遥控手环、手机智能家居控制语音控制家中电器*小爱同学102 种智能语音场景*伸手刷卡公交卡、门禁卡、支付宝</p>
		</div>
	</div>
		<div class="products clearfix">
		<div class="pro1 fl">
			<img src="images/product3.png" alt="">
		</div>
		<div class="des fr">
			<h2><strong>Redmi Note8 Pro</strong></h2>
			<p>&nbsp&nbsp6400万四摄小金刚拍照新旗舰超强解析力，超震撼8K分辨率的近2倍*6400万超高清主摄手机直出3.26米高印刷海报拍张照片放大至点对点，近手机屏幕25倍*，同时支持拍摄4K视频、960帧慢动作。</p>
		</div>
	</div>
	<!-- 产品介绍结束 -->
	<div class="insert">
		<img src="images/insert3.png" alt="">
	</div>
	<!-- 底部版权信息 -->
	<div class="foot">
		<div class="con">
			<div class="navfoot">
				<div class="top">
					<a href="#">隐私政策</a>|<a href="#">问题反馈</a>|<a href="#">联系我们</a>|<a href="#">相关服务</a>|
				</div>
				<div class="main clearfix">
					<div class="phone fl">
						<h4>123456</h4>
					</br>
						<span>fjghkjfdhjkgz</span>
					</div>
					<div class="qrcode fr">
						<img src="images/code1.png" alt="">
						<img src="images/code2.png" alt="">
					</div>
				</div>
			</div>
			<div class="hhh"><h3>探索黑科技，小米为发烧而生</h3></div>
			<div class="copyright">
				<p>互联网药品信息服务资格证 (京)-非经营性-2014-0090</p>
			</div>
		</div>
	</div>
</body>
</html>

CSS代码：

*{
	padding: 0;
	margin: 0;
	list-style: none;
}
body{
	background-color: skyblue;
	width: 100%;
}
.yiqing{
	width: 100%;
	height: 120px;
	background-color: #ff6700;
}
.yiqing h1{
	color: #fff;
	text-align: center;
	line-height: 120px;
}
.yiqing a{
	text-decoration: none;
}
.top{
	position: relative;
	width: 1000px;
	margin:0 auto;
	overflow: hidden;
}
.top .logo{
	float: left;
	position: absolute;
	margin-top: 25px;
}
.logo .logo-con{
	top: 90px;
	width: 200px;
	height: 50px;
	float: left;
	left: 0;
	display: none;
	z-index: 2;
	background-color: pink;

}
.top .nav{
	float: right;
}
.top .nav li{
	float: left;
	width: 150px;
	font-size: 18px;
	height: 110px;
	line-height: 110px;
	text-align: center;
}
.top .nav a{
	text-decoration: none;
	color: #fff;
	display: block;
}
.nav a:hover{
	color: red;
	position: relative;
}
.nav a:hover:after{
	content: "";
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-bottom-color: red;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -10px;
}
/*button{
	padding: 10px;
	margin-top: 30px;
	font-size: 20px;
}*/
.shift{
	margin: 0 auto;
	width: 1000px;
	height: 400px;
	position: relative;
	margin-top: 10px;
}
.shift .img img{
	width: 1000px;
	height: 400px;
	position: absolute;
}
.shift .page{
	position: absolute;
	bottom: 20px;
	left: 50%;
	margin-left: -60px;
	/*border: 1px solid #fff;*/
	border-radius: 16px;
	background-color: #ffffff50;

}
.shift .page li{
	width: 16px;
	height: 16px;
	/*position: absolute;*/
	border-radius: 8px;
	background-color: #fff;
	margin: 8px;
	float: left;
}
.page li:hover{
	background-color: red;
}
span{
	position: absolute;
}
.span-left{
	top: 50%;
	left: 20px;
}
.span-right{
	top: 50%;
	right: 20px;
}
.banner{
	width: 1000px;
	/*position: relative;*/
	margin: 0 auto;
	overflow: hidden;
	margin-top: 8px;
}
.banner-left img{
	/*position: absolute;*/
	height: 500px;
	float: left;
}
.banner-middle{
	width: 600px;
	float: left;
}
.middle-top img{
	/*position: absolute;*/
	float: left;
	margin:0 5px;
	width: 590px;
	height: 295px;
}
.middle-down-left video{
	float: left;
	margin-top: 5px;
	margin-left: 5px;
	margin-right:5px;
	/*width: 292.5px;*/
	height: 200px;
}
.middle-down-right img{
	float: left;
	/*background-size: 100%;*/
	margin-top: 5px;
	width: 230.55px;
	height: 200px;
}
.banner-right{
	float: right;
}
.right-top img{
	margin-bottom: 5px;
	float: right;
	width: 209px;
	height: 247.5px;
}
.right-down img{
	float: right;
	width: 209px;
	height: 247.5px;
}
.insert{
	width: 1000px;
	margin: 10px auto;	
}
.insert img{
	width: 1000px;
}
.products{
	width: 1000px;
	margin: 0 auto;
	/*position: relative;*/
}
.fl{
	float: left;
}
.fr{
	float: right;
}
.des{
	padding-top: 15px;
	width: 550px;
	color: #fff;
}
.products img{
	width: 420px;
}
.clearfix{
	*zoom:1;
}
.clearfix:after{
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.des h2{
	color: #ff6700;
	padding-bottom: 13px;
}
.des p{
	line-height: 2em;
}
.foot{
	/*background-color: #00000060;*/
	height: 200px;
}
.con{
	width: 1000px;
	height: 200px;
	margin: 0 auto;
	background-color: #00000090;
}
.foot img{
	height:100px;
	width: 100px;
}
.top a{
	text-decoration: none;
	margin: 2px 10px;
	color: #fff;
}
.con .hhh h3{
	text-align: center;	
	font-size: 25px;
	display: block;
	font-family: "华文行楷";
	color: #ffffff80;
}
.main{
	color: #ffffff30	;
}
.phone{
	padding-top: 15px;
}