这里的效率不是说开发者写代码的效率,而是浏览器执行这个选择器的效率。

在看 CSS 的书或者教程的时候,是不是看过这句话:“浏览器是从右至左来处理选择器的”。当然了,如果你没有看到过这句话也无所谓,现在有同样意思的话,就放在这里,现在看也无妨。

那么再来说下浏览器工作的过程,这里是渲染的过程,得到数据之后,浏览器要先绘制一个 DOM 树,然后再有一个 “reflow” 的过程,这个过程就是在 CSS 文件下载之后,确定要渲染的元素在 DOM 中的位置,而 CSS 样式中,很多很多在应用的时候都要有一个 “reflow” 的,过程,所以,避免这个过程,后者减少这个过程,都会相当大的提升浏览器的效率。

还有一个就是 CSS 选择器的优先问题了,这个这里不多说了。

那么,我们不多废话,直接上例子和代码:

例如,我们通常的选择器会这么写

.content a {}

那么根据上面几条理论,浏览器的工作过程是绘制好 DOM 树之后,就会查找页面中所有 a 元素了。查找到所有的 a 元素之后,又开始查找出于 .content 类下面的 a 元素,此时,如果页面有好多好多 a 元素就会是一个非常耗费资源的事情。那么如果这里有更多个 .content 呢?

所以,我们可以这么写,给每一个 a 元素添加一个 class 就可以了。

然后变为

.content .xxx {} 或者 #xxx .xxx {} 这样呢,效率就会更高了。

那么,还有一种情况就是使用太多的层了,也就是限制太多了,例如;

#xxx ul li p a {}

同样的按上面的理论来说,先找所有的 a 然后找所有包含 a 的 p ,依此类推,那么效率肯定是很低喽。

改写后的 可以给 a 添加 class,那么就可以写作 #xxx .xxx {} 效率高了不是一点两点啊。或者给 ul class 嘛,那么就写作 .xxx p a {} 但是这样效率提升并不明显啊。

好了,完了,这只是基本的方法。前端效率的提升,需要慢慢理解,慢慢琢磨,慢慢来嘛。

项目中一直有需要,但是之前使用的是另外一种方式实现,现在这种方式使用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>

话说,文件上传控件的样式,就如同下拉框的样式一样,没办法通过 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

例子二:

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

来源:翻译

主题名称: BreakUp

主题链接: https://yimity.com/2011/08/01/breakup.html

主题描述:BreakUp. 全站 Ajax 支持,SEO 友好,支持自定义菜单,支持IE8以上,及 Chrome,Firefox,Opera等现代浏览器。不需要任何插件支持。

主题版本: 0.8

主题作者: 一米

网站预览: https://yimity.com/

发布日期:8月6日,七夕节。

介绍:

全站 Ajax 支持,SEO 不受影响,JS加载失败,同样可用。支持键盘左右键翻页,支持图片标志,支持自定义菜单,自适应宽度设计。

安装:

1.将本文件解压,得到 breakup 文件夹及其内部文件,将此文件夹上传到 WordPress 程序中的 wp-content/themes 文件夹。

2.进入博客后台,外观-主题, 选择 BreakUp 主题,并且激活。

3. 进入后台,设置-阅读,博客页面至多显示 1 篇文章。

使用:

1. 上传成功,并激活成功即可使用。

2. 在 外观-主题选项中,点击“主题选项”即可设置相关的选项,不要忘记点击“更新选项”哦。

3. Logo 地址处,填上 Logo 图片的地址即可。

4. 后台所有输入框 HTML 都是可用的,但是建议该用的时候用,不该用的就不要用,比如 网站描述或者关键字。

5. 统计代码 可以使用单选框选择是否可用,选中状态则起作用,否则统计代码即使在后台能看到,但不会起作用。

6. Twitter 及 Google+ 输入用户名后或者 Google + 个人链接最后的数字后,则会在导航栏最右边链接。

7. 描述及关键词 SEO内容,如果是首页,则显示后台设定内容,如果是单页则会使用当前文章的前200字符作为描述,此文章标签作为关键字。建议最好填写。如果不填写,则默认为站点标题和副标题。

8. 多语言支持。目前只有中文简体,繁体中文及英语。

9. 其他任何问题,请联系 [email protected]。谢谢。

10. 主题为0.8版,说明只是到目前为止的完善,如有先关建议或 Bugs 也请发邮件,谢谢。

 

 

当然,因为我最近想买一个可以看书的 Android 平板,所以此份主题不是免费的,但是只出售 10 份,每份 99 元人民币。现接受预定,预定期8月1日至5日晚24时止。预订价 88 元。先付 10 元定金即可。不买不退哦亲。

购买者,享受不限时一对一服务,但是也只是我一人,当然了,大家都有工作,最好是晚上,最最好是星期周末把。

购买者,发送 G+ 邀请一枚,如果想要 知乎 邀请也有,Hostloc 要请也有,现在又增加了 Google Music 邀请,不过只有两枚。还有我可以邀请的,都可以邀请你。

购买者,可以享受首页导航右侧社会化图标的更换服务。

额,我要忙死了。为了平板值!

最后,预定链接:http://item.taobao.com/item.htm?id=12445127655  支付宝,你放心,我放心。

更新:时间 版本

2011.8.16 0.8.1
1. 更改左右方向键翻页为上下 Page 键翻页,防止评论时冲突。
2. 修复评论上部的 回复 和 引用 错误。
3. 完善菜单,增加支持三级菜单,鼠标悬停“网络”可查看。
4. 更新语言文件
5. 计划改变首页样式,中间为文章列表,右侧为侧边栏,单篇文章则中间为文章,右侧为评论。

看到蓝色理想上有人问这个效果,而且刚好项目不是那么紧张,所以就简单的写了一个效果,也是基于 jQuery 的,关于具体的应用可以看下 Alibaba 中国站右上角的搜索框的效果即可,好了,废话少说,上代码,还是放到最后吧。坚持传统。什么是传统,我也不知道,额。

先是 HTML 的结构,其实这里完全不用 这么多 id 的,只是为了少输入字符,代码每个字都是键盘输入,不能怪我懒,还有,如果你有好的自动补全的文本编辑器,不妨推荐下,注意啊,是文本编辑器,言归正传,对于 id 和 class 的使用,还是适可而止,不要学我啊。当然,怎么个适可而止法,不是本文的重点,那就略过。

<div id="a">
	<div id="b">
		<span>O</span><span>P</span><span>Q</span><span style="display:none;" class="current new"></span>
	</div>
	<div id="c">
		<div class="relative">R</div>
		<div class="absolute">
			<span>S</span><span>T</span><span>U</span><span>V</span>
		</div>
	</div>
</div>

#a是大框架,里面包括 #b 和 #c ,#b 是已经显示在搜索框上部的,当然最后一个 span 让其先隐藏,是为了将来将点击的项目 替换 到这里。#c 除了 .relative 显示之外,其他的例如 .absolute 都叫它隐藏,为的是鼠标移上去他才可以显示。

然后是 CSS 代码,写的不好不要嘲笑,刚入门,见谅,并且指导,或者交流。

	<style>
		body {
			width:400px;
			margin:100px auto 0 auto;
		}
		#a {
			width:400px;
		}
		#b,#c {
			float:left;
		}
		#b span, #c span,.relative {
			display:block;
			width:60px;
			height:30px;
			line-height:30px;
			background:#ccc;
			margin:0 5px;
			text-align:center;
			cursor:pointer;
		}
		#b span {
			float:left;
		}
		#c span,.relative {
			margin-bottom:2px;
		}
		.absolute {
			display:none;
		}
		.current {
			border-bottom:2px solid red;
		}
	</style>

这里就是让显示的显示,隐藏的隐藏,然后让两个.relative 和 .absolute 各就各位,也就是定好位子,这里叫布局,其实这个很简单,就是用了一个 float ,其他没有了。

然后是脚本,当然了,第一步还是引入 jQuery 库,这个不要我再写了吧,如果记不住,那就不用往下读了,直接到末尾拷贝代码吧,如果想记住,那就用手多输入几遍啊。

下面是 jQuery 代码,写的不好,见谅。

<script type="text/javascript">
$("#c").hover(function(){
	$(".absolute").show();
},function(){
	$(".absolute").hide();
});
$(".absolute>span").click(function(e){
	var $target = $(e.target);
	var text = $target.text();
	if ($(".new").text()) {
		var z = $(".new").text();
		$(".new").text("");
		$(".new").show().append(text);
		$target.text(z);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}else {
		$target.remove();
		$(".new").show().append(text);
		$("span").removeClass("current");
		$(".new").addClass("current");
	}
});
$("#b>span").click(function(e){
	$("span").removeClass("current");
	var $target = $(e.target);
	$target.addClass("current");
})
</script>

主要是原理,代码没什么的。

先看前四行,就是数遍移上去之后,让隐藏的显示,然后鼠标移除后,让隐藏的继续隐藏,其实也就是让刚才显示的隐藏元素继续再隐他的藏。

.absolute>span, 找到 .absolute 下面的 span ,绑定单击事件 e 是参数,e.target 是 jQuery 中封装的被点击目标对象,text(); 获取被点击目标中的文字。

然后直接判断 .new 中是否有文字,有的话先把文字暂时存到 z 中,然后将这个 .new 中的文字清空,然后让他显示,并把刚才被点击对象的文字插入进去,然后再把被点击对象的文字用 z 替换下,最后将所有 span 的 current 样式删掉,再给 .new 添加 current 样式。

此处就是为什么要将那个隐藏的 span 付给 .new 和 .current 两个 class 呢,就是为了好找。最后那么样子删样式只是为了方便。

然后,又然后了,不要郁闷,我也不是很喜欢用这么多。

然后,如果 .new 中没有文字的话,那好办了,直接将被点击的对象的文字删掉,让后将其插入进 .new 中就好了,后面的删除,添加样式都一样。

最最然后,#b>span 也是找到 #b 中的 span ,当点击的时候,去掉所有 span 的 current 样式,然后再给被点击对象一个 current 样式。OK,完成了。

演示见了这里:点击看演示喽