【前端】web小白实战之--小米商城(二)

前言

        续上一部分的内容,这次来到我们下半部分的实现,下半部分还有轮播广告区、商品分类展示、促销模块、页脚信息等。

4.轮播广告区

        该部分我们可以看到页面结构容器里面包含轮播的广告区和底部的一个广告区,其容器的包含情况如下图。(黑色为内框,蓝色为外框,红色为最外框)。

        

        其html结构如下

   <div class="banner">
        <div class="top"><!--上边部分-->

        </div>
        <div class="bottom"><!--下边部分-->

        </div>

    </div>

        我们先来实现上边部分的轮播广告区,但是目前还不能实现轮播效果,等运用上javascript的时候才能实现轮播效果。我们先来搭建静态的html结构,HTML结构采用div嵌套方式,外层为轮播容器,内层包含图片列表,其中导航栏里面的导航条使用无序列表实现,如下所示,其中warp类容器在写白色导航栏的时候有对其进行定义(让容器内元素实现页面居中)。

实现了以上的布局之后我们要对其样式进行调整,关于容器的高度宽度,可以参考官网或者自行调整。图片我们可以直接给他一个类,单独对他宽度高度进行调整;左侧导航栏可以对其添加一个绝对定位,给warp容器添加一个相对定位,使其分布在容器的左侧。如下所示

.slide{
    width: 234px;
    height: 420px;
    padding: 20px 0;
    left: 0;
    top: 0;
    background-color: rgba(105, 101, 101, 0.6);
    position: absolute;
}
.banner .top .warp{
    position: relative;/*设置相对位置,使左侧的导航栏对其进行定位*/
}

导航栏右侧的悬浮滑动门的html结构是在对应的列表里面嵌套一个div容器,容器里存放商品的图片和价格,如下所示:

 <li>
                            <a href="">手机<i class="iconfont icon-arrow-right-s-line"></i></a>
                            <!--悬浮栏-->
                            <div class="slide-list">
                                <ul class="slide-list-ul">
                                    <li>
                                        <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">
                                            <img src="image/182d59037498cad87202c36e1a8ea23c.webp" alt="" >
                                            <span>Xiaomi数字旗舰</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">
                                            <img src="image/c15a3d1b4e8bf2af17e6b5ad5559cfcb.webp" alt="" >
                                            <span>Redmi数字系列</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>

实现了其html结构之后怎么实现滑动效果呢?跟白色导航栏的滑动门实现原理一样,在未悬浮时使其高度或者宽度为0,紧接着设置在悬浮时重置他的高度和宽度;或者在未悬浮时设置其display为none,在悬浮时重置为block。

整个轮播广告页面的html结构参考如下:
  <div class="top">
            <div class="warp">
                <img class="main-img" src="image/144cc7e6d9ae79310d1cd8b1a2bf2db7.webp" alt="">
                <div class="slide"><!--左侧导航栏-->
                    <ul class="slide-ul">
                        <li>
                            <a href="">手机<i class="iconfont icon-arrow-right-s-line"></i></a>
                            <!--悬浮栏-->
                            <div class="slide-list">
                                <ul class="slide-list-ul">
                                    <li>
                                        <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">
                                            <img src="image/182d59037498cad87202c36e1a8ea23c.webp" alt="" >
                                            <span>Xiaomi数字旗舰</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">
                                            <img src="image/c15a3d1b4e8bf2af17e6b5ad5559cfcb.webp" alt="" >
                                            <span>Redmi数字系列</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="">电视<i class="iconfont icon-arrow-right-s-line"></i></a>
                            <div class="slide-list">
                                <ul class="slide-list-ul">
                                    <li>
                                        <a href="https://www.mi.com/shop/buy?product_id=10050111">
                                            <img src="image/e831b62c0f720a7b038bff519ab29676.webp" alt="" >
                                            <span>旗舰系列</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li>
                            <a href="">家电<i class="iconfont icon-arrow-right-s-line"></i></a>
                            <div class="slide-list-all">
                                <ul class="slide-list-ul">
                                    <li>
                                        <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">
                                            <img src="image/182d59037498cad87202c36e1a8ea23c.webp" alt="" >
                                            <span>Xiaomi数字旗舰</span>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="https://www.mi.com/shop/search?keyword=xiaomi%E6%95%B0%E5%AD%97%E7%B3%BB%E5%88%97">
                                            <img src="image/c15a3d1b4e8bf2af17e6b5ad5559cfcb.webp" alt="" >
                                            <span>Redmi数字系列</span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </li>
                        <li><a href="">笔记本<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                        <li><a href="">出行穿戴<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                        <li><a href="">耳机音箱<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                        <li><a href="">健康儿童<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                        <li><a href="">生活箱包<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                        <li><a href="">智能路由器<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                        <li><a href="">电源配件<i class="iconfont icon-arrow-right-s-line"></i></a></li>
                    </ul>

                </div>
            </div>
        </div>
参考的css样式如下:
/**banner*/
.banner{
    width:100%;
    height: 670px;
    overflow: hidden;/*超出部分隐藏*/
    position: relative;
}
.top{
    width: 100%;
    height: 460px;
    overflow: hidden;
}
.top .warp .main-img{
    width: 1226px;
}
.slide ul {
    padding: 0;
    margin: 0;
}
.banner .top .warp .slide-ul>li {
    height: 42px;
    line-height: 42px;
    font-size: 14px;
    text-align: left;
    padding-left: 20px;
    list-style: none;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.banner .top a{
    text-decoration: none;
    color: #fff;
}
.slide i{
    float: right;
    margin-right: 20px;
}
.slide>ul>li:hover{
    background-color: #ff6700;
    width: 100%;
}

.slide{
    width: 234px;
    height: 420px;
    padding: 20px 0;
    left: 0;
    top: 0;
    background-color: rgba(105, 101, 101, 0.6);
    position: absolute;
}
.banner .top .warp{
    position: relative;/*设置相对位置,使左侧的导航栏对其进行定位*/
}
.slide-list{
    /*kuan度为1226-234*/
    width: 496px;
    height: 460px;
    background: #fff;
    border-left:1px solid #e0e0e0;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    position: absolute;
    top: 0;
    left: 234px;
    display: none;
}
.slide-list-all{
    /*kuan度为1226-234*/
    width: 992px;
    height: 460px;
    background: #fff;
    border-left:1px solid #e0e0e0;
    box-sizing: border-box;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.18);
    position: absolute;
    top: 0;
    left: 234px;
    display: none;
}

.slide-list ul,.slide-list-all ul{
    width: 100%;
    height: 458px;
    margin: 0;
    list-style: none;
}
.slide-list-ul li{
     width: 265px;
    height: 76px;
    float: left;
    padding: 18px 0 18px 20px;
    box-sizing: border-box;
    line-height: 76px;

}
.slide-list ul a,.slide-list-all ul a{
    width: 240px;
    height: 76px;
    float: left;
    padding: 18px 0 18px 20px;
    box-sizing: border-box;
    line-height: 76px;
    display: flex;
    align-items: center; /* 垂直居中 */
}
.slide-list img,.slide-list-all img{
    width: 40px;
    height: 42px;
    margin-right: 10px;
    float: left;
    vertical-align: middle;

     
}
.slide-list span,.slide-list-all span{
    color: #333;
    line-height: 40px;
    width: 172px;
    float: left;

}
.slide>ul>li:hover>.slide-list{
    display: block;
}
.slide>ul>li:hover>.slide-list-all{
    display: block;
}

5.底部广告区

底部广告区分为一个小卡片区以及图片广告区,采用div嵌套,外层为整个底部的容器,内层为一个小卡片容器、一个图片广告容器,内层容器里面的内容都是用无序列表实现(图片广告可以用三个div来实现)。

html结构:
 <div class="bottom">
            
                <div class="span1">
                <ul class="home-chanel-list">
                    <li>
                        <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"><i class="iconfont icon-clock"></i><span>保障服务</span></a>
                    </li>
                    <li>
                        <a href="file:///D:/%E5%B0%8F%E7%B1%B3%E5%95%86%E5%9F%8E/index.html"><i class="iconfont icon-qiyetuangou"></i><span>企业团购</span></a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/order/fcode"><i class="iconfont icon-Fmatongdao"></i><span>F码通道</span></a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-mifenka"></i><span>米粉卡</span></a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-yijiuhuanxin"></i><span>以旧换新</span></a>
                    </li>
                    <li>
                        <a href=""><i class="iconfont icon-huafeichongzhi_huaban"></i><span>话费充值</span></a>
                    </li>
                   
                </ul>
            </div>
            <div class="span2">
                <ul class="list">
                    <li class="first-li">
                        <a href="https://www.mi.com/shop/buy?product_id=10050081">
                            <img src="image/e981f78d2ac17c504975a719cb8b069d.png" alt="" class="bottom-img">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=10050103">
                            <img src="image/7404444f0c79b4bbb63e07724f502b86.png" alt="" class="bottom-img">
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=20588">
                            <img src="image/6b0c7fadbd84a808287af5faad6e62d7.png" alt="" class="bottom-img">
                        </a>
                    </li>
                </ul>

            </div>
            

        </div>
css样式:

在样式的实现时,要注意flex和float的矛盾哦!因为我在父容器添加了一个flex使其成为弹性盒子,设置容器内元素水平居中,但是我在子容器添加了一个向左浮动的属性值,导致位置有很大的偏差,所以大家在使用的时候记得要消除浮动。

.bottom{
    width: 1226px;
    height: 170px;
    bottom: 0;
    top: 10px;
    padding-left: 0;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.bottom-img{
    width: 316px;
    height: 170px;
    display: block;
}
.bottom .span2>ul>li:hover>a{
  box-shadow: 0 0 15px 5px rgba(210, 209, 209, 0.3);

}
.span1{
    left: 0;
    padding:0;
    position: absolute;
    width: 234px;
    height: 100%;
}
.span2{
    width: 978px;
    display: flex;
   
}
.span2{
    float: right;
    min-height: 1px;
}
.home-chanel-list{
    height: 170px;
    padding: 0 3px;
    margin: 0;
    list-style: none;
    text-align: center;
    font-size: 12px;
    background-color: #5f575f;
}
.home-chanel-list li{
    float: left;
    width: 70px;
    height: 82px;
    padding: 0 3px;
    position: relative;
    align-items: center;
    display: list-item;
}
.home-chanel-list a{
    color: #e0e0e0;
    text-decoration: none;
    display: flex;
    padding-top: 18px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}
.span2 ul{
    width: 978px;
    height: 170px;
    padding: 0;
    margin: 0;
    display: flex; /* 使用flex布局 */
    justify-content: space-between; /* 均匀分配空间 */

}
.span2 li{
    padding-left: 0;
    width: 316px;
    height: 170px;
    list-style: none;
    margin-left: 15px;
}
.span2 .first-li{
    margin-left: 0;
}
.span2 a{
    display: flex;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    

    
}
.bottom .span1 .home-chanel-list>li:hover>a{
    color: #fff;
}

6. 手机模块顶部图片广告

html结构:
<!--手机广告部分-->
     <div class="ad">
        <!--手机顶部图片-->
        <div class="warp">
            <a href=""><img src="image/9e9c620dbad5c650b6ff0c573df76e14.webp" alt=""></a>

        </div>
        <div class="span3">
            <div class="warp">

            </div>

        </div>

     </div>
css样式:

该图片广告正好在正中间,我们可以使用div嵌套,外层是整一个广告模块的容器,内层则是每个产品的广告容器,这部分的手机图片广告可以使用前面已经定义好的warp样式。如下所示(其中ad容器的大小还会改动)。

/*手机顶部图片*/
.ad{
    width: 100%;
    height: 2000px;
    padding-top: 20px;
    background: #ecebeb;
}
.ad .warp{
    
}
.ad .warp img{
    width: 100%;
    height: 120px;
}

7.手机广告模块

该部分包括了顶部的文字、纵向图片广告区、横向广告区,这三部分的内容我们可以用div嵌套多个子容器。(其中我们还会用到warp类来使容器居中)

html结构:
<div class="span3">
            <div class="warp">
                <div class="title_box">
                    <h2 class="title_text">手机</h2>
                    <div class="more"><a href="">查看更多<i class="iconfont icon-arrow-right-s-line"></i></a></div>
                </div>
                <div class="warp">
                    <div class="span1">
                        <a href=""><img src="image/55d2e50dd3783b52244ea3938e9dfca7.webp" alt=""></a>
                    </div>
                    <div class="span_right">
                            <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                            

                    </div>

                </div>

            </div>

        </div>
css样式: 
<div class="span3">
            <div class="warp">
                <div class="title_box">
                    <h2 class="title_text">手机</h2>
                    <div class="more"><a href="">查看更多<i class="iconfont icon-arrow-right-s-line"></i></a></div>
                </div>
                <div class="warp">
                    <div class="span1">
                        <a href=""><img src="image/55d2e50dd3783b52244ea3938e9dfca7.webp" alt=""></a>
                    </div>
                    <div class="span_right">
                            <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                             <div class="clearfix">
                                <div class="ad_img"><img src="image/202505221337_64140259a92b163ab9dc6a7555b31178.webp" alt=""></div>
                                <h3 class="ad_title">小米5s Pro</h3>
                                <p class="desc">小米十五周年特别设计</p>
                                <p class="price">5499起</p>

                            </div>
                            

                    </div>

                </div>

            </div>

        </div>

8.其他广告模块

关于其他的家电、智能穿戴、笔记本等广告模块,其实现是跟手机模块的实现是一模一样的,大家可以复制手机模块的内容,将对应标题跟图片、链接修改了即可。

9.页脚模块

通过观察,我们发现该模块的布局基本都可以通过无序列表的形式去实现,页面布局也是可以参考白色导航栏的结构。

html结构:
<!--页脚-->
     <div class="box_bpttom">
        <div class="warp">
            <div class="footer-service">
                <ul>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=20588">
                            <i class="iconfont icon-tool"></i>
                            <span>预约维修服务</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=20588">
                            <i class="iconfont icon-7tianwuliyoutuihuo"></i>
                            <span>7天无理由换货</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=20588">
                            <i class="iconfont icon-15tianmianfeihuanhuo24px"></i>
                            <span>15天免费换货</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=20588">
                            <i class="iconfont icon-liwu"></i>
                            <span>满69包邮</span>
                        </a>
                    </li>
                    <li>
                        <a href="https://www.mi.com/shop/buy?product_id=20588">
                            <i class="iconfont icon-position"></i>
                            <span>1100余家售后</span>
                        </a>
                    </li>
                </ul>

            </div>
            <div class="footer">
                <ul>
                    <li class="first-footer">选购指南</li>
                    <li><a href="">手机</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">耳机</a></li>
                    <li><a href="">手表</a></li>
                    <li><a href="">箱包</a></li>
                    <li><a href="">路由器</a></li>
                    <li><a href="">穿戴</a></li>
                    <li><a href="">电视</a></li>
                    <li><a href="">箱包</a></li>
                </ul>
                  <ul>
                    <li class="first-footer">服务中心</li>
                    <li><a href="">手机</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">耳机</a></li>
                    <li><a href="">手表</a></li>
                    <li><a href="">箱包</a></li>
                </ul>
                  <ul>
                    <li class="first-footer">线下门店</li>
                    <li><a href="">小米之家</a></li>
                    <li><a href="">线下门店</a></li>
                    <li><a href="">授权</a></li>
                    
                </ul>
                  <ul>
                    <li class="first-footer">关于小米</li>
                    <li><a href="">手机</a></li>
                    <li><a href="">平板</a></li>
                    <li><a href="">笔记本</a></li>
                    <li><a href="">耳机</a></li>
                    <li><a href="">手表</a></li>
                    <li><a href="">箱包</a></li>
                </ul>
                  <ul>
                    <li class="first-footer">关注我们</li>
                    <li><a href="">新浪微博</a></li>
                    <li><a href="">关于微信</a></li>
                    <li><a href="">联系我们</a></li>
                    <li><a href="">加入基金会</a></li>
                   
                </ul>
                <ul>
                    <div class="footer-slide">
                        <div class="first-slide">
                            <p class="phone">950816</p>
                            <p class="time">8:00-18:00(仅收市话费)</p>
                            <a href="" class="btn">
                                <em class="iconfont icon-liaotiankuang"></em>
                                "人工客服"
                            </a>
                        </div>
                        <p class="phone">950818</p>
                         <div class="second-slide">
                            <p class="time">8:00-18:00(仅收市话费)</p>
                            <p class="time" style="margin-top: 3px;">手机适用于:Xiaomi MIX Fold系列、MIX Flip系列、数字12系列及以上</p>
                            <p class="time" style="margin-top: 3px;">电视适用于:98寸、100寸电视</p>
                         </div>
                         <a href="" class="btn">
                                <em class="iconfont icon-liaotiankuang"></em>
                                "人工客服"
                            </a>
                    </div>
                </ul>

            </div>

        </div>

     </div>
css样式: 
/*yejiao*/
.box-bottom{
    width: 100%;
    height: 472px;
    background: #fff;
}
.footer-service{
    width: 100%;
    height: 25px;
    line-height: 25px;
    border-bottom: 1px solid #b0b0b0;
    padding: 25px 0;
}
.footer-service li{
    list-style: none;
    float: left;
    width: 20%;
    text-align: center;
    border-right: 1px solid #b0b0b0;
    box-sizing: border-box;
}
.footer-service a{
    color: #424242;
    text-decoration: none;
}
.footer-service a:hover{
    color: #ff6700;
}
.footer-service i{
    font-size: 24px;
    margin-right: 6px;
}
.footer{
    width: 100%;
    height: 392px;
    padding: 40px 0;
}
.footer ul{
    width: 204.3px;
    float: left;
    list-style: none;
    padding: 0;
    text-align: center;
}
.footer ul>li>a{
    text-decoration: none;
    color: #757575;
    font-size: 12px;
}
.footer ul>li>a:hover{
    color: #ff6700;
}
.footer .first-footer{
    font-size: 14px;
    line-height: 1.25;
    margin: -1px 0 26px;
    color: #424242
}
.footer-slide{
    width: 251px;
    height: 247px;
}
.footer-slide a{
    text-decoration: none;
}
.phone{
    font-size: 22px;
    line-height: 1;
    color: #ff6700;

}
.time{
    margin: 0 0 5px 0;
    font-size: 12px;
    color: #414141;
}
.btn{
    display: block;
    color: #ff6700;
    background: #fff;
    border: 1px solid #ff6700;/*添加一个橙色的边框*/
    width: 118px;
    margin-left: 66.5px;
    font-size: 12px;
    line-height: 28px;
}
.second-slide{
    width: 200px;
    height: 82px;
    margin-left: 52px;
    text-align: left;/*让文字贴紧容器左边*/
}

10.总结

本次网页全程使用html+css完成了复原,通过这次实操也巩固了我们的基础知识,希望你们也可以动手试试哦!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值