1. 1. 初始化你的CSS
  2. 2. 确定基本的排版
  3. 3. 完成导航
  4. 4. 第一个模块
Table of Contents ▼

CSS第二课 优雅

  1. 设定一个通用的排版样式
  2. 完成第一个模块

上一课为了通过一个导航栏,尽可能多得给大家看到CSS中一些需要注意的问题;没有讲解在项目中如何从头开始组织自己的代码,这节课我们把这部分内容补上,然后完成第一个模块。

初始化你的CSS

虽然加载了normalize.css,但是我们还是要手动处理一些问题:

/**
* init css
* 1. change to border-box
* 2. avoid horizontal width overflow
* 3. define base font
*/

html{
  box-sizing: border-box;

  font-family:  "Helvetica Neue",Helvetica, Arial, "HanHei SC", "PingFang SC", SimSun,"Source Han Sans CN", "Microsoft YaHei", "WenQuanYi Microhei",sans-serif;
  font-size: 16px;
  font-weight: 300;

  color: #9cafc3;
}
html, body{
  max-width: 100%;

  overflow-x: hidden;
}

*, *:before, *:after{
  box-sizing: inherit;
}
  1. box-sizing在上一课我们已经讲过,box-sizing默认是content-box,现在改成更方便的border-box。想一想下边这两种写法有和差异:

    写法1:

     html{
       box-sizing: border-box;  
     }
     *, *:before, *:after{
       box-sizing: inherit;
     }
    

    写法2

     *{
       box-sizing: border-box;
     }
    
  2. 保持页面宽度不会溢出

         html, body{
           max-width: 100%;
           overflow-x: hidden;
         }
    

    这里有一个小点,有时候你还会看到很多混乱的height

     html,body{
       height: 100%;
     }
    

    或者

     html{
      height: 100%;
     }
     body{
       min-heigth: 100%;
     }
    

    或者

     html{
       min-height: 100%;
     }
    

    等等之类的排列组合,你只要理解height的默认值是auto,像设置min-height或者max-height之类的,反正又不是设置了height,超出了控制范围,height该怎么样还是怎样。
    要是没明白,看下这篇文章

  3. 设置字体
    关于字体的选择,请参看Web中文字体排版指南

确定基本的排版

h1,h2,h3,h4,h5,h6{
  margin-top: .7em;
  margin-bottom: .2em;
  line-height: 1.1em;
  font-weight: 300;
}
h1{
  font-size: 2.25em;
}
h2{
  font-size: 2em;
}
h3{
  font-size: 1.7em;
}
h4{
  font-size: 1.4em;
}
h5, h6{
  font-size: 1.2em;
}
p{
  line-height: 1.8em;
  margin-bottom: 1.8em;
}
a{
  color: inherit;
  text-decoration: none;
}

img, video{
  max-width: 100%;
}

我们设定了标题、段落的字体大小、行间距、margin;去掉了<a>标签的的下划线;同时,给<img>,<video>这样的替换元素设置最大宽度。

完成导航

先调整下头部的HTML结构,为了保证在宽屏上的效果,我们添加一个容器来包裹页面内容,设置max-width

<header class="site__header">
    <div class="container">
      <nav class="navbar">
        <a class="navbar__brand" href="#">Company Logo</a>
        <ul class="navbar__nav list-nostyle">
          <li><a href="#">PlatForm</a></li>
          <li><a href="#">About</a></li>
          <li><a class="active" href="#">Sign Up</a></li>
        </ul>
      </nav>
    </div>

  </header>
/* container
  ========================================================================== */

.container{
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

这里使用margin:0 auto进行水平居中。其背后的原理在于:一个块元素的宽度默认会充满父元素的content-width,设定了width后,如果margin-left/rightauto,那么左右margin会平分剩余空间。

设置左右padding是为了防止内容部分直接贴到container,当宽度小于960px,你肯定不会希望内容紧贴着屏幕边缘的。

现在你的页面应该长这样:
导航

现在请自己修改导航的样式,并激活其中一个导航链接(添加一个active类),最后的结果应该这样:

第一个模块

html结构如下:

     <section>
      <div class="container text-center">
        <header class = "section__header">
          <h1 class = "section__title">BEST HEADLINE IN THE WORLD</h1>
          <p class = "section--center__desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum rutrum urna felis, dictum dictum erat condimentum
            sit amet. Cras vel est bibendum, Cras vel est bibendum, posuere orci quis, consequat nisl.</p>
        </header>
        <button class="btn">CTA BUTTON</button>
        <div class="section--center__img--bottom">
          <img src="./img/rectangle1.svg">
        </div>
      </div>

    </section> <!-- section one -->

现在来修改css:

内容水平居中

 /* text-center
  ========================================================================== */

.text-center{
  text-align: center;
}

我们用了text-align: center进行水平居中,text-align实际是让行内元素进行居中。

section__header往下挪一点

.section__header{
  margin-top: 78px;
  margin-bottom: 49px;
}
.section__title{
  margin-bottom: 28px;
}

margin-top来调整下元素的位置。

控制下文字宽度

参看设计稿,打开栅格,你会发现文字描述部分的宽度占用了8/12:

.section--center__desc{
  max-width: 66.667%;
  margin: 0 auto;
}

现在我们来写按钮

/* button
  ========================================================================== */

.btn{
  padding: .3em .8em;
  border: 2px solid #9CAFC3;
  background: #9CAFC3;
  border-radius: .2em;
  color: #fff;
  font-size: 125%;
  line-height: 1.5;
  opacity: 1;
  cursor: pointer;
}
.btn:focus{
  opacity: 0.7;
  outline: 0;
}

这里我们采用相对单位em根据字体大小来控制自动改变按钮大小。

底部图片

现在底部图片已经居中,调整下间距:

.section--center__img--bottom{
  margin-top: 62px;
}

看看最终的效果如何:
section one

很简单不是吗;下一课我们将会讲解“响应式栅格系统”