一起CSS

当前位置：一起CSS

相信大家都知道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,317 评论：4 标签：HTML,语义化

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和里的缩略图应用半透明效果，但半透明效果会继承，无法更改，所以模拟了这个层。

阅读全文 >

查看：2,790 评论：18 标签：jQuery,幻灯片

margin叠加原理

日期：2009-05-11 分类：CSS

margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。

当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：

margin叠加

元素的顶边界与前面元素的底边界发生叠加。

阅读全文 >

查看：976 评论：2 标签：margin,margin叠加

用jQuery去除链接虚线

日期：2009-04-12 分类：前端技术

链接点击后会出现虚线框，因为链接一般都有跳转页面，所以不容易看出来。如果没有跳转或阻止了这个行为的话，就能很明显的看到虚线。这个虚线在某些情况下会影响美观，所以可以考虑把它去掉。虽然在《去除点击链接时出现的虚线框》中说了几种方法，而且一起使用也能兼容 IE 和 FF ，但未免麻烦了点。前两天看到使用 jQuery 解决这个问题问题的方法，很简单，而且兼容性很好，所以把它“拿”过来了。具体代码如下：

$(function(){
	$('a').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

细心的您可能发现了按钮点击后也会出现虚线框，那就一起把它去掉吧：

$(function(){
	$('a,input[type="button"],input[type="submit"]').bind('focus',function(){
		if(this.blur){ //如果支持 this.blur
			this.blur();
		};
	});
});

查看Demo

很简单吧，简单的都没有什么技术含量了。。。

查看：1,476 评论：20 标签：jQuery,虚线,链接

页面 5/19上页 1 2 3 456 7 8 9 10 下页...尾页

HTML4和浏览器默认样式

HTML样式

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

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

语义化的HTML结构怎么写？

jQuery写的一个幻灯片

margin叠加原理

用jQuery去除链接虚线

分类

最新日志

最新评论

存档

链接