学习目标:
- 掌握京东中间部分制作
- 理解BFC使用
- 了解优雅降级和渐进增强
- 了解CSS压缩和验证工具
往期内容:
京东项目(二)
nav导航栏所用知识点
名称 | 说明 |
---|---|
边框底侧 | border-bottom: 2px solid #ccc; |
定位重点 | 绝对定位不占位置 相对定位占有位置 |
标签语义化dl | dl也是块级元素 dt 是 定义标题 dd 是定义描述,dd是围绕这dt来描述的,也就是说,dd算是dt 的解释说明详细分解。 |
标题标签h | 尽量少用h1,可以多用h2和h3等标签 |
固定定位的盒子靠近版心右侧对齐
跟绝对定位的盒子居中对齐原理差不多。
left 50% 然后 margin-left 版心宽度一半。
焦点图部分所用知识点
名称 | 说明 |
---|---|
圆角矩形 | border-radius: 左上角 右上角 右下角 左下角。 |
负值自己的宽度一半(固定定位也是如此)
背景半透明
1.强烈推荐: background: rgba(r,g,b,alpha);
r,g,b 是红绿蓝的颜色, alpha 是透明度的意思,取值范围是 0~1 之间。
2.了解ie低版本浏览器 半透明
filter:Alpha(opacity=50) ; // opacity值为0 到 100
但是 此属性是盒子半透明,不是背景半透明哦,因为里面的内容也一起半透明了
因此,低版本的 ie6.7浏览器,我们不需要透明了,直接采用优雅降级的做法。
background: gary;
background: rgba(0,0,0,.2);
写上两句 背景, 低版本ie只执行