Pythonweb 小米商城案例 html/css知识点总结
迪小莫学AI 2024-06-15 13:33:03 阅读 59
<!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标签行内标签 默认设置高度 边距无效-->
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。