本帖最后由 小鲁哥哥 于 2017-12-16 15:56 编辑
【黑马程序员济南】 前端与移动开发就业班笔记CSS进阶:Day03
1. 焦点图部分所用知识点名称 | 说明 | 圆角矩形 | border-radius: 左上角 右上角 右下角 左下角。 |
负值自己的宽度一半(固定定位也是如此)
2. 背景半透明1.强烈推荐:盒子背景半透明 background: rgba(r,g,b,alpha); r,g,b 是红绿蓝的颜色, alpha 是透明度的意思,取值范围是 0~1 之间。 这个是让盒子的背景半透明,盒子里面内容不半透明 2.元素半透明 此属性是盒子半透明,不是背景半透明哦,因为里面的内容也一起半透明了 正常浏览器: opacity:0.5; 取值范围是 0~1 之间 表示透明度 0% 到 100%ie8及其以下的版本 用filter:Alpha(opacity=50) ; // opacity值为0 到 100 因此,低版本的 ie浏览器,我们不需要透明了,直接采用优雅降级的做法。 background: gray; background: rgba(0,0,0,.2); 写上两句 背景, 低版本ie只执行gray, 其他浏览器执行 半透明下面这一句。
3. 优雅降级和渐进增强什么是渐进增强(progressive enhancement)、优雅降级(graceful degradation)呢? 渐进增强 progressive enhancement: 针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 类似 爬山,由低出往高处爬
优雅降级 graceful degradation: 一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 类似蹦极,由高处往低处下落 区别:渐进增强是向上兼容,优雅降级是向下兼容。 个人建议: 现在互联网发展很快, 连微软公司都抛弃了ie浏览器,转而支持 edge这样的高版本浏览器,我们很多情况下没有必要再时刻想着低版本浏览器了,而是一开始就构建完整的效果,根据实际情况,修补低版本浏览器问题。
等后面我们学了JavaScript 来检测用户浏览器版本,如果是ie6及其以下的版本,我们就跳到这个页面上。
4. CSS W3C 统一验证工具CssStats 是一个在线的 CSS 代码分析工具 网址是: http://www.cssstats.com/如果你想要更全面的,这个神奇,你值得拥有: 因为它可以检测本地文件哦!!
5. CSS 压缩通过上面的检测没有错误,为了提高加载速度和节约空间(相对来说,css量很少的情况下,几乎没啥区别),可以通过css压缩工具把css进行压缩。 w3c css压缩 可以去站长之家进行快速压缩。
|