liangjunjie跟着李南江学习-项目总结

在学习了十几天的html知识里面，我们跟着江哥讲授的视频做了一些小练习小项目，在这其中我觉得受益匪浅，并且在制作这些小练习小项目的时候，带给了我困难和经验。下面我就来说说几个给我印象深刻的项目练习。

首先这是一个比较常见的注册列表的页面，在这个页面里面运用了好多input标签的使用，有几个要注意的是 例如密码是用password属性这样密码就会不会被看到。还有单选复选框，2个框都需要设置一个默认值，还有name的属性必须是一致的。然后个人介绍的文本框可以设置每行每列的文字，最后是下面2个按钮也可以改名字。

然后是这个百度首页的练习。这个练习要注意的地方是有很多a标签的使用和设置。还有要开始划分3个大的区域来分别完成他们。然后是内容换行排列的地方比较多。

这个背景图的定位和设置的属性就要注意一下，特比是嵌套里面的小图片的宽高，不能放了图片直接定位。还有就是fireworker的使用。

在这个网易注册的页面里面，除了分开3大区域分别制作以外，我觉得最困难的就是制作中间这个注册的页面，因为里面要利用比较多的浮动还有小细节，例如3个切换界面就要用ulli来制作，还有小红星也是要为他添加一个span标签来改变他的颜色。

这是一个过渡动画的基本界面，刚开始学习这个的时候我觉得突然有难度了，加的内容有点多，虽然看上去简单的2个动画效果，但是运用到了动画的时间分区0%~100%，还有旋转的属性。

这是利用了动画效果的新的知识点，就是当ul被鼠标hold住的时候文字会散开，这个知识点后面运用的挺多的。

这是一个动画效果，要注意的是设置动画向左运动的，就是负值，然后3个云层移动的距离也是不一样的，才有分层效果出现。

这也是一个无限循环的广告的效果，里面有4个不同的图片。要注意的是鼠标停留的时候，其他板块会暗色下来，然后要头尾设置2个一样的图片，这样就会打一个视觉差做到无限循环滚动的样子。

这也是一个无限滚动的广告，不过这个要设置一个3d属性，还有记得是设置perspective来达到近大远小的效果，还有这个图片的旋转页面要每一个90度旋转设置了正面的每个面，再设置2边，才能达到每个面看到的画面都是正的效果。

这是一个模仿张学友的海报的效果。这里注意的地方也是比较多，一个是6面照片旋转动画设置时，要加上rotateX的角度 才可以看到6个面。还有透明度的颜色是跟随父元素的背景颜色来决定的。最后是若隐若现的那个图片要每段设置透明度从1~0 然后又0~1。

以上这几个例子都是我学习过程中觉得比较需要注意和留意的例子，看上去简单，但是你忽略了一些小细节可能达不到你想要的效果。css设置也是要比较谨慎的。在未来的学习里面也是一样。

学HTML5就选李南江，选培训机构我只选小码哥（www.520it.com）