而我们在写页面的时候是有剧本的，这个剧本就是你看到的设计图，或者是你看到的某个网页，个人建议大家在模仿网上现有的网页的时候最好是利用一些浏览器自带的截图功能，把整个页面完整的截取下来，QQ浏览器，360浏览器都可以做到的，这样的好处就是可以利用ps自己一步步的测量数据、切图都做到亲力亲为，并且做到了页面数据的精准度，而不是随意的给数据，或者是利用浏览器的F12功能查看原网页的数据。
首先随意给数据造成的结果就是你做出来的页面真的真的真的很丑很难看，其次利用浏览器的F12查看功能，这样子做你就会不小心的看到了原代码，你的思维跟原来的编程人员思路有些时候是不一样的，这样就限制了你的思路，最后你翻找的过程真的是很需要时间的，同时还会影响你的思路。
按照设计好的剧本然后我就可以对应这找人员了，比如说爸爸、妈妈、孩子、锅、饭碗、筷子，菜等等，我们写页面也是的。比如百度的网页从上往下是分为导航头部、中间logo和表单、尾部二维码和文字，相对来说页面的整体布局是比较简单的，当然还有很多不同的类型的页面，布局上比这边要复杂一些，具体的可以看下面的图。
这个是我们看到一个图的时候，大致在脑海当中对页面进行一个简单的扫描，进行初步认识看看页面当中都有哪些，如果把页面当成一张纸，那么在一点点撕碎的过程中要怎么样从大到小一点点的分割，当我们有了初步的认识之后，就可以把这些东西转化成我们的html结构，所有画的这些不同颜色的框框我们在写的时候用的都是div。
从上往下，从大到小一点点的先把某个模块用不同的颜色色块堆积出来利用代码。保证大的模块的布局没问题之后，在往里面放一些小的东西，比如图片img、表单form input，文字、超链接a、列表ul li。那么简单的页面结构就出来了。但是这个页面结构的色块堆积，不是把整个页面都堆积出来，而是一个模块一个模块的来，比如头部的、中间左边的、尾部的。
接下来我们需要做的就是把写好的结构进行美化，不然你就会看到如下图一样的场面。
难看的要死。就好比我们在玩过家家的时候为了让找来的人更适合构思当中的人物我们可以进行简单的装扮，妈妈要穿上高跟鞋呀，需要涂抹口红呀，爷爷是需要有胡子的而且还是要白色的才会更像一些，最好是要弯腰驼背的。
而网页当中的这写润色部分是用css来做的。这个环节要比刚才的更要细心，涉及到的东西很多，同时也会伴随着很多的问题，毕竟想要某个人形态外貌上和剧本人物一致，不仅需要细致严谨的化妆师还需要合理的服装搭配师。这个环节需要我们一点点的来弄，比如：
百度的首页导航这块红色盒子整体在绿色盒子的右边我们需要给红色的盒子添加float：right；红色盒子里面的文字的字号大小，字体，字体颜色，水平间距，垂直间距这些都需要一点点的写，如果在写的过程中遇见了问题，我们可以借助Chrome浏览器的调试功能，哪里错了用箭头点哪里，结构看左边，css看右边，看看css属性有没有显示，有没有划掉，有没有黄色报错等等。
这些解决错误的能力和方法需要的是大量的练习和修改才能够做到一眼看见就知道是什么，就好像你穿衣服的时候肯定是拿上衣，而不是拿裤子穿在上面，如果有人这么做你会告诉他这样是错的，这个裤子要穿在下面一样。
最后就是总结和举一反三了，一个页面写完之后，不是就是完了，更多的是我们结束的时候要总结一下这个页面在书写过程中遇到了哪些问题，是怎么解决的，为什么这样子解决，更深入的去思考一下这个模块的这个效果我可以不可以用其他的方法来实现，做到举一反三。
这些总结可以记录到网上一些博客上，比如博客园、CSDN、51CTO。这样既可以作为自己的一个整理也可以方便了其他人同样查看。
一、css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。
二、HTML和CSS的区别?
1、定义不同：
html是HyperTextMark-upLanguage的缩写，即超文本标记语言；
css是Cascading Style Sheets 的缩写,即层叠式样式表单，它是由W3C协会制定并发布的一个网页排版式标准,是对HTML语言功能的补充。
2、用途不同：
html则是用于文本内容，包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。
css是多用于样式，主要的用途是对网页中字体、颜色、背景、图像及其他各种元素的控制,使网页能够完全按照设计者的要求来显示。
3、CSS语法与HTML语法完全不同：
HTML里代码是功能标签，如DIV、SPAN、A链接、em标签、I斜体标签、u下划线等，html代码语法范例：<div>内容</div>
CSS样式代码语法是div{样式单词：值}
三、HTML和CSS联系：
CSS与HTML相同之处在于，两个共同作用让网页实现需要的布局样式。
扩展资料：
1、标记符<html>,说明该文件是用超文本标记语言（本标签的中文全称）来描述的,它是文件的开头而</html>,则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
2、CSS为HTML标记语言提供了一种样式描述，定义了其中元素的显示方式。CSS在Web设计领域是一个突破。利用它可以实现修改一个小的样式更新与之相关的所有页面元素。
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
1、定义不同
（1）HTML（结构）：全称Hyper Text Markup Language（超文本标记语言），该语言是用于定义文档内容结构。
（2）CSS（布局）：全称Cascading Style Sheets （层叠样式表）。
2、性质不同
HTML是网页的结构，CSS是网页的样式。例如如果把整个网页比喻成一个人，那么HTML就是骨头，CSS就是衣服。
2、功能不同
HTML功能：
（1）该语言写的代码通常会被浏览器解析执行.
（2）超文本：不止包括文本，还有图片、链接、音乐。
（3）一个页面就是一篇文档，而一篇文档最核心的就是内容，不同含义。
CSS功能：
（1）用于定义HTML文档的样式（外观）。
（2）页面表现的基础，可以控制布局，控制元素的渲染。
4、格式不同
（1）HTML注释格式：<!--注释内容-->
（2）CSS注释格式：/*注释内容*/
参考资料来源：百度百科—HTML
参考资料来源：百度百科—CSS
