收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2033|回复: 17

[求助] 如何实现下图的最佳布局?

[复制链接]
发表于 2011-7-15 15:59:18 | 显示全部楼层 |阅读模式
1.png

如何实现上图的最佳布局和写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. </ul>

  8. <ul>
  9. <li><img src="."><h3><a href="">LATEST NEWS<a></h3></li>
  10. <li><img src=""><h3><a href="">LATEST NEWS<a></h3></li>
  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. </ul>

  14. <div>
复制代码
发表于 2011-7-15 16:17:35 | 显示全部楼层
<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>
回复 支持 反对

使用道具 举报

发表于 2011-7-15 16:21:54 | 显示全部楼层

 提示:您可以先修改部分代码再运行


li {float:left;}
回复 支持 反对

使用道具 举报

发表于 2011-7-15 17:01:19 | 显示全部楼层
<ul>
<li class="">...</li>
</ul
回复 支持 反对

使用道具 举报

 楼主| 发表于 2011-7-15 17:28:58 | 显示全部楼层
大家不要为我的方法限制了啊?难道最佳方法就是使用ul?
回复 支持 反对

使用道具 举报

发表于 2011-7-15 17:55:31 | 显示全部楼层
<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>
回复 支持 反对

使用道具 举报

发表于 2011-7-15 18:55:45 | 显示全部楼层
没必要用前景图吧,应当只是背景。
回复 支持 反对

使用道具 举报

发表于 2011-7-16 11:19:17 | 显示全部楼层
<div><a><img>
回复 支持 反对

使用道具 举报

发表于 2011-7-16 17:37:41 | 显示全部楼层
6楼的方法不是很好吗?
回复 支持 反对

使用道具 举报

发表于 2011-8-17 15:07:58 | 显示全部楼层
6l威武~
回复 支持 反对

使用道具 举报

发表于 2011-8-17 15:37:04 | 显示全部楼层
这个很简单,结构就用2楼的最精简结构,采用浮动定位。
图片采用分层切割就可以了,背景图是一个细长的上下渐变的图层水平平铺即可。
不推荐6楼的结构体。
回复 支持 反对

使用道具 举报

发表于 2011-8-17 17:05:51 | 显示全部楼层
好啥啊,别用图片热点
回复 支持 反对

使用道具 举报

发表于 2011-8-18 10:37:41 | 显示全部楼层
习惯用 2#的
回复 支持 反对

使用道具 举报

发表于 2011-8-18 14:00:53 | 显示全部楼层
<dl><dt><a href="">LATEST NEWS</a></dt></dl>
回复 支持 反对

使用道具 举报

发表于 2011-8-18 14:53:00 | 显示全部楼层
嗯,支持2楼的
回复 支持 反对

使用道具 举报

发表于 2011-8-18 18:33:44 | 显示全部楼层
6楼的也就可以了!!!
回复 支持 反对

使用道具 举报

发表于 2011-8-24 21:08:36 | 显示全部楼层
提示: 作者被禁止或删除。
回复 支持 反对

使用道具 举报

发表于 2011-8-25 14:58:26 | 显示全部楼层
<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>
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-11-23 04:40 , Processed in 0.093513 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表