如何实现下图的最佳布局？

yilubenpao

如何实现上图的最佳布局和写css？

我的方法：

1. <div id="subnav">
   
2. <ul>
   
3. <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li>
   
4. <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li>
   
5. <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li>
   
6. <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li>
   
7. 
   
8. </ul>
   
9. 
   
10. <ul>
    
11. <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li>
    
12. <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li>
    
13. <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li>
    
14. <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li>
    
15. </ul>
    
16. 
    
17. <div>

复制代码

alphat

<div id="subnav">
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
<a href="">LATEST NEWS<a>
</div>

zhanyuzai

<ul id="subnav"> <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li> <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li> <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li> <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li> <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li> <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li> <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li> <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li> </ul>

运行代码 复制代码 另存代码  提示：您可以先修改部分代码再运行

li {float:left;}

cycloned

<ul>
<li class="">...</li>
</ul

yilubenpao

大家不要为我的方法限制了啊？难道最佳方法就是使用ul?

alphat

<img src="" width="500" height="500" border="0" usemap="#Map" />
<map name="Map" id="Map">
        <area shape="rect" coords="69,66,153,120" href="#" />
        <area shape="rect" coords="188,71,269,137" href="#" />
        <area shape="rect" coords="69,66,153,120" href="#" />
        <area shape="rect" coords="188,71,269,137" href="#" />
        <area shape="rect" coords="69,66,153,120" href="#" />
        <area shape="rect" coords="188,71,269,137" href="#" />
        <area shape="rect" coords="69,66,153,120" href="#" />
        <area shape="rect" coords="188,71,269,137" href="#" />
</map>

xmlovedoudou

没必要用前景图吧，应当只是背景。

cexoxass

<div><a><img>

lijia2202

6楼的方法不是很好吗？

sww518

6l威武~

by0001

这个很简单，结构就用2楼的最精简结构，采用浮动定位。
图片采用分层切割就可以了，背景图是一个细长的上下渐变的图层水平平铺即可。
不推荐6楼的结构体。

sivan

好啥啊，别用图片热点

yaya1202

习惯用 2#的

bios9x

<dl><dt><a href="">LATEST NEWS</a></dt></dl>

liuyun0943

嗯，支持2楼的

yu357183

6楼的也就可以了！！！

wwefuner

<div style="width:920px; overflow:hidden; margin:20px 10px;">
<ul style="width:950px;">
<li style="width:360px; margin-right:10px; float:left;">..........</li>
<li style="width:360px; margin-right:10px; float:left;">....................</li>
<li style="width:360px; margin-right:10px; float:left;">..........</li>
<li style="width:360px; margin-right:10px; float:left;">................</li>
..................
</ul>
</div>