同学们在学习完HTML+CSS之后就摩拳擦掌的想要尝试写一个静态页面了，但真正上手的时候就不知道该怎么做了。今天小千就来教大家页面布局的技巧，帮助大家开发一个静态页面。
我们通过一个具体的案例来给大家说一下布局的一些技巧：
假设，这是我们要布局的一个首页：
第一步：看
拿到一个网页或一个整站的网页后，我们应该大致浏览一遍，做到心里有数（例如网页的复杂程度，交互效果等）
第二步：找出网页的版心部分
第三步：划分网页的版块
思路：运用我们最熟悉的div标签将最大的版块划分出来
第四步：在大板块里面划分小版块
例如：我们的优势这个版块
然后在小版块里面再填充具体内容
第五步：观察是否有可以复用的样式（写好一个样式，只有添加相同的class名即可）
例如：
以上三部分字体大小，颜色有相似之处，就可以复用。重复以上几步来布局我们的网页就会变得很简单了。
然后我们再来说说填充版块里面的内容有什么技巧呢？
一定要按照一定的规律来，就不会乱了。
遇到文本——字体大小（font-size）,字体颜色（color）,行高（line-height）,是否需要居中（text-align:center）；遇到版块——如果需要设置距离（考虑使用margin或padding）。
希望以上的讲述，可以帮助到刚入门的小伙伴们，更好的布局页面。
本文来自千锋教育，转载请注明出处。
标签：网页,技巧,前端,布局,版块,字体大小,页面 来源： https://blog.51cto.com/15128702/2687691
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。