自学前端页面开发已有一段时间了，基础的html、css也掌握得差不多了，可以暂且把javascript和jquery放一边，是该自己动手实践静态小网站的时候了，笔者也是从书上例子到线上开发视频到如今自己通过闯无数坑而建设一个小项目的。虽然不算是什么大成就，但这对刚入门的小白而已，面对自己的小小“处女作”也会倍感兴奋^_^

现在来分享我的闯坑经验…

1 Step：收集好页面的素材（例如图片素材、文本素材等）

         千万不要忽视这个小步骤，尤其是对像我这样的刚入门小白来说（大牛请自动忽略）。

        我们必须得注意图片素材的宽度和高度，确定是否符合你理想中的分辨率和大小。否则就可能会想笔者一样，写入img后刷新页面看到的是一张巨大的图片，不止不能达到想要的美观效果，还会阻碍其他盒子的浮动（用float时），结果心心念念的美好景象就变得乱七八糟一堆。

       另外，由于笔者个人特别粗心的原因，前几次引入图片由于分不清楚绝对引用和相对引用的使用导致打鸡血式输入多个img后，才悲惨发现页面出现一串错误图片图标又或者页面还是一片空白，感觉代码却被“吃了”。

2 Step：先把所有的html基本标签都写上（特别是mate标签）

     这里我建议charset都设置为utf-8，几乎是通用了，如果漏了这东西，可能你以后写出来的只是一堆看不懂的“火星文”了

     还有每写一个头标签最好把相应的末标签成堆写上，html里的标签几乎都是成对使用的，要是一不小心漏掉了一个，都将会是大麻烦。或许当你写完一大片代码时，你回头向检验错误时，就真的是“大海捞针”的苦逼工作了。

3 Step：设置基础标签样式

         为了方便操作，最好在编码开头就设置好这些小标签样式，例如：body,span,em,p,strong,h1,h2,h3,h4,h5,h6,a:link,a:visited,a:hover 等。

这个小动作将在以后的编码中默默地发挥重大作用。

4 Step：建立盒子

  盒子可以设置id和class，这取决于你的想法。要注意的是一个id只能被使用一次，而一个class却可以被使用多次。有时候盒子布局内容差不多的情况下，你会发现直接粘贴复制盒子和样式是多么的爽快！

5 Step：（！重点来了）页面布局的方法

笔者目前水平还不够大牛，写的不够成熟请见谅，还望指点。

在这里我就总结最熟悉的方式吧____

（1）inline-block 结合float

display：block/inline/inline-block；

我们都知道html里有块级元素和内联元素。块级元素一般要独占一行，有宽度和长度；内联元素则不会独占一行，知道超过一行的宽度才会自动转行，但它本身没有长度和宽度。

而display的三个属性如下：

block：把内联变块。

可以实现宽度和高度的设置，还可以用于一些大标题的独占一行行为。

inline：把块变内联。

即可以把几个盒子并排放于同一行，但不可设置长度和宽度

inline-block：基本同上，但可以设置长宽  长宽 长宽（重要的事情说三遍）

这个是我用的最多的，基本一个普通小页面全用它也可以解答大部分问题了。举个栗子：常见的导航栏的建立就是靠它把每个相盒子设置相应长宽后并排展示，在结合float：left（一半页面盒子都是向左浮动的），这样，一个导航栏就成功啦^ ^

（2）absolute/relative结合方向距离

position：absolute/relative；

absolute是绝对位置，它是以整个页面的左上角为参照点的，设置了absolute后，在用left和top设置项目距离左上角的左边、上边的距离值就可以给项目定位啦啦啦～

虽然使用简单移动，但是它有个缺点：每个项目的定位都得这么设置一遍，即使是同一水平上的重复项目都要重新再设置一遍，这会导致代码冗长，而且手也累啊啊啊啊～

relative是相对位置，它是以所在容器的左上角作为参照点的，其后的left与top同上作用。

它就比absolute方便些了，不用再考虑所在盒子以外其他项目占页面的长度和宽度，只需对盒内其他项目的长宽计算得出大概项目的相对距离设置left和top值就可以了。

题外话：笔者第一次在这发表小白成长日记，如有不对的地方希望得到大家宝贵的意见，欢迎评论。小白必定会认真对待，感谢阅读*～*