Humker的天空 » CSS http://www.humker.com 健康，快乐。 Wed, 25 Jan 2012 12:16:34 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 div和css网站重构有没有必要？ http://www.humker.com/2008/08/09/div-and-css-are-not-necessary/ http://www.humker.com/2008/08/09/div-and-css-are-not-necessary/#comments Sat, 09 Aug 2008 08:32:03 +0000 humker http://www.humker.com/?p=117 今天考虑新建一个网站，还是原来的程序，即选择整站程序，做风格，添加文章。做风格这块是最头痛的，你可以直接用别人的，可以仿别人的，或者自己动手自己写一个。

div和css的网站架构，现在很受追捧，对传统的table布局不屑一顾。现在轮到自己亲自写了，体会了一下，div的代码量不一定比table少多少，基本一个内容页大概十几k，两个都一样，可能就是表格嵌套层次太多的话，浏览器加载速度有了区别。

同样是div和css，好的网页设计师使用最少的div来表达一个布局，不好的话就是仅仅一个网页的次要元素直接就用一个div，这样一个页面有二三十个div，网页看起来跟table的没什么区别，还有可能代码量比table的多，至少在页面大小这一块如此。table有一个好处就是浏览器的兼容性是最好的，设计师喜欢用它的原因；div和css这东西就比较头痛，要用各种的hack。

最近看了一本叫做《无懈可击的web设计》的书，使用div和css的原本是：简化代码，分清网页的主次层次（主要是seo的考虑），还table于数据表现的原本功能，便与残障人士使用屏幕阅读软件等等。现在的网站风格div和css是比较盛行，但真正了解其中个中原有的很少，实际是完全没有必要，看看qq，google，baidu等等的页面真正通过css认证的有多少。

补充几个聊天记录xbodhi的，见解精到。

推行标准的起因不仅是还原table的原始功用，也要还原html各种标签的功用，例如 strong h1 等等，所有的标签不仅仅是为了显示某种数据样式，他们本身是有语义的，搜索引擎对这个也很敏感。

按道理，网站重构称为热门话题 是因为blog的流行，人们都开始三天两头换模板 ，真正明白现行的结构样式行为分离的人少得很 都在那里扯淡。

模板这东西，使劲做好一个适合用户和seo的，就不再变了，没必要。

欢迎拍板。

]]> http://www.humker.com/2008/08/09/div-and-css-are-not-necessary/feed/ 0 firefox和ie解释图片大小的不同 http://www.humker.com/2008/04/20/css-image-ie-firefox/ http://www.humker.com/2008/04/20/css-image-ie-firefox/#comments Sun, 20 Apr 2008 19:03:37 +0000 humker http://www.humker.com/?p=57 firefox对待图片大小先于css，后来才是img的本身属性

而ie正好相反，先是img的本身属性

如果img和css中的width和hight有问题，在ff和ie中看到的效果就不一样。

]]> http://www.humker.com/2008/04/20/css-image-ie-firefox/feed/ 2 HTML表格中的nowrap http://www.humker.com/2008/04/20/html-table-nowrap/ http://www.humker.com/2008/04/20/html-table-nowrap/#comments Sun, 20 Apr 2008 12:19:20 +0000 humker http://www.humker.com/?p=56 HTML中td元素的nowrap属性表示禁止单元格中的文字自动换行。

但使用时要注意的是，td元素中nowrap属性的行为与td元素的width属性有关。如果未设置td宽度，则nowrap属性起作用的，如果设置了td宽度，则nowrap属性不起作用。

]]> http://www.humker.com/2008/04/20/html-table-nowrap/feed/ 0 CSS页面中clear:both http://www.humker.com/2008/04/12/css-clear-both/ http://www.humker.com/2008/04/12/css-clear-both/#comments Sat, 12 Apr 2008 19:56:34 +0000 humker http://www.humker.com/?p=50 clear:both;
CSS手册上这样解释的：该属性的值指出了不允许有浮动对象的边。
这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动）,或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候我们就需要用clear:both;来清除clear:both;

<div style="float:left;width :200px;height:300px;border:1xp red solid;">这个是第1列，</div>
<div style="float:left;width :400px;height:200px;border:1xp red solid;">这个是第2列，</div>
<div style="border:1px green solid;height:200px;width:180px;">这个是列的下面。</div>

===========================================
如果不用清除浮动，那么第3个的文字框架,就会和第一二行在一起 所以我们在第3个这利加一个清除浮动。

<div style="float:left;width :200px;height:300px;border:1xp red solid;">这个是第1列，</div>
<div style="float:left;width :400px;height:200px;border:1xp red solid;">这个是第2列，</div>
<div style="border:1px green solid;clear:both;height:200px;width:180px;">这个是列的下面。</div>

]]> http://www.humker.com/2008/04/12/css-clear-both/feed/ 0 li与overflow:hidden http://www.humker.com/2008/03/09/css-overflow-hidden/ http://www.humker.com/2008/03/09/css-overflow-hidden/#comments Sun, 09 Mar 2008 21:52:48 +0000 humker http://www.humker.com/?p=19 比较有用的css 

下划线与边框重合时的隐藏办法

在一个div容器中用li写内容，并且定义li的下划线。div设置有边框，那么最下面的li的下划线会和div边框离的很近影响美观。想隐藏最下面的一条线的话，调整div的高度，设置overflow:hidden，则可以把最下的下划线隐藏。

不过这个div下面还有另外个div的话，之间margin的距离会被拉大，这时设置上面的容器margin-bottom为负值，或者设置下面的margin-top为负值可以恢复到最初定义的高度

overflow:hidden+white-space:nowrap 

用li写一组链接。之前是统计好li的宽度最多可以容纳多少文字而不会撑开布局，然后把字数参数告诉程序，让他在程序中控制输出。用CSS实现则如下

<li>内容</li>

li的高度自定，以em设置li的宽度 ，overflow:hidden，可以实现不撑开li的区域

但是现在经常在li前加小箭头背景图片，并设置background-position:left center。这样的话，如果文字超过限定宽度，超出区域的部分会 隐藏，但是前面的背景图会自动下移到两行之间。这样的话用上white-space:nowrap强制文字不换行，则可以解决背景图下移的问题。

原文地址http://www.gnrcn.com/index.php/archives/228