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

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

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

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

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

搜索
查看: 1442|回复: 8

各位大侠,这个页面怎么排最合理

[复制链接]
发表于 2008-2-20 13:19:25 | 显示全部楼层 |阅读模式


想了一上午也没想出来怎么写,哪位大侠帮帮俺吧。
发表于 2008-2-20 13:22:30 | 显示全部楼层
这是什么,网站?
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-20 13:24:02 | 显示全部楼层
不是,就是网站的一小部分,因为有背景图片,还是圆角,比较头疼
回复 支持 反对

使用道具 举报

发表于 2008-2-20 14:04:36 | 显示全部楼层
给你写个简单的方法:
HTML结构如下:

  1. <div class="to_go">
  2. <h3>外卖中心</h3>
  3. <form action="" method="get">
  4.         <select name="select">
  5.                 <option>区或选择</option>
  6.         </select>
  7.         <input type="submit" name="搜索" id="搜索" value="搜索" />
  8. </form>
  9. <ul>
  10.         <li><strong>大工</strong> 龙凤饺子店 9999999</li>
  11.         <li><strong>大工</strong> 龙凤饺子店 9999999</li>
  12.         <li><strong>大工</strong> 龙凤饺子店 9999999</li>
  13.         <li><strong>大工</strong> 龙凤饺子店 9999999</li>
  14.         <li><strong>大工</strong> 龙凤饺子店 9999999</li>
  15.         <li><strong>大工</strong> 龙凤饺子店 9999999</li>
  16. </ul>
  17. </div>
复制代码

css关键代码

  1. .to_go{
  2.         width:231px;
  3.         background:url(bg.gif) center bottom no-repeat;
  4. }
  5. .to_go h3{
  6.         background:url(title.gif) center top no-repeat;
  7.         height:62px;
  8.         text-indent:-9999px;
  9. }
复制代码
bg.gif
title.gif
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-20 14:26:03 | 显示全部楼层
谢谢楼上,不过我觉得还应该有更好的方法,这样需要的bg.gif图片较大
回复 支持 反对

使用道具 举报

发表于 2008-2-20 14:30:22 | 显示全部楼层
有个建议,为了能有更好的结构而且考虑到内容会增加,高度不定的情况,建议把右下角的那笼包子拿到~~~
回复 支持 反对

使用道具 举报

发表于 2008-2-20 14:31:57 | 显示全部楼层
那就直接在PS里面把整个背景扣出来。作为整个div的背景
然后其他很容易啊
回复 支持 反对

使用道具 举报

发表于 2008-2-20 15:04:08 | 显示全部楼层
做圆角的方法有很多,但要根据情况选择一种方法,这个例子中如果是想把整个图全部分解达到图片最细化,那么可以切开N多个图,但N多个图中要把它们一个一个放入效果中,比如直接把img放入HTML中,这样的方法也是我们所不希望的,因为页面中加入了并非内容元素只是为了修饰的图,那好,你不是说这是修饰的图吗!那我把这些图放到背景中,确实这是一个思路,在定义背景图时,现有的CSS一个元素只能定义一个背景元素,所以你切出了N个图片,那页面最少也要有N个元素才行。所以在实践应用中,还是要根据实际的情况去用一种方法,或兼用2种方法或N种方法,不能说哪一种是最优化的最好的,实用才是最根本,找到一个平衡点去使用技术。

去年还看了一本书中的两段文字写的非常好,送予同行,摘录如下:

“勤于思考,善于借鉴”是每位有创新精神的网页设计人员都应该具备的特质。无论昌在编写CSS脚本还是在编写JavaScript脚本,也无论是直接编写代码还是使用可视化设计工具,一名优秀的网页设计人员总是会在每个细节上问自己这样一个问题:“是否还有更好的解决方法?”。

我们需要决定是使用纯粹的CSS解决方案,还是利用DOM来设置样式。我们将需要考虑以下因素:

1.这个问题最简单的解决方案是什么;

2.哪种解决方案会得到更多浏览器的支持;

要想做出明智的抉择,就必须对CSS和DOM脚本设计技术都有着足够深入的了解。有句老话说得好:如果你手里只有榔头,那么你看到的任何东西就都像是一颗钉子。如果你只喜欢使用CSS,你十有八九会选择一个CSS解决方案,而不考虑JAVASCTIPT解决方案的效果会不会更好。反之,如果你只懂得编写DOM脚本,你往往会立刻动手编写JAVASCRIPT函数,而不可考虑用CSS来解决问题会不会更简明快捷。
回复 支持 反对

使用道具 举报

 楼主| 发表于 2008-2-20 15:07:18 | 显示全部楼层
楼上说的有点深奥,不过还是领会了一些你的意思
回复 支持 反对

使用道具 举报

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

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-9-19 14:55 , Processed in 0.125659 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

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