三月, 2010

未分类 — 19 Comments
28
三 10

图文混排一粒

过需求时一不留神，很爽快的接了个如下图的效果：

条件及要求：

  1. 图片宽度及高度不固定
  2. 分享给好友贴底
  3. 照片描述及分享给好友左侧距图片10px
  4. 照片描述由后台控制输出字数

等做起来发现还挺折磨人，本想下周甩他们一句做不了完事，不过考虑 200,000,000+ P-people  no jobs… 马上变得蛋定，上代码：

<!DOCTYPE html>
<html>

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>图文混排</title>
<link href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css" rel="stylesheet">
<style>
.feed{margin:10px;width:500px;}
.feed-img{float:left;position:relative;#zoom:1;margin-right:10px;_margin-right:7px;}
.feed-img img{vertical-align:top;}
.feed-img .act{position:absolute;bottom:0;left:100%;margin-left:10px;white-space:nowrap;}
</style>
</head>

<body>

<div class="feed">
	<div class="feed-img">
		<img alt="犀利哥" height="430" src="http://img1.gtimg.com/cq/pics/29734/29734288.jpg" width="300">
		<p class="act"><a href="##">分享给网友乡民</a></p>
	</div>
	<div class="feed-text">
		<p>cool~</p>
	</div>
</div>

</body>

</html>

——————– 补充提醒分割线 ——————–
评论前确保您已看过减小 HTML 文件

未分类 — 3 Comments
25
三 10

[视频]Object Oriented CSS by Nicole Sullivan

不建议在线看，速度太慢，建议FQ后下载：Object Oriented CSS by Nicole Sullivan（OGV格式，射手OK，QQ影音貌似不行）

未分类 — 2 Comments
19
三 10

css换行符对gzip的影响

之前做过一个css压缩工具CssOptimizer，其中一点是把换行符都去了，有同事反映这个做法过于极端，加上服务器端会进行gzip，这个换行符到底要不要去掉呢？于是拿了个项目中的文件简单测试了一下（css中的注释已去除）：

去除换行符 保留换行符
gzip前 46.4KB 48.0KB
gzip后 8.40KB 8.58KB

可见，去除换行符对性能来说还是有好处的，不过前提是注意这些网站优化原则。

未分类 — 1 Comment
3
三 10

Determining IE8′s Document Mode

via How IE8 Determines Document Mode

未分类 — 2 Comments
2
三 10

宽度自适应的输入框

YUI中有一种布局思想：栅格决定宽度，内容决定高度，今天讨论的是自适应宽度的输入框，先上代码：

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title>宽度自适应输入框</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style>
.col{padding:10px;width:500px;background-color:yellow;}
.fluid-input{display:inline-block;width:100%;overflow:hidden;}
.fluid-input-inner{display:block;padding-right:10px;#zoom:1;}
.fluid-input .text, .fluid-input textarea{border:2px #ccc solid;padding:3px;width:100%;}
.fluid-input textarea{height:300px;}
</style>
</head>

<body>

<div class="col">
    <b class="fluid-input"><b class="fluid-input-inner"><input class="text" type="text"></b></b>
    <b class="fluid-input"><b class="fluid-input-inner"><textarea></textarea></b></b>
</div>

</body>

</html>

简单说一下原理：

为了有较好的体验，input[type='text']及textarea一般会有border值及padding值（鄙视某些padding设为0滴淫儿），利用如下公式：

.fluid-input-inner{padding-right:输入框左边框 + 输入框右边框 + 输入框左padding + 输入框右padding}

让输入框继承fluid-input-inner的宽度即可实现自适应；而IE6有个宽度超出自动撑开的bug，故再多套一层fluid-input，宽度100%，溢出隐藏即可。

col宽度随意，在宽度自适应布局中默认为auto，这里方便演示定了宽度。

这里由内而外解说，不过命名是由外而内的。

更进一步

focus时border变为4px咋整？

问的好（其实是偶自己在问），输入框focus后增加class=”focus”，即变为：

<textarea class="focus"></textarea>

CSS:

.focus{position:relative;left:-2px;border-width:4px !important;}

———————— 乡民问答分隔线 ————————-

美女@jeannewoo反馈了个bug，IE6下textarea输入文字的时候就自己撑开了（昨晚下班路上@ivane也跟我说过，不过我没当回事，嘿~），我试了一下果真如此，解决方法很简单：触发fluid-input-inner的hasLayout即可。

美女又问为什么用s，我想了一下换成了b，想知道原因么？看这个 http://www.youtube.com/watch?v=vjLdp5tJM0c