很多学员在学习的过程中都遇到过这样的问题：为什么老师讲的我都能听懂，然而做起来却总是诸多问题?千锋哈尔滨校区老师告诉你，其实这是正常现象，谁也不能几天就成为大师，你的实践还太少了!练习多了，经验多了，静态网页自然也就手到擒来。

　　静态的网页其实就是由两部分组成，一个是底层结构HTML，另外一个就是负责修饰结构的CSS。其实书写静态网页就像小时候过家家，首先得把需要的家庭成员找齐了，即首先考虑要做一个什么样的网站，例如一个综合类网站包括：搜索框、导航、文章类别模块、文章标题以及一部分广告板块;一个博客主页包括：导航、文章缩略、文章搜索、文章导航以及没有显示但可能会有的评论区。

　　写页面的时候是有剧本的，这个剧本指网页设计图，或者某个现有网页，建议大家在模仿网上现有网页的时候利用浏览器自带的截图功能，把整个完整的页面截取下来，QQ浏览器，360浏览器都可以做到。这样的优点在于可以利用PS自己一步步测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。

　　按照设计好的剧本接着就可以找对应的成员了，例如百度网页从上往下分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同类型的页面，布局要复杂一些。

　　当看到一个网页时，需要在脑海当中对页面进行一个简单的扫描，如果把页面当成一张纸，要怎么样从大到小一点点分割。当有了初步的认识之后，就可以把这些东西转化成HTML结构，所有不同颜色的框框在写的时候用的都是DIV。

　　从上往下，从大到小一点点先把某个模块以不同的颜色色块利用代码堆积出来。保证大的模块布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input、文字、超链接a、列表ul li，这时候简单的页面结构就出来了。

　　接下来要把写好的结构进行美化，不然页面就会一团乱麻，没有美感，而网页当中润色部分是用CSS来做的。这个环节需要更加细心，例如百度首页导航红色框整体在绿色框的右边，需要给红色框添加float：right;红色框里面文字的字号大小，字体，字体颜色，水平间距，垂直间距都需要一点点写。如果在写的过程中遇见了问题，可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，CSS看右边，看看CSS属性有没有显示，有没有划掉，有没有黄色报错等等。

　　在做页面时，需要大量的练习，才可以熟能生巧。一个页面写完之后，总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样解决，深入思考这个模块的这个效果可不可以用其他的方法来实现，以做到举一反三。

　　千锋HTML5大前端培训，配合实战项目讲解网站页面布局，让你从容应对HTML、CSS的学习，基础打好了，才能更有信心面对之后的挑战。

上一篇

HTML5与传统HTML的区别在哪里?

下一篇

培训班出来的前端工程师有什么优势