[烛光生存狂]-HTML/CSS网页设计总结

【2013.12.9】

1，关于用DIV实现多行多列区块效果的问题：

嵌套结构应该是这样的：

[div]

第一行

[div]

[div}....[/div]

[div]....[/div]

[/div]

第二行

[div]

[div]....[/div]

[/div]

注意几点：

1，DIV标签的默认DISPLAY属性是BLOCK，即一个区块一行，如果要设置同行的，该属性必须设置为INLINE，另外，要使该设置生效，必须还要设置WIDTH属性，另外浮动属性FLOAT设置为LEFT即可。

2，对于嵌套行上的CSS属性这样div style="width:100%;clear:both;height:1000px;

【6.1】

今天解决了ZG网站文章页面排版错误的问题，首先，通过设置CSS属性，将正文设置为“两端对齐”会更加美观一些。另外就是原本在正文输入的时候，作者给每行空了两个格（中文字符），但是正文显示的时候总是缺了一个“半角”空格标签，后来是这样改的：

在TD标签中，去掉 class=black 加上style="font-size:14px;"

【5.30】

今天有遇到所谓的“垂直居中”的问题了，经过查询资料，如果要使一行文本相对于整个DIV容器垂直居中，那么：

我们可以在DIV标签中，设置line-height与height具有相同的高度，这是一个最简单的办法，可是，在本例中，要求却不仅仅如此。

除了要让文本垂直居中以外，我们还需要设置文字所在行的背景色，可是，如果使用SPAN标签，对于行内元素来说，它是无法设置自定义宽度的，而如果采用“块元素”，那么它默认的相对位置适合外层DIV的起始位置相同的，无法设置这种居中属性。

要注意下列方法都是难以实现垂直居中：

1，在DIV中设置vertical-align:middle 如果所需对齐的元素在同一个DIV内或许可以，但是假设有多层DIV嵌套，这个设置就很难成功；

2，设置Display属性，比如说将外层DIV和内层元素标签分别设置成为Display:table 和Display:table-cell，这种方法似乎无法生效；

3，设置Display属性为Inline-block 也就是说，能够设置宽度的“行内”元素，不过这种方法需要浏览器高版本的支持~

其实有个简单的办法，就是嵌套两个DIV，然后设置其margin-top(bottom)属性，像这种产品项目列表元素，我们的行高都是固定的，这样我们就能够很容易确定margin的值了。

【1.27】

有关网页背景图片自适应高度的问题，对于宽度，我们可以用一个CSS滤镜来实现，而对于高度，我们可以在背景图片设置的标签中将min-height属性设置为相对高度 100%，但是，这里的相对高度属性要设置成功的话，它的上一层标签的属性，比如说，对于BODY就是HTML标签，这个标签中必须要设置height的值，它也可以是相对高度值，但是，设置min-height则是不会奏效的，要切记！

如果要让某个元素一直位于页面中央，而不管显示器长宽比与分辨率，那么，可以考虑用TABLE表格嵌套来实现，这个要方便一些。

【1.18】

要是DIV中的元素“右对齐”，如果用text-align 属性设置不成功的话，可以考虑设置浮动属性，只需将其设置为float:right 即可。至于为什么？我还要研究。

【1.15】

在仅设置底边框时，底边框在IE6 IE7下都不显示的问题：

---要这样写：

border-width: 0 0 1px 0;

border-style: solid;

border-color:#829e56; /*如果只设一个边距一定要这样写，不要简写*/

vertical-align:middle;

margin-bottom:2px;/*不设置的话，在IE6.0和7.0下底边框显示不出*/

==============================================================================

今天转一篇文章：

图片下边的多余空隙——IE布局BUG集锦

IE6下图片元素下多余空隙这个问题是个老生常谈的问题，平时自己做项目也是见招拆招，没有系统的总结过到底有多少种方法。最近上网一网打尽IE6BUG，这里我就当是温故而知新，具体表现形式就不列举了，直接把解决方法归纳出来。

以下总结归纳网络上比较常用的几种方法，都不知道谁的是原创了，只能说表示感谢网络同仁们了。

一、将图片转换为块级对象

即，设置img为“display:block;”。在本例中添加一组CSS代码：“#sub img {display:block;}”。

二、设置图片的垂直对齐方式

即设置图片的vertical-align属性为“top，text-top，bottom，text-bottom”也可以解决。如本例中增加一组CSS代码：“#sub img {vertical-align:top;}”。

三、设置父对象的文字大小为0px

即，在#sub中添加一行：“font-size:0;”可以解决问题。但这也引发了新的问题，在父对象中的文字都无法显示。就算文字部分被子对象括起来，设置子对象文字大小依然可以显示，但在CSS效验的时候会提示文字过小的错误。

四、改变父对象的属性

如果父对象的宽、高固定，图片大小随父对象而定，那么可以设置“overflow:hidden;”来解决。如本例中可以向#sub中添加以下代码：“width:88px;height:31px;overflow:hidden;”。

-----用这个好些。

五、设置图片的浮动属性

即在本例中增加一行CSS代码：“#sub img {float:left;}”。如果要实现图文混排，这种方法是很好的选择。

六、取消图片标签和其父对象的最后一个结束标签之间的空格。

这个方法要强调下，在实际开发中该方法可能会出乱子，因为在写代码的时候为了让代码更体现语义和层次清晰，难免要通过IDE提供代码缩进显示，这必然会让标签和其他标签换行显示，比如说DW的“套用源格式”命令。所以说这个方法可以供我们了解出现BUG的一种情况，具体解决方案的还得各位见招拆招了。

【1.14】

昨天又弄明白了几点东西，但是没总结，今天总结看看吧：

1，首先，有关UL标签的问题，作为无序列表来说，有时候我们需要为其设置“标题”，但是标题行用什么才合适呢？经过学习发现，还是使用h1系列标签最好，或许，这就是h1-h6标签存在的意义之一了吧。

如果想要简单起见，那么可以直接在UL属性中设置DISPLAY:INLINE即可，但是注意，这在IE8.0下会导致显示重合的错误。

但是注意，对于H系列标签来说，很多属性（比如 height）是失效的，而且，对于IE8.0来说，连margin属性都不能用，这点值得研究。

2，设置鼠标经过某个链接其链接背景色变化，只要对a:hover伪类中的background进行设置即可。

3，只能被IE8识别的CSS HACK是在属性后面加 \0，IE8兼容，当然它还有更简便的方法，其实不需要这么复杂的。

有关UL和LI标签的问题，其实它们是不被外层盒子所约束的，那么如果要受到它们的约束，应该如何写呢？

注意！IE6.0和IE7.0/8.0 对于盒子嵌套的解释是不同的，比如说，IE6.0在DIV中嵌套的UL标签，会根据LI实际的宽度把DIV撑开，但是IE7.0/8.0则是二者互不关联的，多出的部分会显示在DIV的外面，很不美观。

要明确这一点，或者其他的嵌套也存在类似的问题，可能是overflow属性的问题？

【1.13】

要使CSS兼容IE6.0 7.0和8.0已经够困难的了，FF~~~先不考虑了吧……

发现了一个问题，在一个DIV中，如果我同时设置了height与line-height，那么，如果说我要再单独设置一个边框，如border-bottom，那么对于IE6和IE7来说，必须要先设置margin-bottom才行，但是，如果设置border，则可以不用设置margin，注意！如果单独设置一个位置的border，在设置之前必须要把对应的margin也设置好，否则这个边框往往显示不出。

要设置同行的图片和文字对齐，文字要在SPAN标签内，然后SPAN和IMG，都要设置height和line-height属性，vertical-align:middle 也要设置好。其他的就不用设了，标签最好设置上宽度，如果没设，也可以在最后图片标签上，设置IMG 的MARGIN-LEFT属性。

【1.12】

看来拖拉终于付出了代价，很多事情，做网站，还是先静态化吧，先把页面全部都弄上再说可以吗？

有关页面布局的问题，一般来说，像这种CSS的布局，大块元素都要设置居中的，此时，可以再BODY中设置，也可以将所有居中元素嵌套与一个DIV中，在这个总DIV中设置。具体需要以下几个属性：

在BODY或者DIV中，设置margin-left和margin-right都是auto

然后，很重要的一点是，设置text-align属性为center 这一点非常重要，它可以控制内层子元素的水平居中（左右对齐），虽然名字会让人产生混淆，不过可能也反映了规则制定者的初始用意，有点意思。

设置外边距（左右）分别为auto时，如果在子元素中没有进一步设置设置width，那么它会铺满父元素的控件，对于BODY标签来说，当然就是铺满网页宽度了。

灵活使用左右边距的margin和固定设置，会产生很多不错的效果。

几点思考：

1，P元素最好不要相邻，如果有相邻的两个P元素，他们之间会产生一个空行，处理较麻烦，而DIV元素就不会产生空行。

2，对于长串的中间没有间隔的英文字符来说，默认是无法用普通方式对其进行强制换行的，只能采取“硬”换行的方式。属性：word-break:all-break; 注意，这个CSS属性在DW2004中是不会有输入提示的，因此不要以为自己是写错了：-）

3，关于用UL和Li标签控制图片列表布局的问题。

其实是否使用这种布局，纯粹是根据你的喜好而定。虽说CSS2.0还不能像XML那样，但是有不少标签确实是“弱定义”型标签。但是有关具体布局，还是要仔细斟酌。比如说我要求做一个两行，每行四个图片的列表。那么，我们在设置UL的宽度时，只要让它的WIDTH属性等于（如果大于将会产生什么样的后果？这要分情况而定），4个图片的宽度+边框宽度（或许还有内边距PADDING的宽度）+外边距MARGIN的宽度（注意外边距的数量），然后就可以自动排列成两行了，而无需为每行建一个UL无序列表。

今天在调试的时候，按照网上一个资料文说的，但是实际操作时，第一个图片的左边距总是多出来很多，最后逐个调试，终于找到了问题所在。

#products {

width:960px;

margin:30px 0 80px 0;

display:inline;

}

#products li {

list-style-type:none;

width:280px;

height:266px;;

float:left;

margin-left:30px;

margin-top:20px;

display:inline;

font-family:Tahoma;

}

products是无序列表的UL的ID。但是，在具体设置时，要注意，不仅仅Li要设置INLINE属性，而且UL也同样要设置INLINE属性（因为它本来就是ＢＬＯＣＫ类型的元素）

【1.7】

有关兼容性的问题，IE6和IE8对同一种元素的解释

新用户注册返回首页
首页上一页下一页尾页页次1/1 转到第页