静态页面制作—Magnet

利用html+css进行制作静态网页制作，熟悉项目制作流程，建立起编写代码习惯。

一、项目分析

1.以下为静态网页的效果图，此文章目的利用html+css完成效果图；

2.此页面为三栏式结构，div+css直接进行三栏式布局；
3.需要进行CSS初始化；
4.当鼠标悬浮图片上方时，实现的覆盖显示效果：

项目比较简单，没有什么太多坑的地方（还是我没看出来。。。），做一个自适应的布局页面（现在还没搞清楚自适应和流体布局，，，后续再写个blog搞搞清楚这个吧）。

二、Let’s go!

1. 结构显示：

先将页面内所有需要展现的内容呈现（未加CSS样式效果）：

因为图片模块实现效果一样，所以在编写的时候并未全部呈现，最后完成布局样式调整后直接添加。

2.CSS样式：
在增加样式过程中，总结以下问题：

1）每个模块间隔需要从包裹内容的根元素进行定义，将大体轮廓切出；一定要利用好div标签，进行模块划分。

2）box-sizing的用法：（值）border-box，指定宽度和高度（最小/最大属性）确定元素边框box。也就是说，对元素指定宽度和高度包括padding和border的指定。内容的宽度和高度减去各自双方该边框和填充的宽度从指定的”宽度”和”高度”属性计算。 可加入到初始化CSS代码中。
详细的解析：https://www.jianshu.com/p/e2eb0d8c9de6

3）icon图标在线引用：
http://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
具体用法：
link图标在线css链接（上述网址获取），并在需要加入icon图标加入样式类名iconfont & 图标样式类名（同为上述网址获取），就可以啦。

4）页面注重统一性，关于字体的大小以及颜色，最好在一开始body中定义以保持统一性。

5）列表符号：list-style-position: inside; 可使符号位于盒子内部。

6）表单：后续整理另写一篇blog

• input type运用。

• input 和 select 设置宽度相同却不一致：
  解决方法：
  select的css width样式，包含边框和内边距，即：真实的width=CSS width。
  而input的css width样式，则不包含边框和内间距，真实的width=CSS width border padding。
  解决的方法：
  设置select的CSS width = input 的CSS width+ border +padding

3.效果图：
页面字体样式后续作为基调设置，不然后续改起来太麻烦了….
效果图上四个页面都已经做好了，基本header & footer是一样的，就中间部分需要重新编写，迟些把代码传到GitHub….