css

  互联网发展飞快,转眼间CSS也需要Framework来保证页面在各种浏览器上表现一致,支持缩放了, 连px像数点都不是定义布局时的最佳单位了。

   在YUI CSS 与Buleprint之间,貌似Blueprint的宽度总是比较固定,如950px,所以基本CSS框架选了YUI CSS.

3. In SpringSide3

  SpringSide3将YUI CSS2.8 r4的四个文件全压在了yui.css中,分别是:

  • reset.css:消除各种浏览器之间对HTML元素样式表现的差异,从而提供一致的样式
  • base.css:使用Reset消除了浏览器默认样式,使用Base就可以使HTML元素在A级浏览器中获得一致的表现
  • font.css:提供跨浏览器的字体样式和控制。默认大小是13px,其他px的百分比见图表
  • grid.css:提供布局。

   SpringSide3中的布局很简单, id="doc3"声明了一个100%的页面, class="yui-t2"声明了bd div左边栏180宽。id="yui-main"声明了这是主栏。id="hd,bd,ft"的意义也很明显,其他剩下的就是有时多得有点让人烦的yui-b了。

<body>
<div id="doc3" class="yui-t2">    <div id="hd"><!--header--></div>
    <div id="bd">
	<div class="yui-b"><!--leftbar--></div>
	<div id="yui-main">
	    <div class="yui-b">
		<p>各式主流的、实用的、好玩的开源项目大派对。</p>
	    </div>
	</div>
    </div>
    <div id="ft"><!--footer--></div></div>
</body>

在showcase的jmx-client.jsp中,更近一步demo了使用yui-g/yui-u进行内容排版,将两种JMX操作的Form等宽并列。

 4. CSS进阶长

    为了更好的支持缩放,现在不流行用px作为长度单位了,改用em. 常用的换算关系如下,其他可以查 http://pxtoem.com/

px
em
5 0.313
8 0.5
10 0.625
13 0.813
16 1

另外,可能是为了批量的修改字体,也会只定义一个标准body字体的大小,然后其他h1,h2等全部用百分比来表示大小。

YUI里默认大小是13px,常用换算关系如下,其他px的百分比见图表

px %
10 77
13 100%
20 153.9%
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值