到目前为止html和css的课程已经结束，进入了jd首页的静态页面练习中。一步步去写的时候才现工程量还是挺大的，很多功能也不知道是如何实现的，不过经过查资料以及在老师与同学们的帮助下都基本上完成了（不牵涉JS）。
总结了一下自己遇到的一些问题也分享给大家。当我们看到这个页面的时候首先是去看，去分析，整个页面的布局（中间固定宽度，两边自适应），然后从大到小的去细化，再整理信息。我们可以把有共性的样式放到一个common.css里面，把所有需要清除元素默认样式的文件放在一个reset.css文件里/normalize.css。
标签上面的icon
<link href="./favicon.ico" rel="icon" type="image/x-icon"/>
favicon.ico文件放在文件根目录下。
定位
对于各种定位一定要熟习，然后在适合的地方用适合的方法去实现。
jd页面的顶排分左右。我用的float去实现，当然大家也可以用其它自己用起来好用的方法。
下拉菜单
然后就是头部的下拉菜单。这里分享一个学习方法，就是遇到弄不明白的东西，先查资料，然后去js bin里练习，各种尝试，越是难以理解的东西，花的时间越多，最后完成的成就感也最强，记忆也越深，然后是学会总结与分享。
之前分享的链接 http://www.jianshu.com/p/622165979fa0
还有一个问题就做之前一定要先看，深入分析。
顶部那么多的下拉菜单，他们都有哪些共同的属性，然后把所有共有的属性定义一个单独的名字去写那些共有样式，这点很重要(也包括其它元素的共性分析)。
jd旋转箭头的实现
这里我没有用图片，也没有用旋转，而是用的定位去实现，大家也可以对比。
链接 http://www.jianshu.com/p/928bffc7af02
也可以在这里下载图标制作箭头：http://www.bootcss.com/p/font-awesome/
hover效果下加边框会破坏原有的排版
在做的时候没有仔细去想，做完之后发现，每次hover后整个头部的排板都在跟着动。因为hover之前是没有边框的，hover之后加了边框2px的宽度进来，自然排把也跟着动了。
解决办法：可以设置hover之前也有边框，只是让它不显示，或者设置与背景色一致。
图片
雪碧图合成：
CSS图像合并技术，该方法是将小图标和背景图像合并到一张图片上，然后利用css的背景定位来显示需要显示的图片部分。
http://csssprites.com/
图片压缩：
无损压缩，大小可以缩小到原来的三分之一但效果不会有什么改变。
https://tinypng.com/
css里引入图片写法如：background: url(../img/logo-2015.png) 0 0 no-repeat;
html里a链接引入图片： <a href="#"><img border="0" src="img/banner.jpg" width="1210" height="80" ></a>
css3动画做时钟
参考demo: http://js.jirengu.com/koc/2/edit
这里之前同学说打不开demo,重写了一个，这个只支持chrome，另外，并不能说是一个功能完全的时钟效果，因为其实本身时针是永远没动的。
CSS3 @keyframes很重要，没有它是动不起来的，具体参考：
http://www.runoob.com/cssref/css3-pr-animation-keyframes.html
animation的各种属性：https://developer.mozilla.org/zh-CN/docs/Web/CSS/animation
到这里页面已经有了基本的样子，小有成就感。在这里要感谢饥人谷的老师和同学对我的帮助O(∩_∩)O！
附上作业:
http://book.jirengu.com/jirengu-inc/jrg-fe7/%E4%BD%9C%E4%B8%9A/%E6%9B%BE%E8%90%8D/%E4%BA%AC%E4%B8%9C%E9%A6%96%E9%A1%B5/index.html
网友评论