入门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的一篇文 ...

随机推荐

Python3 tkinter基础 Text window 文本框中插入按钮
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
Java包装类介绍与类型之间相互转换
1.包装类存在的意义通俗解释就是由于Java是面对对象的语言,而基本类型不具有面对对象的概念,为了弥补不足,引入了包装类方便使用面对对象的变成思想操作基本类型. 2.基本类型和包装类对应关系 byt ...
用python计算圆周率
from random import randomfrom time import perf_counterDARTS = 1000 * 1000hits = 0.0start = perf_coun ...
eclipse 下修改Dynamic Web Modulle 的问题
上图右侧圈中位置有提示对应jdk版本. 若在eclipse修改Dynamic Web Modulle 为3.0失败,可以去项目工作空间文件中的.seting文件下修改: 上图对应的 <ins ...
kafka consumer 配置详解
1.Consumer Group 与 topic 订阅每个Consumer 进程都会划归到一个逻辑的Consumer Group中,逻辑的订阅者是Consumer Group.所以一条message ...
算法 set / multiset -- lower_bound()的二分搜索
lower_bound() 在数组中搜索时搜不到返回 .end(), 若需要返回0,用upper_bound()-lower_bound() 若要返回下一个下标则需要在set / multis ...
js-对象的重要概念
抽象抽象是通过特定的实例抽取共同特征以后形成概念的过程.它强调主要特征,忽略次要特征.一个对象是现实世界中一个实体的抽象. 对象三个特性 1.封装把客观事物封装成抽象的类,隐藏属性和方法的实现细节 ...
shell脚本while read line的使用
#### 题目要求计算文档a.txt中每一行中出现的数字个数并且要计算一下整个文档中一共出现了几个数字.例如a.txt内容如下:12aa*lkjskdjalskdflkskdjflkjj我们脚本名字为 ...
F1赛道 - Bahrain International Circuit | 巴林国际赛道
刚看完F1巴林站比赛,23点到1点,整整两个小时,比赛相当精彩. 从排位赛结果看,法拉利似乎肯定包揽1-2名,可惜天公不作美,今晚风大.沙多:vettel自己失误,鼻翼掉了,还在被汉密尔顿超车的时候自 ...
Linux重要命令总结
tar命令后面最常跟的参数 -zxvf 是什么意思? z 表示 tar 包是被 gzip 压缩过的,所以解压时需要用 gunzip 解压 x 从 tar 包中把文件提取出来,单词extract的含义是 ...

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

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

随机推荐

热门专题