<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小米商城</title>
<style>
body{
margin: 0;
}
.header{
background-color: black;
}
.container{
width: 1226px;
margin: 0 auto;
}
.header .menu{
float: left;
color: white;
height: 38px;
line-height: 38px;
}
.header .account{
float: right;
color: white;
height: 38px;
line-height: 38px;
}
.header a {
text-decoration: none;
position: relative;
z-index: 30;
height: 40px;
font-size: 12px;
color: #b0b0b0;
}
.container{
width: 1128px;
margin: 0 auto;
}
.sub-header{
width: 1226px;
height: 100px;
}
.sub-header .logo a{
text-decoration: none;
float:left;
width: 142px;
margin-top: 22px;
display: inline-block;
}
.sub-header .logo a img{
height: 56px;
width: 56px;
}
.sub-header .menu-list{
float:left;
line-height: 100px;
}
.sub-header .search{
line-height: 100px;
float: right;
}
.sub-header .menu-list a{
display: inline-block;
padding: 0 10px;
color: #333;
front-size:16px;
text-decoration: none;
}
.sub-header .menu-list a:hover{
color: #ff6700;;
}
.img-header{
width: 100%;
height: 100%;
}
.news .container{
width:316px;
height:170px;
}
.news .channel{
width:234px;
height:170px;
background-color: #ff6700;
}
.news .list-item{
width:316px;
height:170px;
}
</style>
</head>
<body>
<div class="header">
<div class="container">
<div class="menu">
<a href="https://www.mi.com/">小米官网</a>
<a href="https://www.mi.com/shop">小米商城</a>
<a href="https://hyperos.mi.com/">小米澎湃OS</a>
<a href="https://www.xiaomiev.com/">小米汽车</a>
<a href="https://i.mi.com/">云服务</a>
<a href="https://iot.mi.com/">loT</a>
<a href="https://www.xiaomiyoupin.com/">有品</a>
<a href="https://xiaoai.mi.com/">小爱开放平台</a>
<a href="https://www.mi.com/shop/aptitude/list?id=88">资质证照</a>
<a href="https://www.mi.com/shop/aptitude/list">协议规则</a>
<a href="https://www.mi.com/appdownload">下载app</a>
</div>
<div class="account">
<a href="">登录</a>
<a href="">注册</a>
<a href="">消息通知</a>
</div>
<div style="clear: both"></div>
</div>
</div>
<div class="sub-header">
<div class="container">
<!--加内边距 点空白也会属于其中一个 行内标签设置高度和宽度都是不生效的 要不用块级标签 还不用块级和行内结合-->
<div class="ht logo">
<a href="http://www.mi.com" style="margin-top:22px; display: inline-block">
<img src="../static/logo-mi2.png" style="height:56px;width: 56px;"alt="">
</a>
</div>
<div class="menu-list">
<a href="https://www.mi.com/shop">Xiaomi手机</a>
<a href="https://www.mi.com/shop">Redmi手机</a>
<a href="https://www.mi.com/shop">电视</a>
<a href="https://www.mi.com/shop">笔记本</a>
<a href="https://www.mi.com/shop">平板</a>
<a href="https://www.mi.com/shop">家电</a>
<a href="https://www.mi.com/shop">路由器</a>
<a href="https://www.mi.com/shop">服务中心</a>
<a href="https://www.mi.com/shop">社区</a>
</div>
<div class="search">
搜索框
</div>
</div>
</div>
<div class="img-header">
<div class="container"></div>
<img alt="" class="swiper-lazy swiper-lazy-loaded" src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c66412360b4581510445386d6133ed4f.png?thumb=1&w=2023&h=759&f=webp&q=90">
<img src="/static/a1.jpg" alt="">
</div>
<div class="home-hero-sub row"><div class="span4"><ul class="home-channel-list clearfix"><li><a target="_blank" href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search" data-spm="cms_10530.3480970.1" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagefeatures_entrance001001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.1" data-params="{"component":"six_icon","component_name":"【功能】功能入口","img":203877}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagefeatures_entrance001001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.1','https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48" alt="保障服务">
保障服务
</a></li> <li><a target="_blank" href="https://business.qiye.mi.com" data-spm="cms_10530.3480970.2" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagefeatures_entrance002001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.2" data-params="{"component":"six_icon","component_name":"【功能】功能入口","img":199065}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagefeatures_entrance002001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.2','https://business.qiye.mi.com','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/806f2dfb2d27978e33fe3815d3851fa3.png?w=48&h=48" alt="企业团购">
企业团购
</a></li> <li><a target="_blank" href="https://www.mi.com/order/fcode" data-spm="cms_10530.3480970.3" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagefeatures_entrance003001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.3" data-params="{"component":"six_icon","component_name":"【功能】功能入口","img":199067}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagefeatures_entrance003001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.3','https://www.mi.com/order/fcode','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/eded6fa3b897a058163e2485532c4f10.png?w=48&h=48" alt="F码通道">
F码通道
</a></li> <li><a target="_blank" href="https://10046.mi.com" data-spm="cms_10530.3480970.4" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagefeatures_entrance004001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.4" data-params="{"component":"six_icon","component_name":"【功能】功能入口","img":199068}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagefeatures_entrance004001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.4','https://10046.mi.com','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43a3195efa6a3cc7662efed8e7abe8bf.png?w=48&h=48" alt="米粉卡">
米粉卡
</a></li> <li><a target="_blank" href="//www.mi.com/a/h/16769.html" data-spm="cms_10530.3480970.5" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagefeatures_entrance005001#t=normal&act=other&page=homepage&page_id=10530&bid=3480970.5" data-params="{"component":"six_icon","component_name":"【功能】功能入口","img":199069}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagefeatures_entrance005001#t=normal&act=other&page=homepage&page_id=10530&bid=3480970.5','//www.mi.com/a/h/16769.html','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/f4846bca6010a0deb9f85464409862af.png?w=48&h=48" alt="以旧换新">
以旧换新
</a></li> <li><a target="_blank" href="https://recharge.10046.mi.com/" data-spm="cms_10530.3480970.6" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagefeatures_entrance006001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.6" data-params="{"component":"six_icon","component_name":"【功能】功能入口","img":199070}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagefeatures_entrance006001#t=normal&act=webview&page=homepage&page_id=10530&bid=3480970.6','https://recharge.10046.mi.com/','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9a76d7636b08e0988efb4fc384ae497b.png?w=48&h=48" alt="话费充值">
话费充值
</a></li></ul></div> <div class="span16"><ul id="J_homePromoList" class="home-promo-list clearfix"><li class="first"><a target="_blank" href="https://www.mi.com/shop/buy?product_id=19300" data-spm="cms_10530.3480925.1" data-scm="cms.0.0.0.product.19300.0.0" data-log_code="31pchomepagecells_auto_fill000001#t=ad&act=product&page=homepage&pid=19300&page_id=10530&bid=3480925.1&adp=3119&adm=36561" data-params="{"component":"three_line","component_name":"【广告】三拼","default_goods":"19300","img":876191}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagecells_auto_fill000001#t=ad&act=product&page=homepage&pid=19300&page_id=10530&bid=3480925.1&adp=3119&adm=36561','https://www.mi.com/shop/buy?product_id=19300','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/6b67117bc92924fb2ff0e7ad2be86084.png?w=632&h=340" alt=""></a></li> <li><a target="_blank" href="https://www.mi.com/shop/buy?product_id=10050036" data-spm="cms_10530.3480925.2" data-scm="cms.0.0.0.product.10050036.0.0" data-log_code="31pchomepagecells_auto_fill000001#t=ad&act=product&page=homepage&pid=10050036&page_id=10530&bid=3480925.2&adp=3118&adm=36209" data-params="{"component":"three_line","component_name":"【广告】三拼","default_goods":"10050036","img":853057}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagecells_auto_fill000001#t=ad&act=product&page=homepage&pid=10050036&page_id=10530&bid=3480925.2&adp=3118&adm=36209','https://www.mi.com/shop/buy?product_id=10050036','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8dede2520f8dfff9c9b690af498cafe8.jpg?w=632&h=340" alt=""></a></li> <li><a target="_blank" href="https://www.mi.com/xiaomibuds4pro" data-spm="cms_10530.3480925.3" data-scm="cms.0.0.0.0.0.0.0" data-log_code="31pchomepagecells_auto_fill000001#t=ad&act=webview&page=homepage&page_id=10530&bid=3480925.3&adp=3117&adm=36211" data-params="{"component":"three_line","component_name":"【广告】三拼","img":853845}" data-settrack="true" onclick="_msq.push(['trackEvent','31pchomepagecells_auto_fill000001#t=ad&act=webview&page=homepage&page_id=10530&bid=3480925.3&adp=3117&adm=36211','https://www.mi.com/xiaomibuds4pro','""']);"><img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/1ac77590368ff636d0b4f6a988133f55.png?w=632&h=340" alt=""></a></li></ul></div></div>
</body>
</html>
笔记：
1.浏览器能识别的标签
提供render template模版
submit为post请求
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>用户注册</h1> <form method="post" action="/register"> <div> 用户名:<input type="text" name="user"/> </div> <div> 密码:<input type="password" name="password"/> </div> <div> 性别: <input type="radio" name="gender" value="1">男 <input type="radio" name="gender" value="2">女 </div> <div> 爱好： <input type="checkbox" name="hobby" value="10"> 篮球 <input type="checkbox" name="hobby" value="20"> 乒乓球 <input type="checkbox" name="hobby" value="30"> 羽毛球 <input type="checkbox" name="hobby" value="40"> 足球 <input type="checkbox" name="hobby" value="50"> 跑步 </div> <div> 城市： <select name="city" > <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select> </div> <div> 擅长的领域： <select multiple name="Proficient"> <option value="C++">C++</option> <option value="Python">Python</option> <option value="Unity">Unity</option> <option value="Java">Java</option> </select> </div> <div> 备注： <textarea name="Remarks"> </textarea> </div> <input type="submit" value="submit按钮"> </form> </body> </html
2.CSS标签
2.1.标签的三种使用方
很少直接在标签上写style
开发一个简单的页面可选
适合于写很多的页面（多个html），别人写好的css，直接把他们的文件引入使用
2.2.flask中的应用
见代码
2.3.CSS选择器
类选择器用的最多
整个html id=什么，只能存在一个。
标签选择器会让所有标签的格式都加上
多个style和覆盖，无重复都会生效，有重复，应用style定义下面的
！important;即使重复也不会覆盖
2.4具体样式
1.高度和宽度
行内自己占多少就占多少，块级霸道必须占满宽。
2.块和行内互换
既具有块级标签可以调height和width的特性，也具有行内标签一个多个的特性。有很多情况需要 display: inline-block
块级标签变成行内标签，行内标签变成块级标签
3.字体和颜色
颜色 大小 加粗 字体格式
4.文字对齐方式
水平方向居中
5.浮动
块级标签float起来，自己占多宽就有多宽
如果你让标签浮动起来之后，就会脱离文档流。
没办法把父亲撑开，父亲是没有高度，div下参数背景颜色为父亲，子女浮动（就是父亲标签div里面的background-color不会生效 除非加上clear：both）
加上claer： both 原来脱离文档流的会回归
如果再加一个，就仍会脱离着。
应该是在浮动的最后 clear：both。
<!--a标签行内标签 默认设置高度 边距无效-->
