当前位置：一起CSS
日期：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,422 评论：4 标签：HTML,语义化
日期：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,973 评论：19 标签：jQuery,幻灯片
日期：2009-05-11 分类：CSS
margin 叠加是什么？就是当垂直外边距相遇时，它们将叠加，叠加的高度取较大的。下面按各种情况及附图来说明。
当一个元素出现在另一个元素上面时，第一个元素的底边界与第二个元素的顶边界发生叠加，如图：
元素的顶边界与前面元素的底边界发生叠加。
阅读全文 >
查看：1,076 评论：2 标签：margin,margin叠加
日期：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,589 评论：20 标签：jQuery,虚线,链接
日期：2009-03-22 分类：CSS
曾经发表过《我看超过部分自动隐藏或显示省略号》，表达了用 CSS 处理“超过宽度显示省略号”不合适的一些观点，然而前段时间在逛蓝色理想经典论坛的时候，发现了一种用 CSS 处理此问题的不错的办法，似乎反驳了我的观点，作者[14px ]突破了传统，以“范围底线”为思路创造了一种更好的办法，具体的思路请看以下的详细分析：
思路：
我们要达到的效果是：当“字符超过额定宽度”，则“显示三个小点”。
- 当“字符超过额定宽度”，对于页面来说可能发生的一个改变就是：换行！
- 换行将导致该范围的底线降低。
- 那么，我们的目的则可以换算成：该范围的底线降低时显示三个小点。
阅读全文 >
查看：1,285 评论：11
