请叫我一米

项目中一直有需要，但是之前使用的是另外一种方式实现，现在这种方式使用IE的滤镜直接搞定，但是还是不建议使用滤镜虽然很简单，但是资源和效率确实不敢恭维，发过来只是为了记录而已。

<style type="text/css">
body{ background:#CCC;}
#d1{width:300px; margin:100px auto; padding:50px;background:rgba(99, 55, 11, 0.2)}
p{background-color:#fff; color:#000}
#d2{background-color:#fff; width:600px; margin:0 auto; padding:10px; line-height:30px}
</style>
<!--[if lt IE 9]>
<style>
#d1{filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#3363370b,endColorstr=#3363370b);}
</style>
<![endif]-->
<div id="d1">1、背景透明内容不透明<p>2、背景透明内容不透明</p></div>
<div id="d2">
background 的 rgba参数(red,green.,blue,alpha),alpha值0-1<br />
ie滤镜参数#3363370b，前两位为16进制透明度，<br />
比如说值是上面用到的0.2，那么就是0.2×255＝51，再转换成16进制为33<br />
</div>

CF Image Host 作为一个非常好用的图床源码，不需要数据库支持，而且提供完备的外链功能，适合查看图片各种大小的缩略图，以及完整图片的真实链接地址，适合各种情况下使用，然而 CF 只提供了 Apache 的伪静态规则，所以，如果要安装在 nginx 服务器上，则如果需要静态化的话，则需要添加相应的伪静态规则，但是这个规则又不是每个都会写的，而且在网上找到对于目前最新版本的 1.4.2 来说，正常可以使用，但是相册页面的分页则会出错，所以稍微修改了下，使在相册页面的分页也可以正常使用了。那么，规则如下：

rewrite /pm-(.*)\.(jpg|png|gif|html)$ /index.php?pm=$1;
rewrite /pt-(.*)\.(jpg|png|gif|html)$ /index.php?pt=$1;
rewrite /dt-(.*)\.(jpg|png|gif)$ /index.php?dt=$1;
rewrite /dm-(.*)\.(jpg|png|gif)$ /index.php?dm=$1;
rewrite /di-(.*)\.(jpg|jpeg|png|gif|bmp)$ /index.php?di=$1;
rewrite /gallery/(.*)\/$ /gallery.php?p=$1;

其实，对于这么一个小小的图床来说，几乎可以不使用伪静态，而且伪静态之后，其连接地址也一点不好看。

还有，据站长说，目前正在开发第一版 Pro 版本的程序，增加了账户注册等功能，还是蛮期待的。

我的图床地址，大家可以免费使用，但是，请谨记，只可以上传 “好图” 哦。 http://haotuu.com

错误一：

行内元素和块级元素混用，例如：

<a href="#"><h2>This is wrong.</h2></a>
<h2><a href="#">This is right.</a></h2>

a 行内元素，hx 块级元素。

错误二：

img 元素未包括 alt 属性。

<img src="a.jpg" />  <!--Wrong-->
<img src="a.jpg" alt="this is a image" /> <!--Right-->

错误三：

正确的时候使用 lists 结构。例如：

<p>
    This<br />
    is<br />
    very<br />
    Wrong<br />
</p>
<ul>
    <li>This</li>
    <li>is</li>
    <li>very</li>
    <li>Right</li>
</ul>

错误四：

标签应该从语义触发，而非样式。例如：strong 更好

<b>This is bold.<b>
so<strong>is this, but this is better.</strong>

错误五：

最好用 css 而非结构控制，例如：

This is
<br />
<br />
Wrong.

错误六：

还是注意标签的语义化。例如：

<s>和<strike>已经被抛弃了。
<del>和<ins>才是新的可用的哦。

错误七：

使用内联样式，例如：

<h2 style="color:red;">This is Wrong.</h2>

错误八：

在 html 结构中使用已经被抛弃的属性，而应该使用 css 控制，例如：

<img src="a.jpg" alt="xxx" border="0" />

错误九：

没有正确使用 header 标签，例如：

<p><strong>This is header but wrong</strong></p>
<p>this is content.</p>

<h2>This is right header</h2>
<p>this is content.</p>

错误十：

不要使用非标准的和不推荐使用的标签，例如：

<blink>This is Wrong.</blink>
和
<marquee>This is Wrong.</marquee>

记下来，祭奠6年的爱情，5年异地恋，每年见面的时间加起来不足一个星期，1年一个城市，只是每个月能见一两面了而已。或许，只是为了记下来，等到所有的东西都不在，想起的时候心不再痛，不在有想哭的感觉的时候，再放出来吧。

2011.7.19
分手

2011.7.20 – 2011.7.28
一切都还好，还了很多东西，就是感觉失落，不想说话，总有想哭的冲动，突然一个人的感觉，总是很不习惯，不过我想会好起来的。

2011.7.29
突然很想抽烟，买了包烟，买了个打火机，妈妈差点发现。

2011.7.30
上了会网，感觉还行，只是有种透不过气的憋闷。烟抽了差不多半包吧，每一根头都疼，有时候会恶心。

2011.7.31
上午一个人，还是早点回西安吧，睡了整整一天。

2011.8.1-2011.8.5
上班的感觉还不错，比较忙，想不起很多东西，所以过的还不错。期间收到了 EMS 的信用卡。

2011.8.6
一个人的周末莫名的难过，想删了所有的联系方式，但是还是忍住了，打算到一个月的时候，将所有东西都删掉。
受不了了，或许我也有难过的时候买东西的习惯吧，买了个昂达的VI30，花了1500，心理感觉好很多了。

2011.8.7
睡觉，看电影，《初恋那些小事》，哭了。你知道我有多爱你吗？知道吗？

2011.8.8-2011.8.12
上班的时候总是好一点，但是貌似越来越难受了，想到了就会非常有哭的冲动。几乎一个星期两包烟，空的时候总是忍不住想抽烟，一根接一根。

2011.8.13
做梦了，梦到和你复合了。还好没有哭。

2011.8.14
看电影，买了好几包泡面，不想出门。

2011.8.15-2011.8.19
上班的时间比较空，但是心理更难受，说不出的难受，其实我真的希望下班之后回到家看见你在门口等我，虽然理智告诉我不能继续了，但是我真的希望你能一直坚持的说咱们继续吧，一直坚持一直坚持直到我答应。
但是没有。每天至少三四根烟，一空就想抽。

2011.8.20
想了想去赛格给笔记本清了和灰，加了两根内存，心理舒服多了。
把脚上的红绳剪断丢掉了。

2011.8.21
睡觉，重做了个系统，忙碌的时候想不起你，感觉挺好的，一想起，就想哭。越来越没出息了。

2011.8.22
看了部电影《财神客栈》又哭了，第二次哭了，为什么越来越难受。

2011.8.23
又梦见你了。

2011.8.24
还是梦见你了，你说要复合，但是我想我们肯定回不去了，所以拒绝你了。

2011.8.25
现在每天都坐207，不敢看你的单位，不敢看之前走过的路，每次看到都会眼红。
每次打扫了房间，放好鞋子袜子了，每做一件事，潜意识里都会想是否是按你的意思做的，是否让你满意了，潜意识里还是希望我做这件事能让你高兴。
很苦恼，几乎每件事都是。
下午看到天气成那样子了，真的很想很想很想给你打电话问你怎么回家？可是我还是忍住了。晚上和龚应杰聊天，说我没出息。

2011.8.26
晚上睡觉梦见你，在公交车上，但又好像在船上，我努力的接近你，你拍拍旁边的座位，于是我们和好了，可是后来，你又走了。
接了一单私活，大概有300块吧，想给你分享一下喜悦呢，但才想起来，已经不可以了。

2011.8.27-2011.8.28
没有梦见你了，不过我想了很久很久，我鼓起勇气又加了你的 QQ，跟你聊天。

2011.8.29
晚上做梦梦见被蛇咬了，网上说是交好运或者有才。但才没有，我想试试我的运气。
但是你说都回不去了，其实我真的可以回去的。你忙吧。
我决定，要坚决的忘记你，永远的忘记你。

再见，我六年的爱。

或许，永不再见

至此，结束。

话说，文件上传控件的样式，就如同下拉框的样式一样，没办法通过 CSS 直接进行控制，虽然不影响正常的网页浏览，但是对于一个设计师的心血来说，不能完全还原，还是比较令人郁闷的，但是，活人总不能叫尿憋死，所以总是有很多方法能够达到我们的目的，例如： Mr.Think 的这篇文章，或者这篇文章。但是第一个不兼容IE6，比较遗憾，虽然我现在在自己的项目上坚决不支持IE6，但是，解决方法还是要掌握的。

另一个因素就是 Chrome 下的空间样式和 IE 以及 火狐下不同，具体就不举例子了。

最近想到这个问题，所以写出来和大家分享下，也兼容IE6，那就是，用一个层，将 input 空间给包裹起来，然后将控件相对定位，将包裹的层，例如 a 绝对定位到控件之上，并且给其样式，可以使用 span 或者 a 元素，由你喜欢，但是为了兼顾 IE6 ，还是用 a 比较好，因为 a 可以在 IE6 下产生 手型 的鼠标样式。所以这里就拿 a 来举例，span 或者其他的，就自己发挥吧。

先看图。

那么接下来，就看代码了。

先是结构

	<input type="text" id="a" readonly="readonly" />
	<a href="javascript:void(0);" class="input">
		浏览
		<input type="file" id="file">
	</a>

此处第一个 input 为模仿 文件路径的输入框，使用 javascript 在选择完成之后，把文件路径填到此处。第二个 a 标签模仿控件，第三个 input 是实际起作用的控件，只不过隐藏了而已。

然后是 CSS

a.input {
	width:100px;
	height:25px;
	line-height:25px;
	background:#08f;
	text-align:center;
	display:inline-block;/*具有行内元素的视觉，块级元素的属性 宽高*/
	overflow:hidden;/*去掉的话，输入框也可以点击*/
	position:relative;/*相对定位，为 #file 的绝对定位准备*/
}
a.input:hover {
	background:#f80;
}
a{
	text-decoration:none;
	color:#FFF;
}
#file {
	opacity:0;/*设置此控件透明度为零，即完全透明*/
	filter:alpha(opacity=0);/*设置此控件透明度为零，即完全透明针对IE*/
	font-size:100px;
	position:absolute;/*绝对定位，相对于 .input */
	top:0;
	right:0;
}

然后是 javascript 代码，此处给了 原生的 javascript 和 jQuery 方式。

原生 javascript

<script type="text/javascript">
	var input1 = document.getElementById("file");// 获得控件对象
	input1.onchange = inputPath; //当控件对象 input1 有变化时执行函数 inputPath
	function inputPath() {
		var input2 = document.getElementById("a"); // 获取 input 对象 input2
		input2.value=input1.value;  // 将控件 input1 的值赋给 input2 
	}
</script>

jQuery 方式

<script type="text/javascript">
$(function(){
	$("#file").change(function(){  // 当 id 为 file 的对象发生变化时
	        $("#a").val($("#file").val());  //将 #file 的值赋给 #a 
	})
})
</script>

OK，打完收工.

对，还有演示呢：

这其实是一个非常普通的问题，在 很久 很久 很久，真的很久以前，已经被说过很多次了，不过都是英文的，其实中文的也有很多，但是我还是想翻一下，一方面自己加深印象，两一方面很多初学者也可以很容易搜都，看到。那么就开始了。

问题描述就是，当使用了浮动(float)布局的时候，就是父层的高度不会自动扩展到浮动子层的高度，具体表现为，子层的高度出来了，但是利用开发工具看的话，只能看到子层的高度，父层就只有那么一点点高。

解决办法其实很简单，1. 在浮动元素之后使用 clear 属性，清除浮动即可，2. 给父元素使用 clearfix 属性，但是IE支持有问题。3. 使用 overflow 属性，这里就着重讲一下 overflow 清除浮动的方法。

例子一：

此例子主要讲解浮动内容子层，没有把父层撑开的问题，简单的结构可以如下。

<div class="container">
    <div class="a"></div>
    <div class="a"></div>
</div>

.a {float:left;}

这就会导致父层不被撑开的问题，解决方法很简单，父元素 overflow:auto 或者 overflow:hidden。即：

.container {
    overflow: auto;
}

如图：

例子二：

overflow: auto; 也可以被用作阻止文字环绕图片，例如 再设计 WP 博客的评论时，一个头像在左侧，评论内容在右侧，又不能设置宽度等，此时就可以给评论的层设置 overflow: auto; 即可，优点就是不用设置宽度或者浮动，即可使文字自动不环绕图片，又在其后。

如图：

.image {
    float: left;
}
.text {
    overflow: hidden;
}

问题：

1. overflow: auto; 如果文字很长，或者图片很大，总之内容超出了父层规定的区域，那么就会产生滚动条。

解决办法
1. 使用 overflow: hidden; 当然，如果你意思是多余内容要产生滚动条，那就用 auto;
2.使用 word-wrap: break-word;(文字) 和 max-width: 100%;(图片，使用后就自动缩放了)（当然，IE6 你懂得，我几乎放弃它了，不过）

demo 那么就要出现了。

demo1

demo2

来源：翻译