四.服务范围部分的制作

一.服务范围的制作分析

　　首先,可以将此部分分为上下两部分,上面使标题,下面是内容

　　下面部分可以拆分为四部分内容

二.代码的实现

　　1.HTML代码

    <div class="section">
        <div class="section-header">
            <div class="section-header-box">
                <div class="section-header-left"></div>
                <div>服务范围</div>
                <div class="section-header-right"></div>
            </div>
            <p>our services</p>
        </div>
        <div class="section-body">
            <div class="section-body-list">
                <img src="./images/section1-img1.png" alt="">
                <p class="text1">1.web design</p>
                <p class="text2">企业品牌网站设计/手机网站制作
                    动画网站创意设计</p>
            </div>
            <div class="section-body-list">
                <img src="./images/section1-img2.png" alt="">
                <p class="text1">2.graphic design</p>
                <p class="text2">标志logo设计/产品宣传册设计
                    企业广告/海报设计</p>
            </div>
            <div class="section-body-list">
                <img src="./images/section1-img3.png" alt="">
                <p class="text1">3.e-business plan</p>
                <p class="text2">淘宝/天猫装修设计及运营推广
                    企业微博、微信营销</p>
            </div>
            <div class="section-body-list">
                <img src="./images/section1-img4.png" alt="">
                <p class="text1">4.mailboxagents</p>
                <p class="text2">腾讯/网易企业邮箱品牌代理
                    个性化邮箱定制开发</p>
            </div>
        </div>
    </div>

　　　　实现方式:

　　　　　　①设置服务范围的整体div

　　　　　　②在整体div中设置标题div和内容div

　　　　　　③在标题div中设置两个div,分别放置标题第一行的内容和第二行的内容

　　　　　　　　第一行中放置三个div,分别是左横线,标题,有横线

　　　　　　　　第二行中方式一个p标签

　　　　　　④在内容div中设置四个子div分别放置四部分的内容

　　　　　　　　子div中放置一张图片和两个文字段落

　　2.CSS代码

.section{
    height:380px ;
}
.section-header{
    text-align: center;
    margin-top: 60px;
}
.section-header >p{
    color: #c3c3c3;
}
.section-header-box{
    width: 350px;
    margin: 0 auto;
    font-size: 20px;
    position: relative;
    color: #363636;
}
.section-header-left,.section-header-right{
    width: 100px;
    height: 1px;
    position: absolute;
    top: 15px;
    background: #c3c3c3;
}
.section-header-right{
    right: 0;
}
.section-header-left::after,.section-header-right::after{
    content: "";
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #c3c3c3;
    top: -4px;
}
.section-header-left::after{
    right: 0;
}
.section-header-right::after{
    left: 0;
}
.section-body{
    margin: 30px 180px;
}
.section-body-list{
    width: 25%;
    float: left;
    height: 280px;
    text-align: center;
}
.section-body-list img{
    margin: 0 auto;
}
.section-body-list .text1{
    font-size: 18px;
    color: #434343;
    padding: 30px 0 20px 0;
    font-weight: bold;
}
.section-body-list .text2{
    font-size: 14px;
    color: #6d6d6d;
    width: 205px;
    margin: 0 auto;
}

　　　　①设置服务范围整体div的高度

　　　　②设置标题

　　　　　　设置居中显示

　　　　　　设置距上边框的距离

　　　　　　设置标题横线 宽高 ,使用绝对定位设置与顶边的距离,这时左右横线会重叠到一起,为右横线设置右边距为0,就可以实现左右各一条横线了

　　　　　　设置横线上的圆点,添加::after伪类,使用content:"";添加空内容,添加宽高,并设置圆角以及颜色,最后使用绝对定位,设置圆点的位置

　　　　　　　　因为两个圆点都是靠中间的位置,所以需要分别设置它的位置

　　　　　　　　给左边的圆点设置距离右边0px

　　　　　　　　给右边的圆点设置距离左边0px

　　　　　　　　最后再设置一个颜色,这样就实现了图中横线和圆点的效果了

　　　　　　设置p标签中的内容

　　　　　　　　这里只需要设置一个颜色就可以了

　　　　③设置内容盒子

　　　　　　设置内容盒子的高度

　　　　　　设置四个子盒子

　　　　　　　　设置子盒子的高度

　　　　　　　　设置居中

　　　　　　　　这里类似一个横线列表,所以我们先设置为左浮动

　　　　　　　　因为四个盒子,所以每个盒子所占的宽度设置为25%

　　　　　　设置子盒子中的图片

　　　　　　　　给图片一个外边距,使上下边距为0,左右自动对齐

　　　　　　设置子盒子中的段落文字

　　　　　　　　这里的文字分为两部分

　　　　　　　　我们给第一段文字设置字体大小,颜色,内边距,和一个加粗就好了

　　　　　　　　　　内边距用来控制距离上边图片和下边文字中间的距离

　　　　　　　　第二段文字为了放置子盒子与子盒子之间的文字接触,所以我们直接控制宽度来实现文字与文字的距离