着手写静态页面。
仿页面1:1效果
把之前学到的html和css结合运用
<div class="site-topbar"> <div class="container"> <div class="topbar-nav"> <a>小米商城</a> <span class="sep">|</span> <a>MIUL</a> <span class="sep">|</span> <a>loT</a> <span class="sep">|</span> <a>云服务</a> <span class="sep">|</span> <a>金融</a> <span class="sep">|</span> <a>有品</a> <span class="sep">|</span> <a>小爱开放平台</a> <span class="sep">|</span> <a>企业团购</a> <span class="sep">|</span> <a>资质证照</a> <span class="sep">|</span> <a>协议规则</a> <span class="sep">|</span> <a>下载app</a> <span class="sep">|</span> <a>Select Region</a> </div> <div class="topbar-info"> <a class="link">登录</a> <span class="sep">|</span> <a class="link">注册</a> <span class="sep">|</span> <span class="message"> <a>消息通知</a> </span> </div> <div class="topbar-cart"> <a class="shop"> <i class="iconfont icon-gouwuchekong" ></i> 购物车 <span>(0)</span> </a> </div> </div> </div> <div class="site-header"> <div class="container"> <div class="header-logo"> <a class="logo ir"></a> </div> <div class="header-nav"> <div class="nav-list"> <a class="nav-item">小米手机</a> <a class="nav-item">红米</a> <a class="nav-item">电视</a> <a class="nav-item">笔记本</a> <a class="nav-item">家电</a> <a class="nav-item">新品</a> <a class="nav-item">路由器</a> <a class="nav-item">智能硬件</a> <a class="nav-item">服务</a> <a class="nav-item">社区</a> </div> <div class="header-search"> <input type="text" name="cearch" placeholder="小米9" class="header-search-nav"> <div class="search"></div> </div> </div> </div> </div> <div class="content"> <div class="home-hero-container container"> <div class="home-hero"> <div class="hero"> <div class="hero-nav">手机 电话卡</div> <div class="hero-nav">电视 盒子</div> <div class="hero-nav">笔记本 平板</div> <div class="hero-nav">家电 插线板</div> <div class="hero-nav">出行 穿戴</div> <div class="hero-nav">智能 路由器</div> <div class="hero-nav">电源 配件</div> <div class="hero-nav">健康 儿童</div> <div class="hero-nav">耳机 音箱</div> <div class="hero-nav">生活 箱包</div> </div> <img src="img/lunbotu1.jpg" class="lunbotu"> </div> </div> <div class="home-hero-sub container"> <div class="span4"> <div class="span-van"></div> <div class="span-van"></div> <div class="span-van"></div> <div class="span-van"></div> <div class="span-van"></div> <div class="span-van"></div> </div> <div class="span16"> <div class="span16-nav"> <img src="img/redmi note7.jpg" class="span16-nav"> </div> <div class="span16-nav"> <img src="img/redmi7.jpg" class="span16-nav"> </div> <div class="span16-nav"> <img src="img/xiaomi3shouhuan.jpg" class="span16-nav"> </div> </div> </div> <div class="home-banner-box container"> <div class="home-banner"> <img src="img/xiaomijiuse.jpg" class="home-banner"> </div> </div> <div class="page-main home-main"> <div class="container"> <div class="home-brick-box"> <div class="box-hd"> <h2 class="title">手机</h2> <div class="more">查看全部</div> </div> <div class="box-bd"> <div class="row"> <div class="box-span4"> <img src="img/heisha.jpg" class="box-span4"> </div> <div class="box-span16"> <div class="brick-list"> <img src="img/xm9-1.jpg" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-2.jpg" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-3.jpg" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-4.png" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-5.jpg" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-6.jpg" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-7.jpg" class="brick-list"> </div> <div class="brick-list"> <img src="img/xm9-8.jpg" class="brick-list"> </div> </div> </div> </div> <div class="J_itemBox"> <div class="J_item"> <img src="img/xiaomidianshi.jpg" class="xmds"> </div> </div> <div class="homeelec"> <div class="box-hd"> <h2 class="title">家电</h2> <div class="more-nav"> <div class="tab-linst">热门</div> <div class="tab-linst">电视影音</div> <div class="tab-linst">电脑</div> <div class="tab-linst">家居</div> </div> </div> <div class="box-bd"> <div class="row"> <div class="j-span4"> <div class="j-span4-van"> <img src="img/xiaomijingshuiqi.jpg" class="j-span4-van"> </div> <div class="j-span4-van"> <img src="img/mijiasaodijiqiren.jpg" class="j-span4-van"> </div> </div> <div class="j-span16"> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> </div> <div></div> </div> </div> </div> <div class="J_itemBox"> <div class="J_item"> <img src="img/mitudbd.jpg" class="xmds"> </div> </div> <div class="homeelec"> <div class="box-hd"> <h2 class="title">智能</h2> <div class="more-nav"> <div class="tab-linst">热门</div> <div class="tab-linst">出行</div> <div class="tab-linst">健康</div> <div class="tab-linst">酷玩</div> <div class="tab-linst">路由器</div> </div> </div> <div class="box-bd"> <div class="row"> <div class="j-span4"> <div class="j-span4-van"> <img src="img/mijiazhinengshexiangtou.jpg" class="j-span4-van"> </div> <div class="j-span4-van"> <img src="img/diandonghuabanche.jpg" class="j-span4-van"> </div> </div> <div class="j-span16"> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> </div> <div></div> </div> </div> </div> <div class="J_itemBox"> <div class="J_item"> <img src="img/xiaomibijibenar.jpg" class="xmds"> </div> </div> <div class="homeelec"> <div class="box-hd"> <h2 class="title">搭配</h2> <div class="more-nav"> <div class="tab-linst">热门</div> <div class="tab-linst">耳机音响</div> <div class="tab-linst">电源</div> <div class="tab-linst">电池充电器</div> </div> </div> <div class="box-bd"> <div class="row"> <div class="j-span4"> <div class="j-span4-van"> <img src="img/jiuhaopinghengche.jpg" class="j-span4-van"> </div> <div class="j-span4-van"> <img src="img/dinglingzhinengmenling.jpg" class="j-span4-van"> </div> </div> <div class="j-span16"> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> </div> <div></div> </div> </div> </div> <div class="J_itemBox"> <div class="J_item"> <img src="img/mijiahuliankongtiao.jpg" class="xmds"> </div> </div> <div class="homeelec"> <div class="box-hd"> <h2 class="title">配件</h2> <div class="more-nav"> <div class="tab-linst">热门</div> <div class="tab-linst">保护套</div> <div class="tab-linst">贴膜</div> <div class="tab-linst">其他配件</div> </div> </div> <div class="box-bd"> <div class="row"> <div class="j-span4"> <div class="j-span4-van"> <img src="img/lanyaerjiai.jpg" class="j-span4-van"> </div> <div class="j-span4-van"> <img src="img/mijiazidongxishouji.jpg" class="j-span4-van"> </div> </div> <div class="j-span16"> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> </div> <div></div> </div> </div> </div> <div class="J_itemBox"> <div class="J_item"> <img src="img/mijiawuxianxichenqi.jpg" class="xmds"> </div> </div> <div class="homeelec"> <div class="box-hd"> <h2 class="title">周边</h2> <div class="more-nav"> <div class="tab-linst">热门</div> <div class="tab-linst">出行</div> <div class="tab-linst">居家</div> <div class="tab-linst">生活周边</div> <div class="tab-linst">箱包</div> </div> </div> <div class="box-bd"> <div class="row"> <div class="j-span4"> <div class="j-span4-van"> <img src="img/fenkuanglvxingxiang.jpg" class="j-span4-van"> </div> <div class="j-span4-van"> <img src="img/xiaomibeibao.jpg" class="j-span4-van"> </div> </div> <div class="j-span16"> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> <div class="j-span16-van"></div> </div> <div></div> </div> </div> </div> <div class="recommend"> <div class="box-hd"> <h2 class="title">为你推荐</h2> </div> <div class="box-bd"> <div class="recommend-bd"></div> <div class="recommend-bd"></div> <div class="recommend-bd"></div> <div class="recommend-bd"></div> <div class="recommend-bd"></div> </div> </div> <div class="rp-comment"> <div class="box-hd"> <h2 class="title">热评产品</h2> </div> <div class="rp-box-bd"> <div class="rp-box-bd-van"></div> <div class="rp-box-bd-van"></div> <div class="rp-box-bd-van"></div> <div class="rp-box-bd-van"></div> </div> </div> <div class="nr-comment"> <div class="box-hd"> <h2 class="title">内容</h2> </div> <div class="nr-box-bd"> <div class="nr-box-bd-nav"></div> <div class="nr-box-bd-nav"></div> <div class="nr-box-bd-nav"></div> <div class="nr-box-bd-nav"></div> </div> </div> <div class="sp-comment"> <div class="box-hd"> <h2 class="title">视频</h2> </div> <div class="sp-box-bd"> <div class="sp-box-bd-nav"></div> <div class="sp-box-bd-nav"></div> <div class="sp-box-bd-nav"></div> <div class="sp-box-bd-nav"></div> </div> </div> </div> </div> </div> </div> <div class="bottom"> <div class="footer-service"> <ul class="list-service"> <li class="list-service-nav"> <i class="iconfont icon-weixiu"></i> <a>预约维修服务</a> </li> <li class="list-service-nav"> <a>7天无理由退货</a> </li> <li class="list-service-nav"> <a>15天免费换货</a> </li> <li class="list-service-nav"> <a>满150包邮</a> </li> <li class="list-service-nav"> <a>520余家售后网点</a> </li> </ul> </div> <div class="footer-links"> <div class="footer-links-nav"> <ul class="d1"> <li class="dd"> <a>帮助中心</a> </li> <li class="dt"> <a>账户管理</a> </li> <li class="dt"> <a>购物指南</a> </li> <li class="dt"> <a>订单操作</a> </li> </ul> <ul class="d1"> <li class="dd"> <a>服务支持</a> </li> <li class="dt"> <a>售后政策</a> </li> <li class="dt"> <a>自助服务</a> </li> <li class="dt"> <a>相关下载</a> </li> </ul> <ul class="d1"> <li class="dd"> <a>线下门店</a> </li> <li class="dt"> <a>小米之家</a> </li> <li class="dt"> <a>服务网点</a> </li> <li class="dt"> <a>授权体验店</a> </li> </ul> <ul class="d1"> <li class="dd"> <a>关于小米</a> </li> <li class="dt"> <a>了解小米</a> </li> <li class="dt"> <a>加入小米</a> </li> <li class="dt"> <a>投资者关系</a> </li> </ul> <ul class="d1"> <li class="dd"> <a>关注我们</a> </li> <li class="dt"> <a>新浪微博</a> </li> <li class="dt"> <a>官方微信</a> </li> <li class="dt"> <a>联系我们</a> </li> </ul> <ul class="d1"> <li class="dd"> <a>特色服务</a> </li> <li class="dt"> <a>F 码通道</a> </li> <li class="dt"> <a>礼物码</a> </li> <li class="dt"> <a>防伪查询</a> </li> </ul> <div class="col"> <p class="phone">400-100-5678</p> <p class="phone-1">周一至周日 8:00-18:00 <br> （仅收市话费） </p> <a class="btn"> <i class="iconfont"></i> 联系客服 </a>截取一部分 在做的过程中进度太慢 出现返工现象
自己有点疑惑 很多细节注意不到
屏幕分辨率 定死宽高啊
class取名感觉还是不够好
划分的区域可能还不太够细致
手还是很生疏 应该做到哪里做成什么样
立马想到改用什么方法 标签 属性 等
提高自己的做事效率
body{ margin: 0; padding: 0; } .site-topbar{ width:100%; height:40px; background-color:#333; position: relative; font-size: 12px; color:#b0b0b0; } .container{ width:1226px; height: 100%; margin-left: auto; margin-right: auto; display: flex; } .topbar-nav{ width: 100%; line-height:40px; float: left; } .sep{ margin: 0.25em; font-family: sans-serif; } .topbar-cart{ width: 120px; margin-left: 15px; position: relative; float: right; height: 40px; } .topbar-info{ width: 170px; line-height: 40px; } .topbar-cart{ width: 120px; line-height: 40px; } .shop{ display: block; height: 40px; line-height: 40px; text-align: center; color: #b0b0b0; background: #424242; } .site-header{ position: relative; z-index: 20; height: 100px; } .site-header.container{ width: 1226px; margin-right: auto; margin-left: auto; } .header-logo{ width:55px; height: 55px; background:url("../img/logo.png"); float: left; margin-top: 22px; } .site-header .logo{ position: relative; display: block; width: 55px; height: 55px; overflow: hidden; } .site-header.header-nav{ float: left; width: 850px; } .header-nav{ margin-left: 200px; display: flex; display: -webkit-flex; -webkit-justify-content: space-around; align-items: center; } .nav-list{ position: relative; z-index: 10; float: left; width: 820px; height: 88px; display: flex; display: -webkit-flex; -webkit-justify-content: space-between; align-items: center; } .site-header.nav-list>a { display: list-item; text-align: -webkit-match-parent; } .nav-item{ padding: 0px; height: 17.6px; } .header-search{ width: 303px; font-family: 'Microsoft YaHei'; font-size: 14px; float: right; } .nav-search>input{ width: 245px; border: 1px solid #e2e2e2; height: 52px; float:right; } .header-search-nav{ width: 245px; height: 48px; } .search{ width: 52px; height: 52px; border: 1px solid #e2e2e2; text-align: center; line-height: 32px; cursor: pointer; float: right; } .home-hero-container{ position: relative; z-index: 10; } .home-hero{ position: relative; margin-bottom: 26px; } .lunbotu{ width: 1226px; height: 460px; } .hero{ width: 234px; height: 460px; background-color: #d3d3d31f; position: absolute; z-index: 21; font-size: 14px; } .hero-nav{ width: 234px; height: 42px; padding: 0 0 4px 12px ; } .home-hero-sub{ width: 1226px; height: 203px; display: flex; } .span4{ width: 234px; height: 170px; background-color: #24ff00; display:flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; align-items: center; } .span16{ width: 978px; height: 170px; background-color: #8339ff; display:flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; } .span-van{ width: 76px; height: 82px; background-color: #9b91ff; } .span16-nav{ width: 316px; height: 170px; background-color: #24ff00; } .home-banner-box{ width:1226px; height: 173px; } .home-banner{ width: 1226px; height: 120px; background-color: #ff3ba8; } .page-main{ background-color: #f5f5f5; height: 6819px; } .home-brick-box{ width: 1226px; height: 285px; background-color: #ffdf00; } .box-hd{ display: flex; justify-content: space-between; align-items: center; } .box-hd>title{ margin: 0; font-size: 22px; font-weight: 200; line-height: 58px; color: #333; } .row{ background-color: #ffe155; display: flex; justify-content: space-between; } .box-bd{ width: 1226px; height: 628px; background-color: #84ff00; } .box-span4{ width: 234px; height: 628px; background-color: #0395e1; } .box-span16{ width: 978px; height:628px; background-color: #ff3ba8; display:flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; align-items: center; } .brick-list{ width: 234px; height: 300px; background-color: #0013ff; } .J_itemBox{ width: 1226px; height: 120px; margin: 28px 0 22px; background-color: #ff3543; } .xmds{ width: 1226px; height: 120px; } .homeelec{ width: 1226px; height: 702px; background-color: #fff69f; } .more-nav{ width: 280px; height: 40px; display: flex; justify-content: space-between; align-items: center; } .j-span4{ width: 234px; height: 628px; background-color: #cb00ff; display: flex; flex-flow: row wrap; align-content: space-between; } .j-span4-van{ width: 234px; height: 300px; background-color: #404040; } .j-span16{ width: 978px; height:628px; background-color: #ff3ba8; display:flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; justify-content: space-around; align-items: center; } .j-span16-van{ width: 234px; height: 300px; background-color: #ffdf00; } .recommend{ width: 1226px; height: 358px; background-color: aqua; margin: 30px 0; } .recommend>.box-bd{ width: 1226px; height: 320px; background-color: #93ff79; display: flex; justify-content: space-around; align-items: center; } .recommend-bd{ width: 234px; height: 300px; background-color: #00c1ff; } .rp-comment{ width: 1226px; height: 473px; background-color: #00ff25; } .rp-box-bd{ width: 1226px; height: 415px; background-color: #ff3800; display: flex; justify-content: space-around; align-items: center; } .rp-box-bd-van{ width: 296px; height: 415px; background-color: #ffa1e5; } .nr-box-bd{ width: 1226px; height: 420px; background-color: #fff69f; display: flex; justify-content: space-around; align-items: center; } .nr-box-bd-nav{ width: 296px; height: 420px; background-color: #feff00; } .sp-comment{ width: 1226px; height: 343px; background-color: #00ff6c; } .sp-box-bd{ width: 1226px; height: 285px; background-color: #ff3ba8; display: flex; justify-content: space-around; align-items: center; } .sp-box-bd-nav{ width: 296px; height: 285px; background-color: white; } .bottom{ width: 100%; height: 272px; } .footer-service{ width: 1226px; margin: 0 auto; display: flex; justify-content: space-around; border-bottom: 1px solid #e0e0e0; } .list-service{ list-style: none; display: flex; justify-content: space-around; padding: 20px 0; } .list-service-nav{ float: left; width: 130px; height: 25px; border-left: 1px solid #e0e0e0; font-size: 16px; line-height: 25px; text-align: center; padding: 0 60px; } .site-info{ width: 100%; height: 229.8px; background-color: #00c1ff; } .footer-links{ width: 1226px; margin:0 auto; } .d1{ list-style: none; } .footer-links-nav{ display: flex; justify-content: space-between; align-items: center; } .dd{ font-size: 16px; padding: 0 0 20px 0; } .dt{ font-size: 13px; color: #757575; padding: 0 0 10px 0; } .col{ float: right; width: 251px; height: 112px; border-left: 1px solid #e0e0e0; text-align: center; color: #616161; } .phone{ margin: 0 0 5px; font-size: 22px; line-height: 1; color: #ff6700; } .phone-1{ margin: 0 0 16px; font-size: 12px; } .btn{ background: #fff; color: #ff6700; border: 1px solid #b0b0b0; display: inline-block; width: 158px; height: 38px; border-color: #ff6700; padding: 0; margin: 0; align-items: center; }css当中
不能一直去模仿别人
要懂得属性的作用
哪里该用 该用什么
用什么方便 加深一下记忆
总体来说
做的太慢太慢 自己一定想办法要去提高效率
转载于:https://www.cnblogs.com/zhangzongke/p/10952710.html
