文章分类 - HTML/CSS
摘要：笔者在做网站设计网页的时候，经常需要实现这样的效果：把页面显示的元素按分类(或者说按组)来显示。这样说理解起来很费力，上个图就清晰明了了。这种分块的页面显示，笔者很是喜欢。特别是每一个块状都有围起来border，在块的标题不在块外也不在块内，而嵌在块的border当中。笔者在以前曾经这样实现过这种效果：2个或3个div。div1作为拥有border的div，div2作为标题，用绝对定位的方法来固定在div1的border中。这种实现当然需要div2设置背景，而且div2的index要高于div1。div3可作为块内内容div。这种实现方法也不太复杂。但毕竟采用的元素定位使得代价有点大。其实我们
阅读全文
摘要：今天发现一个挺不错的CSS框架（没错，CSS也是有框架的）960-grid-system。官网为：http://960.gs理论说得更多也无谓，实践才是硬道理。Let's rock&roll。1. 前序项目名称：STUOT。使用该框架的页面很简单仅有几个。以下例子我们用index.php来说明。页面的结构如下图所示：
阅读全文
摘要：在IE6中，如果子容器的高度超过父容器的时候，父容器会被子容器撑开，所以我们可以直接设置一个height的高度值即可。但是在IE7和firefox就不行了，它不会自动撑开。如果要设置DIV自适应高度，我们可以采用height:auto;这个属性；不过这个属性IE6又不支持了。是不是很头痛？其实解决这个问题不难，而且方法也不少，这里推荐一种：(假设我们需要控制的这个DIV最小高度是100px，超过时就让里面的信息自动撑开)：注释：因为!important在IE7和Firefox都可以读到，而且权重高于后面的height:100px；所以当在IE7和Firefox显示的时候，就会用了前面的heig
阅读全文
摘要：body div是上下文选择符，表示选择body里面的所有div，注意是所有的，无论是不是直接承下关系。但是bodydiv不同。是子代选择符，它表示的是选择body的子代div。例如在结构bodydiv 只能选择class="1"的div，因为它是body的子代。而class="2"的div没有被选择。但是在IE6中这个选择符是不被支持的。
阅读全文
摘要：CSS样式中margin后面值的个数所代表的意思各不相同。(1) margin:Apx当只跟有一个参数值的时候，表示上下左右均采用这个值。(2) margin:Apx Bpx Cpx当跟有三个参数值的时候，A B C依次表示上边距，左右边距，下边距(3) margin:Apx Bpx Cpx Dpx当跟有四个参数值的时候，A B C D依次表示上，右，下，左边距
阅读全文
摘要：FIRST OF ALL，最容易令人忽略而导致头疼的因素。web页面文档类型：众所周知，SPAN元素内单纯设置height是没有效果的。需要设置SPAN的高度，需要将其设置成block元素。display:block但这样会导致span占据了整一行，我们通常不希望这样。所以可以采用display:inline-block。注意：display:inline是没有效果的，一定要设成block元素。
阅读全文
摘要：在HTML页面中，让同一行的文字与input垂直居中。文档信息：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">解决办法：设置input（注意是input的）的CSS样式：vertical-al...
阅读全文
摘要：下面列了五个例子来详细说明，这几个例子的主要功能是：在5秒后，自动跳转到同目录下的hello.html（根据自己需要自行修改）文件。1) html的实现优点：简单缺点：Struts Tiles中无法使用2) javascript的实现优点：灵活，可以结合更多的其他功能缺点：受到不同浏览器的影响3) 结合了倒数的javascript实现（IE）优点：更人性化缺点：firefox不支持（firefox...
阅读全文
摘要：(不兼容IE6，也不准备去兼容IE6)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">任何元素用:hover均起作用。
阅读全文