第九天之复刻花礼网客户服务部分

桥北丶

已于 2022-07-27 15:43:05 修改

阅读量89

点赞数

分类专栏：自学前端 html标签前端文章标签： css css3 html

于 2022-07-26 19:08:41 首次发布

本文链接：https://blog.csdn.net/m0_59201314/article/details/126001216

版权

自学前端同时被 3 个专栏收录

14 篇文章 0 订阅

订阅专栏

html标签

12 篇文章 0 订阅

订阅专栏

前端

11 篇文章 0 订阅

订阅专栏

一、居中样式

1.text-align方法

div{
            /* 在容器编写 让内部元素居中 */
            text-align: center;
            height: 60px;
            line-height: 60px;
            font-size: 16px;
            background-color: lightblue;
        }

2.vertical-align方法

  img{
            /* margin-top: 20px; */
            /* 在目标对象上写 用于控制数值位置 */
            /* 
            baseline： 基线位置默认位置  
            bottom: 父容器底部
            top：父容器顶部
            middle: 父容器中心线
            text-bottom: 父容器内部的文本的底部对齐
            text-top: 父容器内部的文本的顶部对齐
            */
            vertical-align: middle;
        }

二、复刻案例

上图
在这里插入图片描述
今天的任务是复刻如图所示的内容

首先呢，一块内容是由多个div嵌套的做案例时我们应该先思考一下，把内容分成五个div，然后再具体的一一实现。

先看下代码：

<body>
    <div class="server">
        <div class="container">
            <div class="help">
                <div class="help-server">
                    <h4>客户服务</h4>
                    <ul>
                        <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>
                </div>
                <div class="help-infos">
                    <h4>热门咨询</h4>
                    <ul>
                        <li><a href="">鲜花礼品网购物流程</a></li>
                        <li><a href="">鲜花网能配送哪些城市？</a></li>
                        <li><a href="">鲜花售后服务是怎么样的？</a></li>
                        <li><a href="">我应该提前多久预订鲜花？</a></li>
                    </ul>
                </div>   
                <div class="help-city">
                    <h4>同城鲜花专区</h4>
                    <ul>
                        <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>
                        <li><a href="">厦门鲜花</a></li>
                        <li><a href="">更多城市</a></li>
                    </ul>
                </div>   
                <div class="help-contact">
                    <h4>联系我们</h4>
                    <div>
                        <p>全国订购热线：400-889-8188(免长途费)</p>
                        <p>E-mail: kefu@hua.com</p>
                        <p>7x24小时在线订购</p>
                        <p>客服工作时间：8:30-21:00</p>
                        <div class="btn"><a href="">  <img src="./img/客服.png" alt=""> <span>在线客服</span></a></div>
                    </div>
                </div>
                <div class="help-qrcode">
                    <div class="help-qrcode-item">
                        <img src="./img/app_download_qrcode.png" alt="">
                        <p>扫码下载手机版</p>
                    </div>
                    <div class="help-qrcode-item">
                        <img src="./img/wxguanjia_qrcode.png" alt="">
                        <p>关注公众号有惊喜</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

接下来是样式：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .server{
            background-color: #F7F9FA;
        }
        .container{
            width: 1200px;
            margin: 0 auto;
        }
        .server .help{
            padding-top: 36px;
            padding-bottom: 40px;
            font-size: 0;
        }
        .server .help h4{
            color: #232628;
            line-height: 24px;
        }
        .server .help ul{
            margin-top: 7px;
            list-style: none;
        }
        .server .help a{
            text-decoration: none;
            color: #71797F;
        }
        .server .help li{
            display: inline-block;
            line-height: 24px;
            font-size: 12px;
        }
        .server .help>div{
            display: inline-block;
            font-size: 16px;
            vertical-align: top;
        }
        .server .help .help-server{
            width: 197px;
        }
        .server .help .help-server li{
            width: 68px;
        }

        .server .help .help-infos{
            width: 225px;
        }
        .server .help .help-city{
            width: 197px;
        }
        .server .help .help-city ul{
            margin-top: 9px;
            font-size: 0;
        }
        .server .help .help-city li{
            width: 68px;
            line-height: 20px;
        }
        .server .help .help-contact{
            width: 259px;
        }
        .server .help .help-contact .btn{
            width: 100px;
            height: 32px;
            margin-top: 4px;
            border-radius: 16px;
            background-color: #FF734C;
            font-size: 12px;
            line-height: 32px;
            
            text-align: center;
        }
        .server .help .help-contact .btn img{
            vertical-align: -2px;
        }
        .server .help .help-contact .btn a{
            color: #fff;
        }
        .server .help .help-contact>div{
            margin-top: 9px;
        }
        .server .help .help-contact p{
            font-size: 12px;
            line-height: 20px;
            color: #71797F;
        }
        .server .help .help-qrcode{
            width: 322px;
        }

        .server .help .help-qrcode .help-qrcode-item{
            display: inline-block;
            vertical-align: top;
        }

        .server .help .help-qrcode .help-qrcode-item img{
            width: 120px;
            height: 120px;
        }

        .server .help .help-qrcode .help-qrcode-item+.help-qrcode-item{
            margin-left: 48px;
        }
        .server .help .help-qrcode .help-qrcode-item p{
            margin-top: 8px;
            line-height: 20px;
            color: #232628;
        }