入门html第一次copy小米首页布局

时间:2021-09-18 18:58:38

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{
margin: 0;18px 0 19px
padding: 0 20px;
}
/*第一部分*/
#nev{
border: 0px red solid;
background: #333;
font-size: 12px;
color: #b0b0b0;
padding: 0 20px;
margin: 0;
}
#nev .le{
margin: 10px 4px 4px;
float: left;
}
#nev .mull{border: 1px darkslategrey solid;}
#nev img{width: 20px;height: 20px;}
#nev .rig{
margin: 10px 4px 4px;
float: right;
}
#nev .mull{clear: both;}
/*第二部分*/
#title{
margin: 0 18px 0 19px;
height: 100px;
}
#mull2{
width: 127px;
height: 88px;
padding:0 15px 0 0 !important
}
#title2{padding: 12px 0 30px;}
#title2 .subtitle{
float: left;
font-size: 16px;
padding: 26px 10px 38px;
}

#title img{
width: 62px;
height: 55px;
margin: 22px 0 0;
padding: 0;
float:left;
background-image: url(img/mi-logo.png) no-repeat 50% 50%;
}
#inp{
width: 296px;
height: 50px;
border: 0;margin: 15px auto 0;padding: 0;
float: right;
}
#ints{
width: 223px;
height: 48px;
border: 1px black solid;
padding: 0 10px;
margin: 0;
float: left;
font-size: 12px;
text-align: end;
}
#ipbo{
width: 51px;
height: 50px;
border: 1px black solid;
padding: 1px 6px 1px;
margin: 0;
float: right;
background: white;
}
/*第三部分*/
#tab{
width: 234px;
height: 420px;
padding: 20px 0;margin:0;
float: left;
background-color:#757575;
}
#tab .tab1{
float: left;
width: 204px;height: 42px;
padding: 0 0 0 30px;border: 0;margin: 0;
font-size: 14px;color:white;
}
#tupian{
background-image:url(img/xmad_15203453835554_KlSJO.jpg) ;
width: 1226px;height: 460px;
border: 0;margin:0 18px 0 19px;padding: 0;
}
#tab span{
margin-right: 20px;
float: right;
font-weight:900;
color:lightgrey;
}
/*第四部分*/
#block1{
width: 1226px;height: 170px;
padding: 0;margin: 14px 18px 0 19px;border: 0;
}
#bk11{
width: 228px;height: 164px;
padding: 3px;margin: 0;border: 0px;
background-color: #5f5750;
float: left;
}
#bk12{
width: 978px;height: 170px;
padding: 0px;margin: 0;border: 0px;
float: right;
}
#bk12 span img{
width: 316px;height: 170px;
margin: 0 0 0 6px;border: 0;padding: 0;
}
#block1 table{
border: none;margin:0;padding: 0;
width:226px;height:160px;
}
/*第五部分*/
#mishan{
width: 1226px;height: 58px;
margin: 0 18px 0 19px;border: 0;padding: 0;
font-size: 22px;font-weight: 200;line-height: 58px;color: #333;
}
#block2{
width: 1240px;height: 340px;
border: 0;padding: 0;margin: 0 0 40px 19px;
}
#bk21{
width: 234px;height: 300px;
padding: 39px 0 0;border-top:1px red solid;margin:0 14px 0 0;
background-color: lightgray;
float: left;
text-align: center;
}
#timetl{width: 234px;height: 31px;padding-top: 15px;}
#bk21-tu{margin:25px 0 ;}
#bk21 span{font-size: 16px;color:gray;}
#bk21-time div{display:inline;color:grey;font-size: 30px;}
#bk22{
width: 234px;height: 300px;
padding: 39px 0 0;border-top:1px gold solid;margin:0 14px 0 0;
background-color: lightgray;
float: left;
text-align: center;
}
#bk22 img{width: 180px;height: 180px;margin-bottom: 20px;}
#bk22 dt{font-size: 12px;}
#bk22 dd{font-size: 8px;color:grey;margin-bottom: 10px;}
#bk22 div span{font-size: 12px;color: red;}
#bk22 div #price{color: gray;text-decoration: line-through;}
</style>
</head>
<body>
<div></div>
<div id="nev">
<div class="le">小米商城</div><span class="le">|</span>
<div class="le">MUI</div><span class="le">|</span>
<div class="le">loT</div><span class="le">|</span>
<div class="le">云服务</div><span class="le">|</span>
<div class="le">水滴</div><span class="le">|</span>
<div class="le">金融</div><span class="le">|</span>
<div class="le">有品</div><span class="le">|</span>
<div class="le">Sslect Region</div>
<div class="rig"><img src="img/timg.jpg"/>
<span>购物车(0)</span></div>
<div class="rig">消息通知</div><span class="rig">|</span>
<div class="rig">注册</div><span class="rig">|</span>
<div class="rig">登录</div>
<div class="mull"></div>
</div>
<div id="title">
<img src="img/u=1816174747,45560889&fm=27&gp=0.jpg"title="小米官网"/>
<div id="title2">
<dia class="subtitle" id="mull2"></dia>
<div class="subtitle">小米手机</div>
<div class="subtitle">红米</div>
<div class="subtitle">电视</div>
<div class="subtitle">笔记本</div>
<div class="subtitle">盒子</div>
<div class="subtitle">新品</div>
<div class="subtitle">路由器</div>
<div class="subtitle">智能硬件</div>
<div class="subtitle">服务</div>
<div class="subtitle">社区</div>
</div>
<div id="inp">
<input type="text" name="" id="ints" value="红米5 plus 小米note3" />
<input type="button" name="" id="ipbo" value="" />
</div>
</div>
<div id="tupian">
<div id="tab">
<div class="tab1">手机 电话卡<span>></span></div>
<div class="tab1">电视 盒子<span>></span></div>
<div class="tab1">笔记本<span>></span></div>
<div class="tab1">智能 家电<span>></span></div>
<div class="tab1">健康 家居<span>></span></div>
<div class="tab1">出行 儿童<span>></span></div>
<div class="tab1">路由器 手机配件<span>></span></div>
<div class="tab1">移动电源 插线板<span>></span></div>
<div class="tab1">耳机 音箱<span>></span></div>
<div class="tab1">生活 米兔<span>></span></div>
<div></div>
</div>
</div>
<div id="block1">
<div class="bok1" id="bk11">
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<th>选购手机</th>
<th>企业团购</th>
<th>F码通道</th>
</tr>
<tr>
<th>米粉卡</th>
<th>以旧换新</th>
<th>话费充值</th>
</tr>
</table>
</div>
<div class="bok1" id="bk12">
<span><img src="https://i1.mifile.cn/a4/xmad_15161045241735_hVDPK.jpg"/></span>
<span><img src="https://i1.mifile.cn/a4/xmad_15105678948104_wgfUJ.jpg"/></span>
<span><img src="https://i1.mifile.cn/a4/xmad_1515151060201_EhQzc.jpg"/></span>
</div>
</div>
<br />
<div id="mishan">小米闪购</div>
<div id="block2">
<div id="bk21">
<div id="timetl">18:00场</div>
<div id="bk21-tu"><img src="https://i1.mifile.cn/f/i/2018/mihome/flashpurchase.png"/></div>
<div><span>距离开始还有</span></div><br />
<div id="bk21-time">
<div class="time">03</div>
<div>:</div>
<div class="time">16</div>
<div>:</div>
<div class="time">30</div>
</div>
</div>
<div id="bk22">
<div><img src="https://i8.mifile.cn/b2c-mimall-media/931b85780643f39e64420ffce5d6db18.jpg" /></div>
<dt>小米MIX 2 6GB+64GB 黑色...</dt>
<dd>5.99"全面屏,骁龙835处理器</dd>
<div>
<span>2899元</span>
<span id="price">3299元</span>
</div>
</div>
<div id="bk22">
<div><img src="https://i8.mifile.cn/b2c-mimall-media/931b85780643f39e64420ffce5d6db18.jpg" /></div>
<dt>小米MIX 2 6GB+64GB 黑色...</dt>
<dd>5.99"全面屏,骁龙835处理器</dd>
<div>
<span>2899元</span>
<span id="price">3299元</span>
</div>
</div>
<div id="bk22">
<div><img src="https://i8.mifile.cn/b2c-mimall-media/931b85780643f39e64420ffce5d6db18.jpg" /></div>
<dt>小米MIX 2 6GB+64GB 黑色...</dt>
<dd>5.99"全面屏,骁龙835处理器</dd>
<div>
<span>2899元</span>
<span id="price">3299元</span>
</div>
</div>
<div id="bk22">
<div><img src="https://i8.mifile.cn/b2c-mimall-media/931b85780643f39e64420ffce5d6db18.jpg" /></div>
<dt>小米MIX 2 6GB+64GB 黑色...</dt>
<dd>5.99"全面屏,骁龙835处理器</dd>
<div>
<span>2899元</span>
<span id="price">3299元</span>
</div>
</div>
</div>
</body>
</html>

入门html第一次copy小米首页布局入门html第一次copy小米首页布局