黑马程序员技术交流社区
标题:
前端学习
[打印本页]
作者:
薄荷红茶
时间:
2019-10-29 21:37
标题:
前端学习
系统学习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，其他的地方除了位置可能有点偏差和有些图大小有误差，大的问题没有。
作者:
SZ创客
时间:
2019-10-30 15:22
我拥有宇宙的风，与夏夜相逢。是六月盛景，是清寂长生。
作者:
chengjiayu
时间:
2019-10-30 16:52
.我与春风皆过客，你携秋水揽星河
作者:
小黑梅
时间:
2019-10-31 16:22
对一个人的好感，如果超过了四个月，那就不止是好感这么简单了。
作者:
1079591475
时间:
2019-10-31 19:55
当我拥有你，无论是在百货公司买领带，还是在厨房收拾一尾鱼，我都觉得幸福。
作者:
黑马润
时间:
2019-11-1 18:28
海已静，山未青，月落于平行时空。长欢已远，迟眠五更，念心事灯火通明。相遇错失，欢悲照旧，我都承蒙。
作者:
tangtie
时间:
2019-11-2 16:51
余生就那么长，还请衷于自己。
作者:
等风初赵
时间:
2019-11-4 14:47
关于全栈，要了解T型理论，先专后全栈，千万别贪多，古人说: 广积粮，高筑墙，缓称王
作者:
娟呀
时间:
2019-11-4 15:35
这一生山高水阔，背过身，便是太阳
作者:
李大哥
时间:
2019-11-4 15:42
.所有的苦难与背负尽头 都是行云流水般的此世光阴
作者:
哎哟琪呀
时间:
2019-11-5 14:05
我把什么比做你 你是一池捞不起的波光粼粼
作者:
你好，姚
时间:
2019-11-5 16:10
明天生动而具体 有且只有一个你
作者:
夜听雨
时间:
2019-11-22 18:16
学习要加，骄傲要减，机会要乘，懒惰要除。诶，激励自己的名言，希望对你有用
欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)
黑马程序员IT技术论坛 X3.2