|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
x
在网页制作中,有许多的术语,例如:CSS、HTML、DHTML、XHTML等等。在下面的文章中我们将会用到一些有关于HTML的基本知识。
利用CSS3能够为你的网站创立多列,而不必为每列制订特定的层或段落。
上一篇文章:CSS3教程(5):网页背景图片
与多背景图片一样,CSS3多列也是我最喜好的一个手艺。我想这条CSS3属性有在报纸和杂志结构中之外的良多潜伏的用处。假如你在某个设法或团体网站中利用了这类办法,请鄙人面的批评中提交你的链接,我很乐意能确认这类办法能用于良多中结构中。
跨扫瞄器兼容性:
对照好的撑持CSS3多列的扫瞄器有Firefox、Safari、GoogleChrome,如许我们就必要利用-moz和-webkit前缀了。
CSS3多列(宽度)
下面的截图是利用了上面的CSS3款式的效果:- #multiColumnWidth{text-align:justify;-moz-column-width:20em;-moz-column-gap:2em;-webkit-column-width:20em;-webkit-column-gap:2em;}
复制代码 扫瞄器撑持:
- Firefox(3.05+…)
- GoogleChrome(1.0.154+…)
- GoogleChrome(2.0.156+…)
- InternetExplorer(IE7,IE8RC1)
- Opera(9.6+…)
- Safari(3.2.1+windows…)
CSS3多列(列数)
下面的截图是利用了上面的CSS3款式的效果:- #multiColumnCount{text-align:justify;-moz-column-count:3;-moz-column-gap:1.5em;-moz-column-rule:1pxsolid#dedede;-webkit-column-count:3;-webkit-column-gap:1.5em;-webkit-column-rule:1pxsolid#dedede;}
复制代码 扫瞄器撑持:
- Firefox(3.05+…)
- GoogleChrome(1.0.154+…)
- GoogleChrome(2.0.156+…)
- InternetExplorer(IE7,IE8RC1)
- Opera(9.6+…)
- Safari(3.2.1+windows…)
业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。 |
|