css六

着手写静态页面。

仿页面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%20note7.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">&#xe715;</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当中 

不能一直去模仿别人

要懂得属性的作用

哪里该用   该用什么

用什么方便   加深一下记忆

总体来说

做的太慢太慢   自己一定想办法要去提高效率