菜鸟求助,有关CSS的若干问题,CSS高手进

Question

div2,div3,div4,div5,div6我都放在一个大的div块里.这里没画出来.
1，有阴影的图片,如上图中的那个banner块和菜单,可以纵向切成三块吗?左边阴影一个DIV,中间图片一个,右边阴影一个,这样可取吗?怎么定位呢?把三个小块放进一个大块里?
2，还是有阴影的图片,div3这样切割可取吗?还是按色块分?
3，div3，div4合并成一个div,用1px高的横背景纵向平铺可以吗?
4，中间我要放一个竖线,我用的是div,一般用什么方法?
5，div3,div4,div5,div6的背景图是不是高度要一致?
6，怎么让div3,div4,div5,div6随着内容的高度的增长自适应还保持平行?
我这样排合理吗?合理的办法是什么?

Answer 1

问：有阴影的图片,如上图中的那个banner块和菜单,可以纵向切成三块吗?左边阴影一个DIV,中间图片一个,右边阴影一个,这样可取吗?怎么定位呢?把三个小块放进一个大块里?

答：楼主的目的是想要内容(如banner+menu+content)在屏幕中间显示,而两边的空余显示背景阴影是吧（如下图效果）？

如果这样的话，可以在最外层设个id为outter的div背景设为所需的阴影背景。内容全部放在一个id为mainContent的div放置所有内容,给他一定的宽度(如950px)，设置margin:0 auto。这样一来内容就自然居中了。只在banner中设置相应的背景就行了，所需的两边的阴影自然在两侧了。还有，一般都是根据布局需要来制作图片的，也就是说像这样的阴影等效果是考虑在整体背景中的，如果是为了图片来布局，这样真的很崩溃。

问：还是有阴影的图片,div3这样切割可取吗?还是按色块分?

答：如果为了顶起位置来放置背景图片，这样和table中的透明图片顶位一样了，就失去了div+css的意义。如果问题一达到了您想要的效果，我相信这个应该也解决了。

问：div3，div4合并成一个div,用1px高的横背景纵向平铺可以吗?

答：是否能合并是看内容来的，如果div3只是为了背景，完全可以去掉。

问：中间我要放一个竖线,我用的是div,一般用什么方法?

答：如果竖线是为了分割sidebar和content(边栏和主体内容框)，并没什么实际意义。可以设置sidebar的“border-right:solid 2px black”来实现。

问：div3,div4,div5,div6的背景图是不是高度要一致?

答：既然用了repeat-y背景高度是否一致就取决于div高度了。

6，怎么让div3,div4,div5,div6随着内容的高度的增长自适应还保持平行?

答：可以在这几个div外部再定义一个大的div来控制。当然还可用脚本控制。

Answer 2

1，有阴影的图片,如上图中的那个banner块和菜单,可以纵向切成三块吗?左边阴影一个DIV,中间图片一个,右边阴影一个,这样可取吗?怎么定位呢?把三个小块放进一个大块里?

可以啊，这种就能做宽度自适应。但是建议不要用3个毫无意义的div标签。根据实际情况，用h1的背景结合外层header div来做。

2，还是有阴影的图片,div3这样切割可取吗?还是按色块分?

建议再色彩间隔的位置做一张阴影过度图片来处理整个外框阴影。如果纯粹为了布局去切割一块一块，就失去了标准化设计的初衷了。和用table来画格子有什么区别。

3，div3，div4合并成一个div,用1px高的横背景纵向平铺可以吗?
不是很明白

4，中间我要放一个竖线,我用的是div,一般用什么方法?
利用其中一个div的背景来出来

5，div3,div4,div5,div6的背景图是不是高度要一致?
这个取决于你的设计

6，怎么让div3,div4,div5,div6随着内容的高度的增长自适应还保持平行?
这个要重新考虑设计，我觉得大多数情况下并不需要这样处理。

=============================
ps。这个示意图不是很清楚本回答被网友采纳

Answer 3

其实楼上回答的很好了。
1。按照楼主的提法，其实还是静态切块的思路。而不是层次的思路。这也是老式table定位的继承。kj23的说法我理解，不过如果没有做过的人来说可能就不清楚他的意思。思路就是不要把有意义的框给切开来。框就是框。
2。其实同1
3。可以，让这个背景repeat-y right top
4。就是简单的铺背景，但是问题在你下面的问题里。
5。高度是否一致是个问题，如果你用table的话，自然会一致。所以对于不同高度的div解决方法其实也很多。最最乐观的考虑方法就是这两个div不考虑背景，背景由再外层的框来控制。但是也有可能无法做到这点。还有个解决方法是以包含的方式来处理左右问题<div外部><div右><div左></div></div></div>。除此之外还有其他的方法，请搜索。
另外，确实有用js来计算不同的div高度来做调整的，不推荐。
6。在5里一并回答了。

Answer 4

<div id="">
<table
<tr>
<td><div id =""></div></td>
<td><div id =""></div></td>
</tr>
<tr>
<td><div id =""></div></td>
<td><div id =""></div></td>
</tr>
</table>
</div>

Answer 5

不需要切割！
div1 只放banner 图 div1样式 id="div1"
样式 ：#div1 { margin:0 auto;
border:1px solid #FF0000;
width:960px;
height:100px;}
banner图片 你可先插入进去
#div1 img{ display:block;
margin-top:10px;
width:600px;
height:80px;
margin:0 auto;}强制将img转换为块元素
div2 我就不说了，与div1一样的
div3 div4 div6用浮动就行了，

div5 不需要，你要在div5 插入 一根竖线，没有必要在用div
你可以 div6中插入一个背景
定义的样式：{ background: url(image/01.jpg) left center}
就是将背景置于左边并且居中。。
如果在插入网页背景 可以在 body的样式，
假设你的网页宽度为 960px的话，
可以这样设置样式
body { margin:0 auto;
width:960px;}
那么在body里面的 div 的宽度就会是960px;
div 会自动适应
如果这样 div1 div2的宽度就会是body 的宽度 960px;