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

随机推荐

利用JS模拟排队系统
我爱撸码,撸码使我感到快乐!大家好,我是Counter.今天给大家分享的是js模拟排队系统,刚开始有排队序列,序列里有vip用户和普通用户,vip用户永远位于普通用户的前面,只有当当前vip用户都办理 ...
Git学习笔记——分支
分支用法很多,比如bug修复,协作管理,这里只简单介绍我在工作中用到的协作模式. 场景:我自己开发独立功能,在本地为自己创建一个分支就叫localbranch吧,甭管master到哪了,我只管开发我的 ...
P3321 [SDOI2015]序列统计
思路首先有个挺显然的DP \[ dp[i][(j*k)\%m]+=dp[i-1][j]\times dp[i-1][k] \] 想办法优化这个DP 这个dp也可以写成这样 \[ dp[i][j]=\ ...
使用 pm2 优雅的部署 node 程序
使用 pm2 优雅的部署 node 程序 # 启动并监控名字为 XXX 的 npm run start:dev 命令 pm2 start npm --watch --name XXX -- run s ...
JQuery-FullCalendar 多数据源实现日程展示
背景本次需求:实现在一个以月为界面的日历上展示每天发生的事件. 1.每天的事件有多个类型,不同类型的事件使用不同背景色标注,展示为某个类型事件的统计,比如: 会议(6) 2.点击某一天可以查询改天所 ...
承接微信小程序外包 H5外包就找北京动点软件开发团队
承接小程序外包微信小程序外包 H5外包就找北京动点软件长年承接微信小程序.微信公众号开发全职的H5开发团队,开发过几十款微信小程序公众号案例欢迎来电咨询,索取案例! QQ:372900288 ...
centos用YUM装mysql笔记
安装的方法,参考:https://blog.csdn.net/jeffleo/article/details/53559712 注意事项: 1.上面教程中,关于设置密码的地方,SQL语句有误,单引号要 ...
[原][译]我们为什么需要另一个c++测试框架?Catch||Why do we need yet another C++ test framework?
翻译问题来源:https://github.com/catchorg/Catch2/blob/master/docs/why-catch.md 其他辅助博文:从Google Test 转到 Catch ...
第 10 章容器监控 - 080 - Weave Scope 容器地图
Weave Scope 容器地图 Weave Scope 的最大特点是会自动生成一张 Docker 容器地图,让我们能够直观地理解.监控和控制容器. 安装执行如下脚本安装运行 Weave Scope ...
什么是，session、cookies、token
在一片文章上看到关于cookies和session 的解释,大概意思是这样的. 说你去星巴克喝咖啡,你平均一星期去两次,你的操作是看菜单,点咖啡.结账加入你三星期不去,店员也许不及得你了,你依旧需要 ...

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

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

随机推荐

热门专题