html+css商城主页面

10/19 09:09
阅读数 50

小米商城-主页面(静态页面)

非常适合在学习前端知识的同学们的知识巩固和细节的一个项目,由于CSS代码有点多不好展示可以下载我的CSS源代码https://blog.csdn.net/wjfckx/article/details/109114052.

如果有问题可以查看我的空间里面的资源



话不多说先上效果图小米商城

1.HTML代码

<!DOCTYPE html>
<html>
   <head>
   	<meta charset="utf-8">
   	<title>小米闪购 - 小米商超</title>
   	<link rel="shortcut icon" href="favicon.ico" />
   	<link rel="stylesheet" type="text/css" href="css/Sytel.css" />
   	<link rel="stylesheet" href="css/iconfont.css" />
   </head>

   <body>
   	<div class="topbar">
   		<div class="container">

   			<div class="topbar-nav">

   				<a href="">小米商城</a> <span>|</span>
   				<a href="">MIUI</a> <span>|</span>
   				<a href="">IoT</a> <span>|</span>
   				<a href="">云服务</a> <span>|</span>
   				<a href="">金融</a> <span>|</span>
   				<a href="">有品</a> <span>|</span>
   				<a href="">小爱开放平台</a> <span>|</span>
   				<a href="">企业团购</a> <span>|</span>
   				<a href="">资质证照</a> <span>|</span>
   				<a href="">协议规则</a> <span>|</span>
   				<a href="">下载App</a> <span>|</span>
   				<a href="">智能生活</a> <span>|</span>
   			</div>

   			<div class="topbar-cart">
   				<a href=""><i class="iconfont">&#xe63b;</i> 购物车<span> (0) </span></a>
   			</div>

   			<div class="topbar-info clearfix">
   				<a href=""> 登录</a><span>|</span>
   				<a href="">注册</a> <span>|</span>
   				<a href="" class="sep"> 消息通知</a>
   			</div>
   		</div>
   	</div>


   	<div class="header">
   		<div class="header-container">

   			<div class="header-logo">
   				<a href="#" class="lr">小米官网</a>
   			</div>

   			<div class="header-nav">
   				<ul class="nav-list clearfix">
   					<li class="nav-category">
   						<a href="#">全部商品分类</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">小米手机</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">Redmi 红米</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">电视</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">笔记本</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">家电</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">路由器</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">智能硬件</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">服务</a>
   					</li>

   					<li class="nav-item">
   						<a href="#">社区</a>
   					</li>

   				</ul>
   			</div>

   			<div class="header-search">
   				<form action="" class="search-form">
   					<input type="search" name="keyword" class="search-text" />
   					<input type="submit" value="&#xe67d;" class="search-btn iconfont" />
   				</form>
   			</div>
   		</div>
   	</div>


   	<div class="seckill">
   		<div class="seckill-head"></div>
   		<div class="seckill-container">

   			<div class="seckill-nav">

   				<ul>
   					<li class="active1">
   						<em>14:00</em> <span><em>抢购中距<br>结束 05:11:22</em></span>
   					</li>
   					<li> <em>20:00</em><span>即将开始</span></li>
   					<li> <em>22:00</em><span>即将开始</span></li>
   					<li> <em>00:00</em><span>明日开始</span></li>
   					<li> <em>10:00</em><span>明日开始</span></li>
   				</ul>
   			</div>

   			<div class="seckill-goods">
   				<ul class="clearfix">


   					<li>
   						<div class="bg">
   							<img src="img/1.jpg" alt="" />
   						</div>
   						<div class="info">
   							<a href="#" class="name">米家无线除螨仪 白色</a>
   							<p class="tips">每个家庭都需要一台除螨仪</p>
   							<p class="price">499.00<del>549</del></p>
   							<a href="#" class="btn">登录后抢购</a>
   							<p class="person">已有18人设置提醒</p>
   						</div>
   					</li>


   					<li>
   						<div class="bg">
   							<img src="img/2.jpg" alt="" />
   						</div>
   						<div class="info">
   							<a href="#" class="name">小米有线耳机(K歌版) 白色 </a>
   							<p class="tips">我的私人KTV</p>
   							<p class="price">149.00<del>169</del></p>
   							<a href="#" class="btn">登录后抢购</a>
   							<p class="person">已有8人设置提醒</p>
   						</div>
   					</li>

   					<li>
   						<div class="bg">
   							<img src="img/3.jpg" alt="" />
   						</div>
   						<div class="info">
   							<a href="#" class="name">小米移动电源3 10000mAh USB-C双向快充版 黑色</a>
   							<p class="tips">双向18W快充 / 输入输出双接口 / 可上飞机,安全贴心</p>
   							<p class="price">99.00<del>129</del></p>
   							<a href="#" class="btn">登录后抢购</a>
   							<p class="person">已有28人设置提醒</p>
   						</div>
   					</li>

   					<li>
   						<div class="bg">
   							<img src="img/4.jpg" alt="" />
   						</div>
   						<div class="info">
   							<a href="#" class="name">自清洁 | 米家互联网空调 1.5</a>
   							<p class="tips">变频,高效制冷热,自清洁</p>
   							<p class="price">1899.00<del>2399</del></p>
   							<a href="#" class="btn">登录后抢购</a>
   							<p class="person">已有118人设置提醒</p>
   						</div>
   					</li>

   					<li>
   						<div class="bg">
   							<img src="img/5.jpg" alt="" />
   						</div>
   						<div class="info">
   							<a href="#" class="name">米家空气净化器 2S </a>
   							<p class="tips">好空气看得见</p>
   							<p class="price">699.00<del>899</del></p>
   							<a href="#" class="btn">登录后抢购</a>
   							<p class="person">已有18人设置提醒</p>
   						</div>
   					</li>

   					<li>
   						<div class="bg">
   							<img src="img/6.jpg" alt="" />
   						</div>
   						<div class="info">
   							<a href="#" class="name">PINZTEA木柄陶瓷泡茶杯 茶水分离 380mL</a>
   							<p class="tips">尊贵高级黑/实木防烫柄/轻松清洗/精致礼盒装</p>
   							<p class="price">85.00<del>99</del></p>
   							<a href="#" class="btn">登录后抢购</a>
   							<p class="person">已有28人设置提醒</p>
   						</div>
   					</li>


   				</ul>
   			</div>



   			<p class="seckill-notice">*小米秒杀活动规则:<br>
   				1.秒杀商品是否参加活动、最终秒杀成功的商品,以订单结算页显示为准,活动包括但不限于优惠券、赠品、满减、满赠等;<br>
   				2.秒杀商品数量有限,活动以下单支付成功为准,请加入购物车后尽快下单支付;<br>
   				3.秒杀价不含运费,最终以订单结算页价格为准;<br>
   				4.订单中商品的数量、颜色、型号等,以订单结算页为准。<br>
   				温馨提示:因可能存在系统缓存、页面更新导致价格变动异常等不确定性情况出现,如您发现活动商品标价或促销信息有异常,请您立即联系小米客服,以便我们及时补正。</p>
   		</div>
   	</div>

   	<div class="navigation">

   		<div class="navigation--head">

   			<div class="seckill-container">

   				<div class="navigation-nav clearfix">
   					<ul class="">
   						<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>
   					<hr>
   				</div>
   				<!--关于我们-->
   				<div class="navigation-about clearfix">
   					<ul class="navigation-sss">
   						<bt>帮助中心</bt>
   						<li><a href="#">账户管理</a></li>
   						<li><a href="#">购物指南</a></li>
   						<li><a href="#">订单操作</a></li>
   					</ul>
   					<ul class="navigation-sss">
   						<bt>服务支持</bt>
   						<li><a href="#">售后政策</a></li>
   						<li><a href="#">自助服务</a></li>
   						<li><a href="#">相关下载</a></li>
   					</ul>

   					<ul class="navigation-sss">
   						<bt>线下门店</bt>
   						<li><a href="#">小米之家</a></li>
   						<li><a href="#">服务网点</a></li>
   						<li><a href="#">授权体验店</a></li>
   					</ul>

   					<ul class="navigation-sss">
   						<bt>关于小米</bt>
   						<li><a href="#">了解小米</a></li>
   						<li><a href="#">加入小米</a></li>
   						<li><a href="#">投资者关系</a></li>
   						<li><a href="#">廉洁举报</a></li>
   					</ul>

   					<ul class="navigation-sss">
   						<bt>关注我们</bt>
   						<li><a href="#">新浪微博</a></li>
   						<li><a href="#">官方微信</a></li>
   						<li><a href="#">联系我们</a></li>
   					</ul>

   					<ul class="navigation-sss">
   						<bt>特色服务</bt>
   						<li><a href="#">F 码通道</a></li>
   						<li><a href="#">礼物码</a></li>
   						<li><a href="#">防伪 查询</a></li>
   					</ul>

   					<ul class="navigation-omn">
   						<li>
   							<span class="dh">400-100-5678</span><br />
   							<span class="time">8:00-18:00(仅收市话费)</span>
   							<a href="#">人工客服</a><br />
   							<div class="xm">
   								关注小米:
   							</div>
   						</li>
   					</ul>
   				</div>
   			</div>
   		</div>
   	</div>

<div class="seckill-container"></div>
   	<div class="xo seckill-container clearfix">

   			<div class="Xiaomi clearfix">
   				<div class="logo rl">小米官网</div>
   			</div>
   			<div class="infomm">
   			<p class="set">
   				<a href="#">小米商城</a><span>|</span>
   				<a href="#">MIUI</a><span>|</span>
   				<a href="#">米家</a><span>|</span>
   				<a href="#">米聊</a><span>|</span>
   				<a href="#">多看</a><span>|</span> 
   				<a href="#">游戏</a><span>|</span>
   				<a href="#">路由器</a><span>|</span>
   				<a href="#">米粉卡</a><span>|</span>
   				<a href="#">政企服务</a><span>|</span>
   				<a href="#">小米天猫店</a><span>|</span>
   				<a href="#">小米集团隐私政策</a><span>|</span>
   				<a href="#">小米商城隐私政策</a><span>|</span>
   				<a href="#">小米商城用户协议</a><span>|</span>
   				<a href="#">问题反馈</a><span>|</span>
   			
   			</p>
</div>
   			<p class="Xiaomi-moc seckill-container">
   				<a href="#">© mi.com </a>
   				
   				<a href="#">ICP110507</a>
   				
   				<a href="#">ICP10046444</a>
   				 
   				 <a href="#">京公网安备11010802020134</a>
   				  
   				  <a href="#">京网文[2020]0276-042</a>
   				  <br />
   				  
   				  <a href="#">(京)网械平台备字(2018)第00005</a>
   				
   				<a href="#">互联网药品信息服务资格证 () -非经营性-2014-0090 </a>
   				 
   				<a href="#">营业执照 </a>
   				 
   				 <a href="#">医疗器械公告</a> <br />
   				 
   				 <a href="#">增值电信业务许可证</a>
   				 <span> 网络食品经营备案 京食药网食备202010048   食品经营许可证<br />
   				违法和不良信息举报电话:171-5104-4404 </span>
   				<a href="#">知识产权侵权投诉 </a>
   				<span>本网站所列数据,除特殊说明,所有数据均出自我司实验室测试
   			</span></p>
   			
   		
   			
   		</div>
   	
   			<div class="xo-img seckill-container ">
   				<a href="#"><img src="img/truste.png"/></a>
   				<a href="#"><img src="img/v-logo-1.png"/></a>
   				<a href="#"><img src="img/v-logo-2.png"/></a>
   				<a href="#"><img src="img/v-logo-3.png"/></a>
   				<a href="#"></a>
   				
   			</div>
   			
   			<div class="sol seckill-container"> <img src="img/slogan2020.png"/></div>
   </body>
</html>

2.CSS代码:

这里只展示了顶部分类代码

iconfont的使用可以查看我的文章

body,
ul,
li {
   
     
	margin: 0;
	padding: 0;
}

body {
   
     
	height: 100%;
	font: 14px/1.5 Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
	
}

ul {
   
     
	list-style-type: none;
}

a {
   
     
	text-decoration: none;
}

.topbar {
   
     
	/* border: 1px solid black; */
	background-color: #333;
	height: 40px;
}

.topbar a {
   
     
	color: #b0b0b0;
	font-size: 12px;
}

.topbar a:hover {
   
     
	color: #fff;
}

.container {
   
     
	/* border: 1px solid black; */
	margin: 0 auto;
	width: 1226px;
}

.topbar-nav {
   
     
	float: left;
	height: 40px;
	line-height: 40px;
	font-size: 0;

}

.topbar-nav span {
   
     
	font-size: 12px;
	color: #424242;
	font-family: sans-serif;
	margin: 0.5em;
}

.container::before,
.container::after,
.clearfix::before,
.clearfix::after {
   
     
	content: "";
	display: table;
}

.container::after,
.clearfix::after {
   
     
	clear: both;
}

.topbar-info,
.topbar-cart {
   
     
	float: right;
}

.topbar-cart a {
   
     
	display: block;
	height: 40px;
	line-height: 40px;
	text-align: center;
	width: 120px;
	background-color: #424242;
}

.topbar-cart a:hover {
   
     
	background-color: #fff;
	color: #ff6700;
}

.topbar-cart span {
   
     
	margin-left: -4px;
	font-size: 12px;
}

.topbar-cart i {
   
     
	font-size: 20px;
	line-height: 20px;
	margin-top: 4px;
	vertical-align: -4px;
}

.topbar-info {
   
     
	margin-right: 15px;
}

.topbar-info a {
   
     
	float: left;
	padding: 0 5px;
	height: 40px;
	line-height: 40px;
}

.topbar-info span {
   
     
	float: left;
	font: sans-serif;
	font-size: 12px;
	color: #424242;
	line-height: 40px;
	height: 40px;
}

.topbar-info .sep {
   
     
	padding: 0 10px;
}

.header {
   
     
	height: 100px;

}

.header-container {
   
     
	/* border: 1px solid black;
	background-color: #333;
	height: 40px; */
	margin: 0 auto;
	width: 1226px;
}

.header-logo a {
   
     
	display: block;
	width: 55px;
	height: 55px;
	background: #FF6700 url(../favicon.ico) no-repeat 50% 50%;

}

.header-logo {
   
     
	float: left;
	width: 62px;
	margin-top: 22px;
	height: 55px;
}

.header-nav {
   
     
	float: left;
	width: 820px;
	height: 100px;
}

.header-search {
   
     
	float: right;
	height: 50px;
	margin-top: 25px;
	width: 296px;
}

.header-logo .lr {
   
     
	text-align: left;
	text-indent: -99992em;

}

.header-nav .nav-list .nav-category {
   
     
	float: left;
	width: 127px;
	padding: 0 15px 0 0;
}

.header-nav .nav-list .nav-category a {
   
     
	display: block;
	text-align: right;
	padding: 26px 0 38px;
	color: #333;
}

后面我会把js代码写完大家可以实时关注我的动态


~~如果对本代码有任何意义可以联系作者~~


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部