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

<!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小米首页布局的更多相关文章

SharePoint Online 创建门户网站系列之首页布局
前言 SharePoint Online中创建首页布局,一般都是首先将美工提供的效果图,切图成为Html + Css + Script的形式,然后,将所有资源文件传到SharePoint Onlin ...
[翻译]Orchard-修改首页布局
前言 Orchard在你的站点应用的默认主题叫做”Theme Machine”.该主题包括CSS样式和一个布局框架. Orchard 允许你选择或排除显示在你站点每个页面的布局. 默认情况下下图中蓝色 ...
Easyui入门视频教程第04集---Easyui布局
目录目录 ----------------------- Easyui入门视频教程第09集---登录完善图标自定义 Easyui入门视频教程第08集---登录实现 ajax button的 ...
Easyui入门视频教程第03集---Easyui布局
Easyui入门视频教程第03集---Easyui布局目录 ----------------------- Easyui入门视频教程第09集---登录完善图标自定义 Easyui入门视频教 ...
海盗船长小米首页小船来回摆动CSS3.0效果
海盗船长小米首页小船来回摆动CSS3.0效果,偶然之间看到的,就写了一个. <!DOCTYPE html> <html lang="en"> <hea ...
IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
01-02 Flutter仿京东商城项目功能分析、底部导航Tab切换以及路由配置、架构搭建：(Flutter仿京东商城项目首页布局以及不同终端屏幕适配方案)
Flutter和Dart交流学习群:交流群:452892873 01Flutter仿京东商城项目功能分析.底部导航Tab切换以及路由配置.架构搭建 02Flutter仿京东商城项目首页布局以及不同 ...
无废话SharePoint入门教程五[创建SharePoint页面布局]
一.前言文章成体系,如果有不明白的地方请查看前面的文章. 二.目录 1.创建页面布局 2.首次使用页面布局 3.修改页面布局 4.使用页面布局 5.最终效果 1.创建页面布局 (1)打开设计管理器, ...
Sagit.Framework For IOS 开发框架入门教程4：注册页布局-被消灭的变量
前言: 上篇写完:Sagit.Framework For IOS 开发框架入门教程3:Start引导页-框架布局和隐藏事件的内幕之后,好久没写文章了,有IT连创业系列.有DotNetCore的一篇文 ...

随机推荐

centos, ubuntu 上docker 安装
参考中国官网,可以愉快的访问,各种系统,在线/离线部署都有说明.中文哦!! https://docs.docker-cn.com/engine/installation/linux/docker-ce ...
关于Struts2自动装配和访问Servlet API
自动装配 1.根据属性的getter和setter获取值 index.jsp <s:form action="hello" method="POST"& ...
Linux之磁盘分区
一.基础知识 1.磁盘分区磁盘的分区主要分为基本分区(primary partion)和扩充分区(extension partion)两种,基本分区和扩充分区的数目之和不能大于四个.且基本分区可以马 ...
分布式拒绝服务攻击(DDoS:Distributed Denial of Service)
DDoS攻击通过大量合法的请求占用大量网络资源,以达到瘫痪网络的目的. 指借助于客户/服务器技术,将多个计算机联合起来作为攻击平台,对一个或多个目标发动DDoS攻击,从而成倍地提高拒绝服务攻击的威力. ...
curl提交请求时，如何把cookie带过去
curl请求有一个CURLOPT_COOKIE参数,把获取到的cookie内容,通过字符串组装,赋值给这个参数就可以了例子: $defaults = array( CURLOPT_URL =&g ...
在Vue项目中选择图片并预览
最近开始使用vue做项目在这个过程中,碰到了大多数做前端肯定经历的一个问题,就是文件上传预览花了点时间解决,因此分享一下预览功能的解决方案页面: <div class="sele ...
node中 path.resolve 和path.join的区别
path.resolve('a','b','c') 返回a/b/c path.resolve理论上总是以前一个路径作为基础路径,然后匹配当前路径,当前路径会有三种情况根目录(/),当前目录(./),上 ...
【ybt1252】走迷宫
(还是蛮经典的一道bfs) 显然算法bfs [传送门] 算法基本上算是bfs的模板了,(模板详见[新知识]队列&bfs[洛谷p1996约瑟夫问题&洛谷p1451求细胞数量]) #inc ...
.net压缩文件夹
1,引用:using System.IO.Packaging; 2,压缩文件的方法: /// <summary> /// 压缩文件夹到制定的路径 /// </summary> ...
美团2017年CodeM大赛-初赛B轮-黑白树
https://ac.nowcoder.com/acm/problem/13249 链接:https://ac.nowcoder.com/acm/problem/13249来源:牛客网题目描述一棵 ...

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

入门html第一次copy小米首页布局的更多相关文章

随机推荐

热门专题