这是我的新宠。曾经960也是这么风光一段时间,不过是时候见异思迁了!没办法,这是活在前沿的ruby人的生活态度。用古人的一名话讲,这叫做“流水不腐,户枢不螻”!
当然并不是960不好,但其内蕴就是这么多,再深挖也挖不出什么!YUI看来也只个很好的选择,什么负边距,液体布局,可变字体都是值得借镜的。然后能力有限,想一口吃成胖子是不可能。因此我的目光还是停留在blueprint吧,下个驿站再选YUI。
下面遂个介绍一下。
没有什么好说的。
默认行高为1.5。表格的border是分开的。
字体的单位是em,这比960有进步。其实里面许多样式都是属于重置范畴,只不过大把大把地运用em这个相对单位。
强制背景为白色,这点令我很不爽!
对表单的文本域,按钮,下拉选择框,单选铵扭等元素进行设置。
还提供了三种样式:.error,.notice, .success,恰恰是flash的三种状态。
首先提供了个container类把所有东西都包起来,为950px。
从span-1到span-24,宽度依次递增40px,最小的span为30px,最大的span-24为950,都向左浮动,换言之,他们即是块元素也能并列放置。最大能把页面分割成24列。除了span-24,其他的都有右边界,为10px。
以上是全局范围,在文本域与多行文本框中,也一样分为24列。最小为18px(十八周岁,成年的年龄),然后又40px往上加就是!与上面的.column类不同,它们左右都有空隙,边框为1px,内补丁为5px,即为12px。
还提供了23个后缀(append),让它的可见区往右边增加40*(2-x)px!23个前缀(prepend),从左边扩大可见区。24的pull,利用负边距技术,将目标整体往屏幕左边移动。功能相仿的24个push,移到右边,但保留原来移到的空间。
既然有column,便有gutter,可惜这是CSS3的。blueprint是统一把右边界,右边框与右补丁并成一条槽。
div.border {padding-right:4px;margin-right:5px;border-right:1px solid #eee;} div.colborder {padding-right:24px;margin-right:25px;border-right:1px solid #eee;}
最后提供了一盒子类与两个经典清除浮动类。
img { -ms-interpolation-mode: bicubic; }
IE7的私有属性-ms-interpolation-mode,用于解决缩放图片失真问题
其实IE的BUG挺多的,这个CSS也不全面,比起YUI差很多。如高度自适应问题(外围的div不能完全把里面的div框住),光一个height:1%显然是不够的。
.self_adaption { overflow:auto;/*非IE与IE7*/ _height:1%;/*IE6*/ }跨游览器的最小高度实现
.min_height{ background:#ccc; min-height:100px; height:auto !important; height:100px; overflow:visible; }在IE6下的最小宽度及最大宽度最好使用expression解决,例如: #id{_width:expression(document.body.clientWidth>1024?"700px":"auto");} li 元素中包含img 元素时,IE下img会多出5像素空白(现在发现,只要包含块级样式元素都出现这问题)。
个人推荐方法三。
在表格中实现折行。
#table { table-layout: fixed; /*相关资料*/ } #table td{ word-break:break-all; /*相关资料*/ word-wrap: break-word;/*相关资料*/ }
一个在IE和Firefox都可以完美解决页面强制换行问题的解决方案,用到nowrap属性。
IE浮动边界BUG,也就是著名的双倍margin BUG。
出现条件:在一个容器中,如其内部的一系列容器以浮动形式排列,当我为这一浮动容器设置佐边距(margin-left)时,该死IE6竟然会将第一个浮动容器的左边距自动double(双倍),真是匪夷所思。
解决方法:将浮动容器的display属性定为inline。
引51js.com超版aoao的一句话
我现在一般只要出现float 后面就一定跟display:inline;
在YUI会将虚线框outline设成none,说是影响美观。最近看了一篇《页面的易用性:为什么要去掉链接周围的虚线框?》,决定再也不做这种傻事了!
这里所说的铵钮可不是<input type="button" value="普通按钮"/>,<input type="submit" value="提交"/>,<input type="reset" value="重置"/>这三种由input元素生成的按钮,而是被遗忘了的button元素所生成的按钮。想实现上述三个的功能,只需要把button type设置成相应属性就成了!
html的button标签和input type="button|submit|reset"起的作用是一样的,button标签在ie6,ie7下默认不写type属性的行为相当于<button type="button" >,即不会造成form 提交;而在ie8和firefox下不写type默认相当于<button type="submit" >, 即会提交表单。
为什么需要button元素呢?根据W3C的定义,button元素就是为了解决跨浏览器表现上的差异才应运而生。
Buttons created with the BUTTON element function just like buttons created with the INPUT element, but they offer richer rendering possibilities: the BUTTON element may have content. For example, a BUTTON element that contains an image functions like and may resemble an INPUT element whose type is set to “image”, but the BUTTON element type allows content.
而且button元素在css的制定上远远比input人性化多了!
用法
<button type="submit" class="button positive"> <img src="css/blueprint/plugins/buttons/icons/tick.png" alt=""/> Save </button> <a class="button" href="/password/reset/"> <img src="css/blueprint/plugins/buttons/icons/key.png" alt=""/> Change Password </a> <a href="#" class="button negative"> <img src="css/blueprint/plugins/buttons/icons/cross.png" alt=""/> Cancel </a>
用了CSS2的属性选择符,一看IE6就没戏。如:
/* External links */ a[href^="http:"] { background-image: url(icons/external.png); } /*href^="http:"指以"http:"开头*/ a[href^="mailto:"] { background-image: url(icons/email.png); } a[href^="http:"]:visited { background-image: url(icons/visited.png); } /* Files */ a[href$=".pdf"] { background-image: url(icons/pdf.png); } /*href$="http:"指以".pdf"结尾。*/ a[href$=".doc"] { background-image: url(icons/doc.png); } a[href$=".xls"] { background-image: url(icons/xls.png); } /* Misc */ a[href$=".rss"], a[href$=".rdf"] { background-image: url(icons/feed.png); } a[href^="aim:"] { background-image: url(icons/im.png); }
顺便一提,这部分东西完全就抄Elements(另一个CSS框架)!
一些实践!
分栏(Columns)的实现
blueprint定义了.column , .span-x ,.last ,两者结合来实现分栏功能。 其中:.column定义栏目的float属性;.span-x定义栏目宽度;.last将margin-right置为0px。
.column { float: left; margin-right: 10px; padding: 0; } /* Use these classes to set how wide a column should be. */ .span-1 { width: 30px; } .span-2 { width: 70px; } .span-3 { width: 110px; } .span-4 { width: 150px; } ... .span-8 { width: 310px; } .span-9 { width: 350px; } .span-10 { width: 390px; } ... .span-23 { width: 910px; } .span-24 { width: 950px; margin: 0; } .span-25 { width: 200px; }/*自定义的类,但违背原blueprint的计算公式*/ .span-26 { width: 1150px; margin: 0; }/*自定义的类,用于宽屏,显然950px实在太小气了一些!*/ /* The last element in a multi-column block needs this class. */ .last { margin-right: 0; }
三栏的实现:1+16+4.last=24这种通过简单的计算就可以设计出分栏布局的思想是来自960的!
<divclass="container"> <divclass="column span-24"> Header </div> <divclass="column span-4"> Left sidebar </div> <divclass="column span-16"> Main content </div> <divclass="column span-4 last"> Right sidebar </div> </div>
四栏的实现:4+3+15+4.last=26
<div class="container"> <div class="column span-26"> Header </div> <div class="column span-4"> Left sidebar </div> <div class="column span-3 "> Main content 0 </div> <div class="column span-15"> Main content 1 </div> <div class="column span-4 last"> Right sidebar </div> </div>
注意把.container中的width(定义了整个页面的width)修改为1150px
空白栏目的实现:
对于多栏目(例如5栏目),其中有空白栏目(例如左右两栏目为空白),可以使用.append-x和.prepend-x来填充。
其中.append-x在栏目后(padding-right)添加空白栏目,.prepend-x在栏目前(padding-left)添加空白栏目。
通用的容器定义
/* A container should group all your columns. */ .container { text-align: left; position: relative; padding: 0; margin: 0 auto;/* Centers layout */ width: 1150px;/* Total width */ }
另一个例子
<div class="container showgrid"> <div class="span-24"> 头部页眉 </div> <div class="span-4"> 左边侧栏 </div> <div class="span-16"> <div class="span-8"> 居中行1-1 </div> <div class="span-4"> 居中行1-2 </div> <div class="span-4 last"> 居中行1-3 </div> <div class="span-16 last"> 正文内容 </div> </div> <div class="span-4 last"> 右边侧栏 </div> <div class="span-24"> 页脚 </div> </div>
下一部分将讲述如何结合rails进行迅敏开发!