前端工程化 06 - CSS开发技巧

前端工程化 06 - CSS开发技巧

页面两侧适当留白,不能太空 图片可以考虑显示为块级元素 各个大区域内留白 our-begging区域详细调整 两列浮动显示 WebStorm支持PostCss格式文件 适当留白 一般页面即使背景伸展到整个页面的宽度,其内容一般也聚焦在中心,这是由于人在阅读的时候,如果一行太长需要转头,体验就会较差。

  1. 页面两侧适当留白,不能太空
  2. 图片可以考虑显示为块级元素
  3. 各个大区域内留白
  4. our-begging区域详细调整
  5. 两列浮动显示
  6. 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像素的下边框,比较好看。 再修改一下各个不同大小情况下的字体和按钮的大小样式,现在版图的部分就结束了。准备制作下一部分,也就是页面里idour-beginningDIV元素内部的样式。

各个大区域内留白

观察目标页面,每个区域之间都有大段空白,这个类可以做为每个大区域的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格式,里边的各种嵌套,拼合和变量都会被提示错误。 分为两步:
  1. File | Settings | Plugins中下载安装PostCss插件
  2. File | Settings | Editor | File Types中将.css文件的解析类型设置为PostCss Style Sheet
LICENSED UNDER CC BY-NC-SA 4.0
Comment