重难点分析

重点

• nth-child选择器的使用
• 字体图标的使用
• 浮动与清除

难点

• 字体图标
• 浮动与清除的使用

案例分析

案例效果 完成版

单页式网页，适合小型企业、个人主页、产品主页等类网站。

滚动效果、滚动检测、固定菜单等效果依赖于JS。

原理解析

• .container容器实现水平居中（公共类）
• 最好采用ul li的方式组织服务项目
• 图标字体的实现

重点解读-图标字体的实现

• 图标字体的好处（图标多，便于交互）
• 实现步骤
  • head部分加载对应库文件
  • 给相应的标签（一般是i标签）应用相应的类

重点解读-图标字体

重点解读-浮动与清除

浮动

• 浮动，应用该属性的元素脱离常规流
• 浮动，应用该属性的元素向左或向右浮动，浮动到上一个同向浮动元素的边缘或父元素边缘。
• 浮动，会对后续兄弟元素和祖先元素产生影响

清除浮动

一般采用伪类的方式清除浮动，在应用浮动元素的父元素上添加.clearfix类

.clearfix::after{
    content: "";
    display: table;
    clear: both;
    /*其他一些隐藏设置*/
    /*浏览器兼容性设置*/
}

重点解读-nth-child使用

参见教程和实验

关键步骤

HTML架构

<!--服务开始-->
<section class="service" id="service">
    <div class="container clearfix">
        <h2>我们的服务</h2>
        <p>竭诚为您服务</p>
        <ul class="content clearfix">
            <li>
                <i class="fa fa-cog"></i>
                <h3>高端定制网站建设</h3>
                <p>专业定制高端网站，品牌官网、集团网站、营销网站、响应式网站、电子商务网站、业务系统定制等</p>
            </li>
            <li>
                <i class="fa fa-leaf"></i>
                <h3>移动互联网解决方案</h3>
                <p>专业手机网站开发、H5页面开发、APP开发、业务APP定制开发，面向手机、平板等多终端的移动互联网解决方案等</p>
            </li>
            <li>
                <i class="fa fa-check"></i>
                <h3>微信开发运营</h3>
                <p>微官网建设、PC网站和移动端网站资源整合、微信公众号开发运营、H5社交游戏开发等</p>
            </li>
            <li>
                <i class="fa fa-area-chart"></i>
                <h3>交互体验设计</h3>
                <p>360度全景展示、VR虚拟现实、AR增强现实等。</p>
            </li>
            <li>
                <i class="fa fa-desktop"></i>
                <h3>网站运维</h3>
                <p>数据灾备服务、系统安装服务、内容维护、技术迭代服务、服务代维等。</p>
            </li>
            <li>
                <i class="fa fa-codepen"></i>
                <h3>影像创意服务</h3>
                <p>通过图像与视频创新应用塑造饱满、立体、鲜活的品牌形象，品牌形象摄影、产品摄影、影视拍摄与制作等。</p>
            </li>
        </ul>
    </div>
</section>
<!--服务结束------------------------>

关键步骤

分块解析

/*
 服务模块
 * */
.service{
    /*
     设置服务部分样式
         颜色
         背景色
         文字效果设置
     */
}
.service li{
    /*
     设置服务部分列表项样式
         宽度
         浮动
     */
}
.service li::after{
    /*
     li里有浮动，所以要清除
     */
}
.service li:nth-child(2n){
    /*
     设置服务部分列表项右侧样式
         左对齐
         右margin
     */
}
.service li i{
    /*
     设置服务部分列表项左侧图标样式
         右浮动
     */
}
.service li:nth-child(2n) i{
    /*
     设置服务部分列表项右侧图标样式
         左浮动
     */
}
.service li h3{
    /*
     设置服务部分列表项h3样式
         显示方式
     */
}

关键步骤

代码呈现

/*
 服务模块
 * */
.service{
    min-height: 600px;
    background: url(../img/banner2.jpg) center center no-repeat;
    background-size: cover;
    color: #fff;
    text-shadow: 1px 1px 0px rgba(0,0,0,.5);
}
.service li{
    float: left;
    width: 48%;
    margin-right: 4%;
    text-align: right;
}
.service li::after{
    content: "";
    display: table;
    clear: both;
}
.service li:nth-child(2n){
    margin-right: 0px;
    text-align: left;
}
.service li i{
    float: right;
    padding: 12px 0px 12px 20px;
}
.service li:nth-child(2n) i{
    float: left;
    padding: 12px 20px 12px 0px;
}
.service li h3{
    display: inline-block;
    margin: 0px;
}

核心知识点总结

• 字体图标
• 浮动与清除

核心知识点总结-字体图标

/**
 * 字体图标
 * 先引入库文件
 * 再应用对应类
 * 开发时采用本地加载的方式
 */

核心知识点总结-浮动、定位的选择

/*
 * 如果不用浮动、定位就可以实现效果，尽量不用浮动、定位
 * 如果有多个元素同时需要脱离常规流，同时没有上下位置的区别，用浮动。
 * 如果某个元素相对于某层父元素位置固定，用（绝对）定位。
 */

核心知识点总结-浮动和清除

/*
 * 如果浮动，一定清除
 * 一般在产生浮动的父元素上，使用clearfix类清除浮动。
 */
.clearfix::after{
    content:"";
    display:table;
    clear:both;
    /*也可以设置些隐藏内容的属性*/
}