最近在学习关于前端的一些知识，学习路线我是从一本书上看到的个人觉得还是蛮合适的一条路线：HTML-CSS-JavaScript-jQuery-Css3-HTML5-ASP.NET-AJAX
最开始是跟着www.w3school.com.cn/上的一点点的敲，熟悉各种标签从HTML开始到css，也有看过一些HTML和CSS入门的书籍，还自己找了一些有趣的实例的小视频，看一遍，在慢慢试着去写，会发现大体了解网页的设计过程是很有趣的，每加一个标签动画，在保存刷新，马上就能看到效果，有时为了一个好看的效果，反复修改好多遍，强迫症~~
下面是学习视频后敲的一个趣味游戏导航小页面的过程：
学习知识点：html/css布局思维、盒子模型、flex布局、css3变形、animation动画
页面展示：鼠标移到图片或文字处字体由白色变成蓝色，图片会发生弹性形变，点击图片能跳转到相应的游戏页面开始游戏。
页面设计流程：
1.新建一个文件夹：css3趣味游戏导航，将图片素材存放在images文件夹中，用EditPlus3新建一个html网页，保存在css3文件夹中
2.设置网页的基本结构：声明文档类型html、头部说明网页的基本信息用于对外通信、网页标题、设置字符编码、网页描述（打开这些是自带的，为了透彻理解所以自己写）
3.用<div></div>盒子标签来布局，css样式来设置盒子的属性宽高，在头部标签下用标签进行修饰,刷新页面会发现创建的盒子有一个外边距，要去掉浏览器默认样式,用margin设置外边距为0，padding设置内边距为0（有一个浏览器自带的检查调式html代码的工具，按F12或者单击右键检查）
�4.（1）给<div></div>盒子标签命名用于区分，然后用类名选择器来找到刚刚命名的
类进行修饰
（2）在开发规范中不要全部用<div></div>标签来构造盒子模型，要用语义化标签（虽然都可以实现效果）
(3)用<ul><li></li></div>无序列表标签，构建盒子列表，在用混合选择器选中修饰
（4）用<img src="图片路径">标签来引用图片（在css样式里面引用图片用url，在img标签里面引用图片用src），同理引入四张图片，在用混合选择器找到图片设置图片圆角，阴影。
（5）用文本标签来写图片下面的文字说明，在用混合选择器找到字设置字体颜色和样式，居中对齐。
（6）<a href="链接"></a>超链接标签来引入链接进行页面跳转，在用混合选择器找到进行设置，用hover伪类（当鼠标移动到a标签上面的时候改变颜色）
5.定义一个动画，动画名叫elastic，设置动画进行到百分之几的时候图片样式变形伸缩改变骤，以此来达到动画的效果。
6.保存刷新页面，大功告成啦！！！一个趣味游戏导航的小页面就完成了！
总结：书写格式还不规范，各种标签还不熟练，接下来打算好好把HTML和CSS入门书籍看完，在进一步学习JS。
网友评论