古老的话题：一首古诗的分离 1.给你一首古诗，保存为毫无格式的一堆文字，你去理解它的内容，进行结构的处理。用word排版之后，他有了结构 2.这个结构其实包含了语义和表现 3.用html进行结构化，抛开一切的表现形式，只考虑语义 4.用CSS进行表现处理，包括html的默认表现，他拥有了视觉表现，这个表现体现出了结构化，也体现出了用户体验，用户体验中包含了交互的排版和视觉体验 5.如果加上行为，比如点击注释序号，缓缓跳转到注释内容。 再看看css禅意花园 同样是上面的5个步骤，形成第一版本的css禅意花园 而更多的模板提供者所做的工作是交互线稿+视觉设计。体现在网页上就是CSS...
http://www.jb51.net//article/15595.htm
屏蔽IE浏览器（也就是IE下不显示）[code]*:lang(zh)select{font:12px!important;}/*FF可见，特别声明：由于Opera最新的更新，此句目前已经成为FF的专用HACK*/select:empty{font:12px!important;}/*safari可见*/这里select是选择符，根据情况更换。第二句是MAC上safari浏览器独有的。[/code]仅IE7识别[code]*+html{…}当面临需要只针对IE7做样式的时候就可以采用这个HACK。[/code]IE6及IE6以下识别[code]*html{…}这个地方要特别注意很多地主都写了是I...
http://www.jb51.net//article/15592.htm
写这个效果，可以熟悉以下：1、相对定位中的绝对定位；2、CSS针对浏览器HACK；3、了解几种边框，以及可以实现的变化；以及加了边框后，宽度和高度的计算方法；4、感受浮动，浮动的东西只有多作一些，才会感受更深一些；5、还可以熟悉一下小学的加减法；呵……很早以前我都是拿计算器在写CSS。首先，我先用FW画一个小灯笼，在画的过程中，我尽可能不出现圆角，并画成等宽，等高、居中；因为这些属性在CSS中都有！文字12号加粗！于是，开始想布局！这个布局太麻烦，我不得不用更多的标签来完成，实际上，我没有想太多，包括现在的代码都没有优化过，是我想到哪就写到哪，实际中标签可能还可以减少，CSS代码一定能优化！&...
http://www.jb51.net//article/15569.htm
在下不才，归纳几点html编码要素，望能指点各位：1.文字本身的大小不兼容。同样是font-size:14px的宋体文字，在不同浏览器下占的空间是不一样的，ie下实际占高16px，下留白3px，ff下实际占高17px，上留白1px，下留白3px，opera下就更不一样了。解决方案：给文字设定line-height。确保所有文字都有默认的line-height值。这点很重要，在高度上我们不能容忍1px的差异。2.ff下容器高度限定，即容器定义了height之后，容器边框的外形就确定了，不会被内容撑大，而ie下是会被内容撑大，高度限定失效。所以不要轻易给容器定义height。3.还讨论内容撑破容器...
http://www.jb51.net//article/15556.htm
[code]<divid="macji"><ulclass="macji-skin"><li>列表一</li><li>列表二</li><li>列表三</li></ul></div>[/code]我们希望实现li是浮动的，并且居中的（li个数不固定，ul宽度未知）。可以设置ul的text-align:center,再设置li的display，可以实现居中，但这样不是我们的初衷，我们需要实现float:center。这里我们得先重温一下position:relative，它将依据...
http://www.jb51.net//article/15549.htm
使用line-height垂直居中line-height:24px;使用固定宽度的容器并且需要一行垂直居中时，使用line-height即可（高度与父层容器一致），更多的垂直居中总结可以看这里。清除容器浮动#main{overflow:hidden;}期前也提到过这样的问题，更多信息可以看这里。不让链接折行a{white-space:nowrap;}上面的设定就能避免链接折行，不过个人建议长链接会有相应的这行（有关换行方面的讨论，参看圆心的记录）。始终让Firefox显示滚动条html{overflow:-moz-scrollbars-vertical;}更多的Mozilla/Firefox私...
http://www.jb51.net//article/15547.htm
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> csstable超出隐藏</title>&nb...
http://www.jb51.net//article/15474.htm
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" con...
http://www.jb51.net//article/15462.htm
[html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><style type="text/css"><!-- body { margin:0;padding:0 }div&nbs...
http://www.jb51.net//article/15440.htm
IE直接用:word-break:break-all; /*允许词内换行*/ word-wrap:break-word; /*内容将在边界内换行*/ /*需要注意的默认是：*/ word-wrap:normal /*允许内容顶开指定的窗口边界*/ 而firefox却没有很好的实现办法 ，一个折中方案就是使用滚动条，但网上也提出...
http://www.jb51.net//article/15423.htm
red红色等同于rgb(255,0,0)等同于rgb(100%,0%,0%)等同于#ff0000等同于#f00 有17个预先确定的颜色，它们是： aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. transparent&nbs...
http://www.jb51.net//article/15403.htm