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……

  • 发表于:
  • 原文链接:https://kuaibao.qq.com/s/20181003G1FAF200?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券