请选择 进入手机版 | 继续访问电脑版
收藏本站腾讯微博新浪微博
点点网模板设计大赛 phpchina

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 用悬赏 三天解决问题 解决访问速度慢 论坛支持农历生日 - 给官方提建议

论坛活动及任务 归纳网站最新活动 地图任务 邮件更新任务:保护帐号安全

积分换实物,来参加蓝色理想积分兑换吧! 联系招聘客服 蓝色理想帮你找工作! 万元奖励等你拿——点点网模板设计大赛

查看: 7450|回复: 93

[讨论] web标准交流会归来---关于一个布局写法的争论 [复制链接]

nowar 楼主
帖子
234
体力
746
威望
0
发表于 2010-4-24 22:51:39 |显示全部楼层
因工作的关系,很长时间没来BI了,也没去参加过什么设计交流会...
最近有点时间,参加了今天下午14:30-18:00在携程举办的web标准交流会,同学们都比较有意思,说什么话题的都有:web标准、语义化标签、开发流程、开发工具、调试工具、浏览器、公司机器配置、PHP、服务器......

临近结束的时候,我提出了2个问题:
①关于一个布局的写法
②两列等高的写法

第二个问题这里就不说了。
第一个问题是这样的:请用尽可能少的标签并且语义良好的布局结构完成下面这样一个布局↓
这个布局的前提情况是:这是一个解释性的内容,定义性的东西,文字和图片都是定义内容的一部分,标题说明整个内容是什么...


就像这样的,呵呵...


我先不说会议上和几位同学的争论在什么地方,在这里想听听大家的意见和想法。大家认为这样一个布局该怎么写呢?

[ 本帖最后由 nowar 于 2010-4-24 22:56 编辑 ]
非洲小白脸
西部数码顶级域名注册商39元抢注!

昂流

银牌会员 手机认证 

帖子
1109
体力
1818
威望
0
发表于 2010-4-24 23:01:58 |显示全部楼层
纠结哥,我是Rain
刚到住所
对于你的语义化的建议很有感觉
租服务器,上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具 举报

nowar 楼主
帖子
234
体力
746
威望
0
发表于 2010-4-24 23:25:06 |显示全部楼层
哈哈 太刺激了...
交流会结束下来,还是不知道谁是谁···hoho...
非洲小白脸

使用道具 举报

萨菲罗斯

初级会员 手机认证 

帖子
47
体力
115
威望
0
居住地
河南省 南阳市
发表于 2010-4-25 00:29:57 |显示全部楼层

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


[ 本帖最后由 safeiluosi020 于 2010-4-25 00:35 编辑 ]
附件: 你需要登录才可以下载或查看附件。没有帐号?注册

使用道具 举报

帖子
339
体力
1212
威望
0
居住地
陕西省 西安市
发表于 2010-4-25 07:36:32 |显示全部楼层
那个小图片 用背景吧~~~
这样好像简洁点!~

使用道具 举报

帖子
18
体力
57
威望
2
居住地
广东省 珠海市
发表于 2010-4-25 11:05:04 |显示全部楼层

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



如果是我,我会这么写~~用ul li和dl dt dd嵌套~~~
谢谢kapiter 的提醒,已经修正了,不过标准不支持zoom:1~~
有没有更好的办法呢。。

从语义化的角度来看,单个图文混排的布局完全符合dl dt dd这一自定义列表标签的特性。而从整体(多个图文混排放在一起)来看,单个图文混排又是整体的一项,所以我觉得应该用ul li或ol li将dl dt dd嵌套进去。
不过用了ul li却不能满足“用尽可能少的标签”的要求。。有时候语义化和标签的数量也是一对矛盾啊~呵呵~

[ 本帖最后由 simplelife7 于 2010-5-2 17:39 编辑 ]

使用道具 举报

落落

中级会员

帖子
186
体力
435
威望
0
发表于 2010-4-25 11:10:38 |显示全部楼层
《无懈可击的web设计》一书中有提到这个,我同意作者的观点
从语义的角度来讲,标题文字用dt,而图片和详细内容用dd,在结构上相对合理点。

这个问题记得之前碰到有讨论过:http://bbs.blueidea.com/viewthre ... p;page=1#pid4755028

使用道具 举报

落落

中级会员

帖子
186
体力
435
威望
0
发表于 2010-4-25 11:31:13 |显示全部楼层
额....
6楼的css这样可能好一点。
  1. dl {
  2.         margin-top:20px;
  3.         overflow:hidden;
  4.         zoom:1;
  5. }
  6. ul li dl dt {
  7.         float:right;
  8.         width:290px;
  9.         text-align:left;
  10.         font-weight:bold;
  11. }
  12. ul li dl .pic {
  13.         float:left;
  14.         width:100px;
  15.         height:100px;
  16.         background:#69F;
  17. }
  18. ul li dl .text {
  19.         margin-left:110px;       
  20. }
复制代码

[ 本帖最后由 kapiter 于 2010-4-25 11:36 编辑 ]

使用道具 举报

nowar 楼主
帖子
234
体力
746
威望
0
发表于 2010-4-25 20:47:34 |显示全部楼层
太刺激了...
web标准交流会的同学们可以出来围观了 呵呵
非洲小白脸

使用道具 举报

帖子
12
体力
91
威望
0
居住地
福建省 泉州市
发表于 2010-4-26 09:32:44 |显示全部楼层
围观

TIM FENG

使用道具 举报

李寻饭

版主 手机认证 

帖子
3396
体力
6744
威望
2
居住地
北京市 昌平区
发表于 2010-4-26 09:44:32 |显示全部楼层

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


[ 本帖最后由 4321285 于 2010-4-26 09:55 编辑 ]

使用道具 举报

帖子
7047
体力
3688
威望
2
发表于 2010-4-26 09:54:11 |显示全部楼层
这里的图片不用单独给标签
<div>
<dl><dt></dt><dd></dd></dl>
<dl><dt></dt><dd></dd></dl>
<dl><dt></dt><dd></dd></dl>
<dl><dt></dt><dd></dd></dl>
</div>

使用道具 举报

Tuan 

高级会员 手机认证 

帖子
812
体力
751
威望
1
居住地
广东省 深圳市
发表于 2010-4-26 12:48:21 |显示全部楼层
如果是这样我会dt dd,图片作为背景;如果图片是产品,我会把它放到dt里

使用道具 举报

idche 
帖子
144
体力
332
威望
0
发表于 2010-4-26 13:05:52 |显示全部楼层
全是高手。

使用道具 举报

ddkan8 
帖子
10
体力
80
威望
0
发表于 2010-4-26 14:14:26 |显示全部楼层
和11楼的结构相同,标题用dt,图片和内容用dd
css我会把图片向左浮动,标题和内容向右浮动

[ 本帖最后由 ddkan8 于 2010-4-26 14:24 编辑 ]

使用道具 举报

飞猪

银牌会员

帖子
293
体力
1318
威望
0
发表于 2010-4-26 14:20:37 |显示全部楼层
晚上发邮件通知大家。

使用道具 举报

萨菲罗斯

初级会员 手机认证 

帖子
47
体力
115
威望
0
居住地
河南省 南阳市
发表于 2010-4-26 14:21:08 |显示全部楼层
11#css设置有问题,text文字增多就能看出来

使用道具 举报

裕波

高级会员

帖子
165
体力
531
威望
0
居住地
上海市 浦东新区
发表于 2010-4-26 14:25:19 |显示全部楼层
第一种:
li
img
h
p

第二种:

dl
dt:标题
dd:图片
dd:内容
www.webchina110.cn

使用道具 举报

帖子
107
体力
417
威望
0
居住地
山东省 菏泽市
发表于 2010-4-26 15:03:20 |显示全部楼层
我也来一个。

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


[ 本帖最后由 difangla 于 2010-4-26 15:07 编辑 ]
搜索“地方网络”找我

使用道具 举报

impan 

猪的明天

初级会员

帖子
43
体力
160
威望
3
发表于 2010-4-26 15:22:50 |显示全部楼层

回复 18# itchina110 的帖子

嗯。赞同
其实两者相近,DL这样的标记稍显多余。
可能大部分同学看到了题目,就直接去考虑布局了,定义、列表后来争执中才听到。。-_-|||
如果是按照第二张图上的信息来,可能DL更适合
但..
· 估计后台程序喜欢第一种,他们习惯了使用熟悉的标签
· 即便是在以后列表的内容换了(也就是它不再是一个定义列表,或新闻列表,或聊天片段),
  但样式没变,那么第一种的就蛮好的,不是到处在说重复挖掘嘛~
比如:一个排行榜的列表class="top-list",但是忽然发现新闻列表class="news-list"和它完全一样,+C+V?
UECSS.COM

使用道具 举报

帖子
35
体力
138
威望
0
发表于 2010-4-26 16:52:28 |显示全部楼层
这样写可以吗?
知道标题要在代码第一行,但最简单实际的方法?这样有什么缺陷?我认为也很好啊!为什么要套标准的枷锁。请批我!

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


[ 本帖最后由 fb01192008 于 2010-4-26 16:54 编辑 ]

使用道具 举报

14px 

秋末

荣誉管理

帖子
1616
体力
4211
威望
52
居住地
湖南省 长沙市
发表于 2010-4-26 17:47:22 |显示全部楼层
参与下讨论:我用dl结构,不使用img。
理由:
用dl结构:这是个典型的定义列表,dl结构更语义。
不使用img:设计图中图标不属于“数据内容”的范畴。

使用道具 举报

nowar 楼主
帖子
234
体力
746
威望
0
发表于 2010-4-26 19:30:42 |显示全部楼层
原帖由 14px 于 2010-4-26 17:47 发表
参与下讨论:我用dl结构,不使用img。
理由:
用dl结构:这是个典型的定义列表,dl结构更语义。
不使用img:设计图中图标不属于“数据内容”的范畴。


up一下
非洲小白脸

使用道具 举报

帖子
200
体力
1549
威望
0
居住地
广东省 深圳市
发表于 2010-4-26 21:38:26 |显示全部楼层
图片只是背景,没必要IMG吧...顶#22

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

饥寒交迫.

使用道具 举报

nowar 楼主
帖子
234
体力
746
威望
0
发表于 2010-4-26 21:59:28 |显示全部楼层
都说了 文字和图片都是定义内容的一部分 呵呵
非洲小白脸

使用道具 举报

帖子
221
体力
678
威望
0
发表于 2010-4-26 22:12:01 |显示全部楼层
原帖由 nowar 于 2010-4-26 21:59 发表
都说了 文字和图片都是定义内容的一部分 呵呵

虽然说了图片也是定义内容的一部分,但我也会把它用背景来处理。

很简单,这个例子中有没有图片对访客影响不大,这样的图片可有可无,所以我用背景。

使用道具 举报

萨菲罗斯

初级会员 手机认证 

帖子
47
体力
115
威望
0
居住地
河南省 南阳市
发表于 2010-4-26 22:33:10 |显示全部楼层
原帖由 wangkaye 于 2010-4-26 22:12 发表

虽然说了图片也是定义内容的一部分,但我也会把它用背景来处理。

很简单,这个例子中有没有图片对访客影响不大,这样的图片可有可无,所以我用背景。


用图片有利于搜索引擎抓取

使用道具 举报

nowar 楼主
帖子
234
体力
746
威望
0
发表于 2010-4-27 09:44:39 |显示全部楼层
原帖由 safeiluosi020 于 2010-4-26 22:33 发表


用图片有利于搜索引擎抓取



呵呵 不光是SEO的问题 其实 已经说的很清楚了 图片也是实际内容的一部分
作为背景图片 总觉得不是那么回事儿···
非洲小白脸

使用道具 举报

贫僧法号净空

银牌会员 手机认证 

帖子
1322
体力
2897
威望
3
居住地
湖南省 湘潭市
发表于 2010-4-27 10:02:13 |显示全部楼层
原帖由 14px 于 2010-4-26 17:47 发表
参与下讨论:我用dl结构,不使用img。
理由:
用dl结构:这是个典型的定义列表,dl结构更语义。
不使用img:设计图中图标不属于“数据内容”的范畴。


哥这里的程序说 , 不用img ,.net没法更新
※ 看破红尘        ※ 遁入空门

使用道具 举报

mycggo 
帖子
1966
体力
4724
威望
0
发表于 2010-4-27 10:23:46 |显示全部楼层
这个帖子收获不小

标题用<DT>表示是否合适?感觉还是用<h x>更合适一些。

[ 本帖最后由 mycggo 于 2010-4-27 11:15 编辑 ]
坚韧不拔的毅力 & 良好的心态

使用道具 举报

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

Archiver|手机版|安久科技提供CDN|blueidea.com ( 京ICP备05002321号 )  

GMT+8, 2012-2-12 08:43 , Processed in 0.167460 second(s), 11 queries , Gzip On, Memcache On.

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部