系统学习web前端大概有一周了吧，看了《Head First HTML与CSS》，这本书属于入门书，语言浅显易懂，跟着书敲代码很快的，我大概用了一天就看完了，同时对html和css有个系统的认识了。接着看了《精通CSS》第二版，受益最多的是从中学会了布局，用好position和float，还有结构与表现分离的思想。然后开始javascript的学习，看了入门必备书《javascript DOM 编程艺术》，这本书也比较基础，适合新手入门，由于我之前学过C、C++和python，有一定的编程基础，大概两天时间过了第一遍，然后花了两个多小时看了第二遍，感觉这些专业性较强的书，光看一遍是不够的，得多看几遍，每一遍都有不同的收获。
看完了这几本书后，我尝试模仿几个静态网页，今天模仿了11对战平台的首页，花了几个小时终于作出了一个勉强还能看的静态网页。我知道自己还有很多需要完善的知识点，现在就总结下今天的工作吧。
在设计网页时，要分析网页分为几个部分，也就是能够切好图，logo、导航栏、边栏、页眉、页脚等都事先分配好位置，给它们命名要简单易懂。
第一步做好后，建立一个相对完整的html结构，也就是纯html文档，一个完整的骨架先造出来然后再去给它穿衣服。在建立html文档时，要分析哪里该用div，什么情况用class，什么情况用id。一般来说，如果是比较通用类的，用class，而比较特殊只会出现一次的比如页角、侧栏等，可以选择使用id来标记。
骨肉已经成型后，该给它穿衣服，也就是css的编写了。首先应该从body开始，给body设置规则比如width，margin、background-color等，然后一层一层来设置，这个过程时最复杂最麻烦，基本95%的时间是花在这上面的。
在上面做好后，就是一些边边角角的修改了，比如位置的微调，颜色微调等。
模仿一个复杂的网页需要注意的东西太多了，某一个位置的一张图片的设置：是一定宽度和高度的范围然后让图片作为背景覆盖，还是单纯一个<img../>搞定呢，这两个方案各有各的特点，采用什么方案得看实际情况，如果是比较大的如logo可以做用“背景法”来处理，如果是文本中的图片，则用第二种方法会好些。
一般网页在高度宽度变化时会有相应的适配方案，当网页扩大缩小时能保证网页内容能不“失真”，在《精通CSS》中看到，如果向让浮动的元素不随着网页大小变化而发生位置的变化，得给浮动的元素一个宽度，这样在网页大小变化时，浮动元素大小始终是不变的。
上一张今天模仿11对战平台主页的截图，大部分的内容都实现了，有一个广告轮播的效果还没有做出来，只贴了张静态图代替那个地方，我偷了点懒没有用javascript，其他的地方除了位置可能有点偏差和有些图大小有误差，大的问题没有。 |
|
收藏
淘帖
踩
