一起CSS

当前位置:一起CSS

CSS Expressions有多可怕

日期:2009-09-8 分类:CSS

CSS Expressions 俗称 CSS 表达式,避免使用 CSS Expressions 是前端开发的一个重要指南,为什么要避免使用 CSS Expressions 呢?我们看看雅虎YUI的说明:

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

从上面可以看出 CSS Expressions 是如此的可怕。但也许单纯的文字说明还不能使你深入的明白 CSS Expressions 的可怕,那就引用子鼠的例子来实际说明吧:

XHTML 和 JS 代码:

<body>
计算了<input id="c" />次
<script type="text/javascript">
var k = 0;
function test() {
	k++;
	document.getElementById('c').value = k;
	return;
}
</script>
<div>
	<ul>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
		<li><a href="11111111111111111111">22222</a></li>
	</ul>
</div>
</body>

阅读全文 >

查看:3,404 评论:3 标签:

自动播放的jQuery幻灯片

日期:2009-09-3 分类:未分类

读者“辣椒”在《jQuery写的一个幻灯片》中留言说幻灯片没有自动播放效果,其实写好之后不久就觉得少了点什么,看来看去,最后发现就是缺少自动播放效果,想找个时间把自动播放的效果加上,但似乎总是没有时间。今天就乘读者“辣椒”提出了这个问题,就抽时间写一下吧。

结构和样式都没有变,只有 jQuery 代码有变,具体的代码如下:

var theInt = null;
var curclicked = 0;
$(function(){
	$('#transparence').css('opacity','0.4');
	$('#pic_list img').css({'opacity':'0.6'});
	$('#pic_list img:eq(0)').css({'top':'0','opacity':'1'});
	$('#pic_list a').click(function(){return false});
	t(0);
	$('#pic_list img').mouseover(function(){
		if($('#this_pic').attr('src') == $(this).attr('src')) return;
		t($('#pic_list img').index($(this)));
	});
});
t = function(i){
	clearInterval(theInt);
	if( typeof i != 'undefined' )
	curclicked = i;
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	theInt = setInterval(function (){
		i++;
		if (i > $('#pic_list img').length - 1) {i = 0};
		$('#this_pic').fadeOut(0).fadeIn(500).attr('src',$('#pic_list img').eq(i).attr('src'));
		$('#this_a').attr('href',$('#pic_list img').eq(i).parents('a').attr('href'));
		$('#this_a').attr('title',$('#pic_list img').eq(i).parents('a').attr('title'));
		$('#pic_list img').eq(i).parents('li').nextAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).parents('li').prevAll('li').find('img').animate({top:18,opacity:0.6},500);
		$('#pic_list img').eq(i).animate({top:0},500).css('opacity','1');
	},3000)
}

查看Dome

查看:6,564 评论:15 标签:,

HTML4和浏览器默认样式

日期:2009-08-31 分类:CSS

HTML 4 标签:h1-h6,p,ul,ol,dl…即使没有给他们定义样式属性值,他们在浏览器中显示时,也会具有各种样式属性(主要是字体大小和各种间距)。这是因为它们各自有自己的默认样式,或者是浏览器给它定义了默认样式。各种版本的浏览器给他们定义的默认样式可能略有差别,下面列举的一些常见标签自身默认样式和在 Firefox 1.5 和 IE6/7 中的默认样式。

HTML样式

html, address,blockquote,body, dd, div,dl, dt,
fieldset, form,frame, frameset,h1, h2, h3, h4,h5, h6,
noframes,ol, p, ul, center,dir, hr, menu, pre { display: block }
/*以上均为块状显示,未列出为内联元素显示,部分元素在XHTML1中将废弃*/
li { display: list-item }/*默认以列表显示*/
head { display: none }/*默认不显示*/
table { display: table }/*默认为表格显示*/
tr { display: table-row }/*默认为表格行显示*/
thead { display: table-header-group }/*默认为表格头部分组显示*/
tbody { display: table-row-group }/*默认为表格行分组显示*/
tfoot { display: table-footer-group }/*默认为表格底部分组显示*/
col { display: table-column }/*默认为表格列显示*/
colgroup { display: table-column-group }/*默认为表格列分组显示*/
td, th { display: table-cell; }/*默认为单元格显示*/
caption { display: table-caption }/*默认为表格标题显示*/
th { font-weight: bolder; text-align: center }
/*默认为表格标题显示,呈现加粗居中状态*/
caption { text-align: center }/*默认为表格标题显示,呈现居中状态*/
body { margin: 8px; line-height: 1.12 }
h1 { font-size: 2em; margin: .67em 0 }
h2 { font-size: 1.5em; margin: .75em 0 }
h3 { font-size: 1.17em; margin: .83em 0 }
h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu { margin: 1.12em 0 }
h5 { font-size: .83em; margin: 1.5em 0 }
h6 { font-size: .75em; margin: 1.67em 0 }
h1, h2, h3, h4, h5, h6, b,strong { font-weight: bolder }
blockquote { margin-left: 40px; margin-right: 40px }
i, cite, em,var, address { font-style: italic }
pre, tt, code, kbd, samp { font-family: monospace }
pre { white-space: pre }
button, textarea, input, object, select { display:inline-block; }
big { font-size: 1.17em }
small, sub, sup { font-size: .83em }
sub { vertical-align: sub }/*定义sub元素默认为下标显示*/
sup { vertical-align: super }/*定义sub元素默认为上标显示*/
table { border-spacing: 2px; }
thead, tbody, tfoot { vertical-align: middle }
/*定义表头、主体表、表脚元素默认为垂直对齐*/
td, th { vertical-align: inherit }
/*定义单元格、列标题默认为垂直对齐默认为继承*/
s, strike, del { text-decoration: line-through }
/*定义这些元素默认为删除线显示*/
hr { border: 1px inset }/*定义分割线默认为1px宽的3D凹边效果*/
ol, ul, dir, menu, dd { margin-left: 40px }
ol { list-style-type: decimal }
ol ul, ul ol, ul ul, ol ol { margin-top: 0; margin-bottom: 0 }
u, ins { text-decoration: underline }
br:before { content: "A" }/*定义换行元素的伪对象内容样式*/
:before, :after { white-space: pre-line }/*定义伪对象空格字符的默认样式*/
center { text-align: center }
abbr, acronym { font-variant: small-caps; letter-spacing: 0.1em }
:link, :visited { text-decoration: underline }
:focus { outline: thin dotted invert }
 /* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] { direction: ltr; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
BDO[DIR="rtl"] { direction: rtl; unicode-bidi: bidi-override }
/*定义BDO元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
*[DIR="ltr"] { direction: ltr; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="ltr"时的默认文本读写显示顺序*/
*[DIR="rtl"] { direction: rtl; unicode-bidi: embed }
/*定义任何元素当其属性为DIR="rtl"时的默认文本读写显示顺序*/
@media print { /*定义标题和列表默认的打印样式*/
    h1 { page-break-before: always }
    h1, h2, h3,    h4, h5, h6 { page-break-after: avoid }
    ul, ol, dl { page-break-before: avoid }
}

阅读全文 >

查看:1,410 评论:没有评论

语义化的HTML结构到底有什么好处?

日期:2009-08-5 分类:前端技术

相信大家都知道html和css,知道html结构和css表现分离,知道html语义化,这些都是这几年的热门关键字。语义化的html在国内也是一两年前才开始被追捧的,看看现在群里谈论的html结构,关于html结构的面试题,语义化的html占据了很大一部分。那么为什么要使用语义化的HTML?语义化的HTML到底有什么好处呢? HTML是提供网页文档内容的上下文结构和含义;html本身是没有表现的,我们看到例如<h1>是粗体,字体大小2em,加粗;<strong>是加粗的,不要认为这是html的表现,这些其实html默认的css样式在起作用,所以首先我们要知道html和页面的表现是没有关系的,这些是css的事情。HTML在页面中的作用就是结构和含义,通俗点说就是划分内容,这里放什么,我们放的是什么。

语义化的HTML结构首先要强调HTML结构

HTML结构是页面的骨架,一个页面就好像一幢房子,HTML结构就是钢精钢筋混泥土的墙,一幢房子如果没有钢精钢筋混泥土的墙那就是一堆费砖头,不能住人,不能办公。css是装饰材料,是原木地板,是大理石,是油漆,是用来装饰房子的,CSS的强大就不用多说了,css如果没有html结构那就是一堆木板,一同油漆,没有了实际使用价值。CSS完全依靠引用它的(X)HTML文档。如果你想使CSS的能力充分发挥到极致,提供一个用既干净又有结构的内容的html是非常必要的,“HTML是在互联网上发布超文本的通用语……HTML使用标签来对文本结构化”

语义化的HTML结构怎么写?

HTML是一种对文本内容进行结构和意义(或者说“语义”)进行补充的方法。它会告诉我们说:“这行是一个标题,这几行组成了一个段落。这些文字是项目列表,这些文字是链接到互联网上另一个文件的超链接。”值得注意的是,不应该让HTML来告诉我们:“这些文字是蓝色的,这些文字又是红色的。这部分内容是最最靠右的一栏,这行内容是斜体字。”这些和表现相关的信息是CSS的工作。在做前端开发的时候要记住:HTML告诉我们一块内容是什么(或其意义),而不是它长的什么样子。当我们提到“语义标记”的时候,我们所说的HTML应该是完全脱离表现信息的,其中的标签应该都是语义化地定义了文档的结构。

阅读全文 >

查看:1,615 评论:4 标签:,

jQuery写的一个幻灯片

日期:2009-06-15 分类:前端技术

最近做一个网站,需要用上一个大幅点的幻灯片,幻灯片这东西网上一搜一大把,所以就想去“淘”一个,省点工夫,但"淘"了好一些都不满意,不是太老土、不美观,就是不兼容或到不到想要的结果等等,最后决定自己就写了一个。 看看代码咯。

XHTML 代码:

<div id="slide">
	<a href="#" id="this_a"><img src="images/1.jpg" id="this_pic" alt="" /></a>
	<ul id="pic_list">
		<li><a href="http://www.qq.com"><img src="images/1.jpg" alt="" /></a></li>
		<li><a href="http://www.sina.com"><img src="images/2.jpg" alt="" /></a></li>
		<li><a href="http://www.163.com"><img src="images/3.jpg" alt="" /></a></li>
		<li><a href="http://www.baidu.com"><img src="images/4.jpg" alt="" /></a></li>
		<li><a href="http://www.17css.com"><img src="images/5.jpg" alt="" /></a></li>
	</ul>
	<span id="transparence"></span>
</div>

说明:#slide是最外面的容器,#this_pic是要显示的大图,#pic_list是图片缩略图,#transparence是一个半透明的层,因为想给#pic_list和里的缩略图应用半透明效果,但半透明效果会继承,无法更改,所以模拟了这个层。

阅读全文 >

查看:3,372 评论:19 标签:,

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved