页面两侧适当留白，不能太空
图片可以考虑显示为块级元素
各个大区域内留白
our-begging区域详细调整
两列浮动显示
WebStorm支持PostCss格式文件

适当留白

一般页面即使背景伸展到整个页面的宽度，其内容一般也聚焦在中心，这是由于人在阅读的时候，如果一行太长需要转头，体验就会较差。所以一般的网页，会有一个wrapper类，将页面的内容控制在页面中部的区域。在modules目录下新建一个wrapper.css并且导入，在里边编写：

.wrapper {
    padding-left: 18px;
    padding-right: 18px;
    
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

这基本上就是网页的标准wrapper类的样式，以后网页的组织结构类似如下，每一个大区域内部立刻跟着wrapper类：

<div id="header">
    <div class="wrapper">
        该块具体内容
    <div>
<div>

<div id="mainbody">
    <div class="wrapper">
......

创建一个DIV元素，类为wrapper，包裹<div class="large-hero__text-content">内部所有元素。由于现代网页一般图片可以全宽度，底色留白，所以图片无需包裹。如果整个网页要固定宽度，才考虑包裹，但那种一般都是旧式样的网页，现代网页一般都让图片全宽度。

图片显示为块级元素

img元素默认被显示为内联元素，如果为其添加边框等修饰，需要将其转换成块级显示，这样就不会有空白。在large-hero内部的img元素上添加large-hero__image类，然后编写：

.large-hero {
    border-bottom: 10px solid $mainBlue;
    ...
    &__image {
        display:block;
    }
}

这样图片就有了10像素的下边框，比较好看。再修改一下各个不同大小情况下的字体和按钮的大小样式，现在版图的部分就结束了。准备制作下一部分，也就是页面里id为our-beginning的DIV元素内部的样式。

各个大区域内留白

观察目标页面，每个区域之间都有大段空白，这个类可以做为每个大区域的div元素的一个样式，可以单独开一个文件，方便调整，在modules目录下边创建_page-section.css，然后导入，在其中设置样式：

.page-section {
    padding: 4.5rem;
}

然后把这个样式应用到<div id="our-begging">上，页面好看了很多。然后就来调整其内部的元素。也按照之前wrapper的方式，用wrapper类包裹内部所有元素。

our-begging区域详细调整

这里主要是标题居中，颜色，字体重量和图片居中的样式。可以给编写一些主类和modifier类，像wrapper这种类，就可以复用在想居中的元素上。如果宽度要改变，只要给wrapper也定义modifier类即可。还有在wrapper内部还有wrapper类的时候，可以在CSS样式中嵌套，取消内部的wrapper类的padding，这样就内外一致了在编写CSS类的时候，合理拆分样式到媒体查询和modifier类中的代码也很重要。

两列浮动显示

这里先用了简单的浮动来实现，在浮动之后还要记得一定要清除浮动。：

.row {
    @mixin clearfix;

    &__4 {
    float:left;
    width: 33.33%;
    }

     /*解决只有一侧设置了padding的简易方法，不会影响计算宽度的总长度，就是外层元素margin设置成负数，然后overflow：hidden*/
    /*在父元素，也就是wrapper上设置上overflow hidden*/
    &--gutters {
       margin-right: -65px;
     }

    &--gutters>div {
         padding-right: 65px ;
    }

    &__8 {
         float: right;
         width: 66.66%;
     }

}

剩下的微调页面基本上不会再有问题，按照媒体查询来浮动即可。唯一还需要注意的是img元素上可以使用size="960px"来告诉浏览器这个图片实际要对应的尺寸，但是单独设置这个属性，会导致响应式图片只按这个尺寸加载，因此再搭配媒体查询就可以实现动态加载。在如今的响应式页面里，图文水平排列已经很少使用浮动了，而是使用更加响应式的列布局。这一部分要解决的就是页面中部图文和文字混排的这部分。先用一个row类包裹这一片区域，然后可以观察，图片应该是一栏，文字是一栏，在页面很小的时候，这两栏应该重叠。所以需要使用媒体查询结合设置宽度来实现。实际上这也是很多响应式UI布局的原理，从浮动开始，现在逐渐使用CSS3的fluidbox模型，直到grid系统，也有很多UI开发了自己的grid系统。。

Webstorm支持PostCss格式文件

如果不设置，默认的CSS解析是标准CSS格式，里边的各种嵌套，拼合和变量都会被提示错误。分为两步：

File | Settings | Plugins中下载安装PostCss插件
在File | Settings | Editor | File Types中将.css文件的解析类型设置为PostCss Style Sheet