HTML＋CSS静态网页学习历程

国庆就在宿舍宅了一整天，捣鼓捣鼓网页就过去了。

这次找到了一整套前端学习的教程，先从HTML+CSS入手，随后会有HTML5+CSS3，JS，JSON，JQuery等等教程，由于是三年前的资料，没有最近火热的三大框架的，有点遗憾。

花了一整天的时间，10.02从早到晚，边学边跟着敲代码，总算是对基本的项目流程有所了解了（以前都是自己胡乱敲，能实现功能就完事了，根本不管代码的可读性啊啥的），而且发现这种标记语言虽然学起来简单，但是实际操作中回想编程语言一样遇到各种BUG，有时候明明是一样的代码，问题还是层出不穷，不过忙了一天也总算跟着弄出来了，虽然不是自己编的，但是还是有成就感啊啊啊

先放成品

》〉这是PS做的一张预期的界面图片

》〉前端的任务就是要把他变成一张可操作的网页，先看看效果视频，由于只是演示，视频中的各种链接都是空的，可根据要求补上。

》〉这是一静态网页，基本就是利用HTML写结构，CSS写样式，交互性不强。（视频上传大小限制，不太清晰）

具体过程

1.首先，根据PS大佬给的效果图进行切片，即将图中一些图标啊，艺术字啊啥的给剪下来，而后可以当成图片插入到网页中。

》〉一些细节：先按Ctrl+R（Command+R）或点击（视图➡️标尺），将标尺调出来，并右击标尺的位置设置成像素标尺，然后从左侧或者上侧就可以拖出辅助线来辅助切片。

》〉切片工具是左边工具栏的第五个按钮，辅助线做好之后就可以直接切图了，建议将图放大，在像素级别切图。

》〉因为浏览器加载网页时，是所有资源同时加载，所有每张切图要尽可能的小，比如图中的红色条（蓝色框），可以只沿横向切一个像素，在CSS中利用repeat-x可以做出整个红色条，而浏览器只需加载一张很小的图，提高了效率。

》〉切完之后保存为web格式

》〉然后点击每个切片进行保存格式选择（JPEG/GIF/PNG）以及品质（80即可）选择，然后点击存储即可。

》〉注意要按如下图设置。（用户切片即为刚刚切过的图片，切完之后剩下的还有非用户切片）

》〉之后所有的切片就会在一个设置的文件夹中了，这时候需要将所有的切片名改成可读的。

2.第二步就是敲代码了。先把网页的结构划分好，用HTML搭建好模版，然后再一层一层的加入标签，最后给标签加入样式。

》〉可以看出来，整体分为三个部分，可以先建立三个

标签，并分别加入class属性（如命名为header，center，footer）。

》〉然后再将这三部依依划分好并写出HTML。

》〉最后细写各部分并设置CSS样式。

Tips：

1.webstorm中的部分快捷键：

div.名称+tab键➡️

div>ul>li+tab键➡️

2.class="a z"可以同时为a和z设置样式。

3.cursor设置鼠标样式：

4.文本height和line-height设置为相同的值即为上下居中。

5.通用样式：

6.由于不同浏览器展示方式会稍有区别，一些标签的默认效果会不一样，所以有些样式最好统一，如的cellpadding和cellspacing统一为0，的border统一为none，按钮的outline属性（突出元素的作用，不占空间，如点击文本框时有些浏览器会显示一个蓝色框突出框的大小）统一为none等。

7.在按钮上加超链接：

,设置input的大小可让超链接覆盖整个input。

结尾

好了，接下来学习HTML5+CSS3啦，据说相比HTML+CSS多了很多新元素以及移除了很多没用的东西，标准更加统一了，还可以制作很多动态效果了网页升级ing……