返回 2019-8-...... 登陆

2019-8-23 小米商城首页框架布局

辰晨 2019-08-23 17:52:56 364

在线预览地址:http://www.pursuer.top/xiaomi1

html部分:


<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>小米商城</title>

<link rel="shortcut icon"  type="image/x-icon" href="static/images/footlogo.png">

<!-- <link rel="stylesheet" href="static/layui/css/layui.css"> -->

<link rel="stylesheet" href="static/font-awesome/css/font-awesome.min.css">

<link rel="stylesheet" href="static/css/style.css">

</head>

<body>

<!-- 头部 -->

<div>

<div>


</div>

</div>


<!-- 主体 -->

<div>

<div>

<!-- 导航 -->

<div>搜索</div>


            <!-- 轮播图 -->

<div>

<div></div>

<div></div>

</div>

<div></div>


<!-- 商品广告 -->

<div>

<div></div>

<div style="background:url(static/images/midAD1.jpg);"></div>

<div style="background:url(static/images/midAD2.jpg);"></div>

<div style="background:url(static/images/midAD3.jpg);"></div>

</div>

<div></div>


<!-- 小米闪购 -->

<div>

<h2>小米闪购</h2>

<div style="margin-right: 14px;border-top:1px solid #f00;"></div>

<div style="margin-right: 14px;border-top:1px solid #ff6700;"></div>

<div style="margin-right: 14px;border-top:1px solid #080;"></div>

<div style="margin-right: 14px;border-top:1px solid #00f;"></div>

<div style="border-top:1px solid #f00;"></div>

</div>

<div></div>


<!-- 广告图 -->

<div style="background:url(static/images/longAD1.jpg);">

</div>


<!-- 手机专区 -->

<div>

<div>

<h2>手机</h2>

<span>查看更多</span>

</div>

<div></div>

<div style="background:url(static/images/buy/手机AD.jpg);;">

</div>

<div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</div>

<div></div>


            <!-- 广告图 -->

<div style="background:url(static/images/longAD2.jpg);"></div>


<!-- 智能专区 -->

<div>

<div>

<h2>智能</h2>

<span>热门</span>

<span>电视影音</span>

<span>电脑</span>

<span>家具</span>

</div>

    <div></div>

<div>

<div style="background:#ccc;background:url(static/images/buy/智能AD1.jpg);margin-bottom: 14px;"></div>

<div style="background:#ccc;background:url(static/images/buy/智能AD2.jpg);"></div>

</div>

<div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div></div>

<div></div>

<div></div>

<div>

<div></div>

<div style="margin-top:10px;"></div>

</div>

</div>

</div>

<div></div>



<!-- 广告图 -->

<div style="background:url(static/images/longAD3.jpg);"></div>


<!-- 家电专区 -->

<div>

<div>

<h2>家电</h2>

<span>热门</span>

<span>家居</span>

<span>家电</span>

</div>

    <div></div>

<div>

<div style="background:#ccc;background:url(static/images/buy/家电AD1.jpg);margin-bottom: 14px;"></div>

<div style="background:#ccc;background:url(static/images/buy/家电AD2.jpg);"></div>

</div>

<div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div style="margin-bottom:14px;"></div>

<div></div>

<div></div>

<div></div>

<div>

<div></div>

<div style="margin-top:10px;"></div>

</div>

</div>

</div>

<div></div>



<!-- 广告图 -->

<div style="background:url(static/images/longAD4.jpg);"></div>

</div>

</div>


<!-- 底部 -->

<div>

<div>

<div>

<a href=""><i class="fa fa-wrench"></i>预约维修服务</a><span>|</span>

<a href=""><i class="fa fa-rotate-right"></i>7天无理由退货</a><span>|</span>

<a href=""><i class="fa fa-refresh"></i>15天免费换货</a><span>|</span>

<a href=""><i class="fa fa-gift"></i>满150元包邮</a><span>|</span>

<a href=""><i class="fa fa-map-marker"></i>520余家售后网点</a>

</div>

<div>

            <div>

<div>帮助中心</div>

<a>账户管理</a>

<a>购物指南</a>

<a>订单操作</a>

</div>

<div>

<div>服务支持</div>

<a>售后政策</a>

<a>自助服务</a>

<a>相关下载</a>

</div>

<div>

<div>线下门店</div>

<a>小米之家</a>

<a>服务网点</a>

<a>授权体验店</a>

</div>

<div>

<div>关于小米</div>

<a>了解小米</a>

<a>加入小米</a>

<a>投资者关系</a>

</div>

<div>

<div>关注我们</div>

<a>新浪微博</a>

<a>官网微博</a>

<a>联系我们</a>

</div>

<div>

<div>特色服务</div>

<a>F码通道</a>

<a>礼物码</a>

<a>防伪查询</a>

</div>

<div>

<span style="font-size:22px;">Feir-520-1314</span>

<span style="font-size:12px;color: #616161;">周一至周日 8:00-18:00<br>(仅收市话费)</span>

<div id="cont"><a><i class="fa fa-commenting"></i>联系客服</a></div>

</div>

</div>

<div></div>

<div>

<div style="background: url(static/images/footlogo.png);"></div>

<div>

<div>

<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="">Select&nbsp;&nbsp;Region</a>

</div>

<div>

<span> <a href="">©mi.com</a> 京ICP证110507号 <a href="">京ICP备10046444号</a> <a href="">京公网安备11010802020134号</a> <a href="">京网文[2014]0059-0009号</a> <br>违法和不良信息举报电话:185-0130-1238,本网站所列数据,除特殊说明,所有数据均出自我司实验室测试</span>

</div>

</div>

<div>

<img src="static/images/footericon1.png" alt="">

<img src="static/images/footericon2.png" alt="">

<img src="static/images/footericon3.png" alt="">

<img src="static/images/footericon4.png" alt="">

<img src="static/images/footericon5.png" alt="">

</div>

</div>

<div></div>

<div>探索黑科技,小米为发烧而生!</div>

</div>

</div>

</body>

</html>



css部分:


/*公共样式*/

*{padding:0;margin:0;}

a{text-decoration: none;cursor:pointer;}

li{list-style:none;}

.clear{clear: both;}


/*头部样式*/

.header{width:100%;height:40px;background-color:#333;}

.menu{width:1226px;height:40px;background: #ccc;margin:0 auto;}


/*主体样式*/

.main{width:1226px;margin:0 auto;}

/*导航*/

.mainNav{width:1226px;height:80px;background:#ccc;margin:10px auto;}

/*轮播图*/

.mainRpm{margin:10px auto;}

.mainRpm_l{width:246px;height:460px;background:#ccc;float: left;}

.mainRpm_r{width:980px;height:460px;background:#bbb;float: left;}

/*商品广告*/

.mainShop{margin:10px auto;}

.mainShop_l{width:235px;height:170px;background:#5f5750;float: left;}

.mainShop_r{width:317px;height:170px;float: left;margin-left:13px;}

/*小米闪购*/

.mainPurchase{margin:20px auto;}

.mainPurchase_tit{padding:20px 0;}

.mainPurchase_shop{width: 234px;height:329px;float: left;background-color: #ccc;}

/*广告位*/

.mainImg{width:1226px;height:119px;background:#ccc;margin:30px auto;}

/*专区*/

.mainPhone{margin:10px auto;}

.mainPhone_tit{height: 60px;margin: 10px 0;line-height:60px;}

.mainPhone_tit .tit{height:40px;line-height:40px;float: left;}

.mainPhone_tit .more{height:40px;line-height:40px;float: right;font-size: 14px;}

.mainPhone_tit .short{height:40px;line-height:40px;float: right;margin-left:15px;font-size: 14px;}

.mainPhone_tit .short:hover{color:#ff6700;border-bottom: 2px solid #ff6700;}

.mainPhone_l{width:234px;height:614px;float:left;}

.mainPhone_l .ad{width:234px;height:300px;}

.mainPhone_r{width:992px;height:614px;float:right;}

.mainPhone_r .p{width:234px;height:300px;background:#ccc;float:left;margin-left: 14px;}

.mainPhone_r .p1{width:234px;height:300px;float:left;margin-left: 14px;}

.mainPhone_r .p1 .ad{width:234px;height:145px;background:#ccc;}


.mainRecommend{width:1226px;height:310px;background:#ccc;margin:20px auto;}

.mainHost{width:1226px;height:490px;background:#ccc;margin:20px auto;}

.mainContainer{width:1226px;height:490px;background:#ccc;margin:20px auto;}

.mainVideo{width:1226px;height:360px;background:#ccc;margin:20px auto 40px;}


/*底部样式*/

.foot{width:1226px;margin:0 auto;}

.foot_top{height:80px;margin:0 auto;text-align: center;border-bottom: 1px solid #e0e0e0;}

.foot_top a{color:#616161;font-size: 16px;line-height: 80px;}

.foot_top i{font-size:20px;line-height: 80px;margin-right:10px;}

.foot_top a:hover{color:#ff6700;}

.foot_top span{color:#616161;margin:0 50px;}

.foot_middle{height:114px;margin:40px 0;}

.foot_middle .nav{height: 114px;width: 160px;float: left;}

.foot_middle .nav .tit{font-size: 14px;margin-bottom: 26px;color: #424242;}

.foot_middle .nav .list{font-size: 12px;margin:10px 0;color:#555;display: block;}

.foot_middle .nav .list:hover{color:#ff6700;}

.foot_middle .nav_r{height:114px;width:265px;float: left;border-left: 1px solid #e0e0e0;}

.foot_middle .nav_r span{text-align: center;color: #ff6700;display: block;}

.foot_middle .nav_r #cont{width: 118px;height: 28px;border:1px solid #ff6700;margin:20px auto 0;color:#ff6700;text-align: center;line-height:30px;font-size:14px;}

.foot_middle .nav_r #cont:hover{background: #ff6700;color:#fff;}

.foot_middle .nav_r #cont i{margin-right: 10px;}

.foot_bottom{height:84px;}

.foot_bottom .foot_bottom_l{width:56px;height: 57px;float: left;margin-right: 16px;}

.foot_bottom .foot_bottom_m{width:640px;height: 57px;float: left;}

.foot_bottom .foot_bottom_m .up{width: 640px;height: 19px;margin-bottom:6px;color: #555;font-size: 12px;}

.foot_bottom .foot_bottom_m .up a{color: #555;}

.foot_bottom .foot_bottom_m .up a:hover{color: #ff6700;}

.foot_bottom .foot_bottom_m .up span{margin:0 0 0 2px;}

.foot_bottom .foot_bottom_m .down{width: 640px;height: 31px;font-size: 10px;}

.foot_bottom .foot_bottom_m .down span a{color: #757575;}

.foot_bottom .foot_bottom_m .down span a:hover{color: #ff6700;}

.foot_bottom .foot_bottom_m .down span{color:#555;}

.foot_bottom .foot_bottom_r{width:455px;height:57px;float:right;}

.foot_bottom .foot_bottom_r img{width: 83px;height: 28px;float:left;margin-left:8px;}

.slogan{font-size: 24px;font-family: '楷体';text-align: center;color: #ccc;padding-bottom:20px;}



最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网