聊聊前端静态页面的开发

静态页面重构

忠言

常见开发静态页面的心态

特别是初学者，常会有 " 特别着急 " 的心态。容易觉得，哇，我要开发中页面上的这么多东西，我写半天才写这么一点。有时候还会为一个很小的样式布局卡好久，心态都崩了。

这是很正常的，我们需要克服。写页面本来就是一个精细的活，特别是布局。需要我们进下心来，细心观察，然后规划样式。先静下心来，一点一点，一个模块一个模块的完成，这样反而更快。总之，就是需要先静心，不能着急。

开发方式的改变

过去：页面为单位

现在：组件为单位

一个页面是由很多区域组成的，每个区域又由几个组件组成。现在都是按组件将一个页面拆分，分给多个开发人员，各自开发功能，最后再拼接起来。

常有的感觉

你会感觉，小的区域反而代码多，且复杂。大的区域几下就写完了。越是小的可能越精细，逻辑处理更加严密。
有技术含量的代码少，体力活多。

技术含量代码：布局层面的代码，排结构。

体力活代码：颜色设置什么呀，字体太小了调大一点呀，...

提高写静态页面的能力

平时可以多写写各大商城的首页静态页面。

小米商城，京东商城，美团商城，....

这些都写熟了的话，我想，开发静态页面这一块可以说是炉火纯青了。
好处是：
1. 熟悉大部分基本样式的使用。（字体，行高，布局等等）
2. 体会布局中的细节处理。
3. 找到写页面的感觉。
4. 成为一个合格的页面重构师。

公共样式

开发一个静态页面首先就是要书写整个页面的全局公共样式。

介绍一下常见的公共样式：

可以写在一个common.css 中：

css 复制代码

* {
  margin: 0;
  padding:0;
  /* 去除列表的小圆点 */
  list-style: none; 
  /* 防脱发神器,防止后面计算尺寸头痛欲裂 */
  box-sizing:border-box;
}

/* 给全局设置通用的 颜色,字体相关样式 */
html{
  color: #333;
  min-width: 1226px;
  /* 字体大小 14px, 1.5 倍行高 , 字体风格 */
  font:14px/1.5 'Helvetica Neue', Helvetica, Arial,'Microsoft Yahe1', 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
}

a{
  /* 去除下划线 */
  text-decoration: none;
  /* 颜色和父元素同步,和普通文字一样 */
  color: inherit;
}
a:hover{
  color: #ff6700;
}

/* 全局的居中容器 */
.container{
  width: 1226px;
  margin-left: auto;
  margin-right: auto;
}




/* 盒子布局 */
.space-center{
  display: flex;
  align-items: center;
  justify-content: center;
}

.space-between{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.space-left{
  display: flex;
  align-items: center;
  justify-content: left;
}

⚠️特别的：

全局先统一设置文字样式：一般来说，一个页面的文字样式基本上都是统一的。

css 复制代码

{
  /* 字体大小 14px, 1.5 倍行高 , 字体类型 */
  font:14px/1.5 'Helvetica Neue', Helvetica, Arial,'Microsoft Yahe1', 'Hiragino Sans GB', 'Heiti SC', 'WenQuanYi Micro Hei', sans-serif;
}
// font 是一个 复合属性，是 font-size , font-family ,font-weight ...的合并属性。

html设置 min-width，限定整个页面的最小宽度。pc 端的页面不能太小，小到一定程度就不好布局，所以限定一个最小的视口宽度。

一个小规律：

一般的官网，html 的 min-width 就等于全局 container 的 width,这样可以保证 container 里的内容完整正常的显示。