Css3系列-新属性新布局

本文深入解析CSS3布局技术,包括弹性盒子布局、多栏布局与媒体查询,并提供解决不同浏览器兼容性的策略,如利用respond.js、PIE.htc、IEcss3.htc与DD_belatedPNG.js等工具。同时,对比动态预处理CSS技术如LESS与SASS,强调了熟练运用CSS的重要性。

大家可以下载我上传的css分析和实例展示,结合使用!

地址:http://www.oschina.net/code/snippet_2352644_50363

css3介绍:

1.弹性盒子布局介绍和使用

页面:属性css -弹性盒模型.html

2.弹多栏介绍和使用

页面:属性css -多栏.html

3.媒体查询介绍和使用

页面:属性css -媒体查询.html

 

css的降级处理办法:

1.css3的媒体查询可以实现对不同设备处理,针对ie6-ie8的不支持问题,我们可以借助 respond.js(ajax的请求实现,需要在服务器下使用)

2.针对css3圆角,渐变等,ie6-8的不支持情况,我们可以借助PIE.htcIEcss3.htc处理

3.针对ie6下png-24出现灰色背景问题,我们可以借助DD_belatedPNG.js

下载地址:http://www.oschina.net/code/snippet_2352644_50374

 

动态预处理css技术

为css嵌入语法的处理,我感觉就是多此一举,css写的熟练,何必浪费时间去学习他的东西,都说加快速度?你用记事本试试?

LESS:(有前端js类库引入的实现和服务端2种)

http://less.bootcss.com/

SASS:(需要ruby的支持)

http://www.w3cplus.com/sassguide/

 

 

 

 

转载于:https://my.oschina.net/tbd/blog/495355

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值