打印

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

nowar [楼主]

中级会员

帖子: 231
体力: 451
威望: 0
当前: 上海浦东
离线: 1 天

专长 网页设计,前端制作

1^# 大中小发表于 2010-4-24 22:51

因工作的关系，很长时间没来BI了，也没去参加过什么设计交流会...
最近有点时间，参加了今天下午14:30-18:00在携程举办的web标准交流会，同学们都比较有意思，说什么话题的都有：web标准、语义化标签、开发流程、开发工具、调试工具、浏览器、公司机器配置、PHP、服务器......

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

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

就像这样的，呵呵...

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

[ 本帖最后由 nowar 于 2010-4-24 22:56 编辑 ]

非洲小白脸

TOP

西部数码港台主机新上线即买即用 | 211工程高起专、高起本、专升本

zhaiyu963

昂流

高级会员

认证
帖子: 1033
体力: 917
威望: 0
当前: 上海静安

专长 UI,JAVA

2^# 大中小发表于 2010-4-24 23:01

纠结哥，我是Rain
刚到住所

对于你的语义化的建议很有感觉

WDM

TOP

PSD网页模板下载,高端实用 | 微软 visual studio 2010 专题

nowar [楼主]

中级会员

帖子: 231
体力: 451
威望: 0
当前: 上海浦东
离线: 1 天

专长 网页设计,前端制作

3^# 大中小发表于 2010-4-24 23:25

哈哈太刺激了...
交流会结束下来，还是不知道谁是谁···hoho...

非洲小白脸

TOP

网站设计新思路——水晶石教育 | 优质低价Flex就业培训

safeiluosi020

萨菲罗斯

初级会员

认证
帖子: 47
体力: 100
威望: 0
当前: 河南南阳
离线: 110 天

4^# 大中小发表于 2010-4-25 00:29

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

[ 本帖最后由 safeiluosi020 于 2010-4-25 00:35 编辑 ]

附件: 您所在的用户组无法下载或查看附件，您需要注册/登录后才能查看！

TOP

yjlrwmqj

xxhai

高级会员

帖子: 325
体力: 693
威望: 0
当前: 陕西西安
离线: 5 天

5^# 大中小发表于 2010-4-25 07:36

那个小图片用背景吧~~~
这样好像简洁点！~

小小孩

TOP

simplelife7

新手上路

帖子: 18
体力: 46
威望: 2
当前: 广东珠海
离线: 27 天

6^# 大中小发表于 2010-4-25 11:05

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>我选择使用DL DT DD来布局</title>
<style type="text/css">
body, div, p, form, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6 {
	margin:0;
	padding:0;
}
img {
	border:0 none;
}
body {
	font-family:"微软雅黑", "宋体"
}
ul {
	width:400px;
	margin:0 auto;
	list-style:none;
}
ul li {
	margin-top:10px;
}
dl {
	zoom:1;
}
ul li dl dt {
	float:right;
	width:290px;
	text-align:left;
}
ul li dl .pic {
	display:block;
	width:100px;
	height:100px;
	background:#69F;
	text-align:center;
	line-height:100px;
}
ul li dl .text {
	font-size:12px;
	line-height:20px;
	width:290px;
	float:right;
	margin-top:-75px;
	text-indent:2em;
}
</style>
</head>
<body>
<ul>
  <li>
    <dl>
      <dt><strong>标题标题标题</strong></dt>
      <dd class="pic">我是一张图</dd>
      <dd class="text">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><strong>标题标题标题</strong></dt>
      <dd class="pic">我是一张图</dd>
      <dd class="text">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><strong>标题标题标题</strong></dt>
      <dd class="pic">我是一张图</dd>
      <dd class="text">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</dd>
    </dl>
  </li>
  <li>
    <dl>
      <dt><strong>标题标题标题</strong></dt>
      <dd class="pic">我是一张图</dd>
      <dd class="text">描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述</dd>
    </dl>
  </li>
</ul>
</body>
</html>

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

如果是我，我会这么写~~用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 编辑 ]

TOP

kapiter

中级会员

认证
帖子: 186
体力: 358
威望: 0
当前: 北京朝阳区
离线: 1 天

专长 前端制作

7^# 大中小发表于 2010-4-25 11:10

《无懈可击的web设计》一书中有提到这个，我同意作者的观点
从语义的角度来讲，标题文字用dt，而图片和详细内容用dd，在结构上相对合理点。

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

TOP

kapiter

中级会员

认证
帖子: 186
体力: 358
威望: 0
当前: 北京朝阳区
离线: 1 天

专长 前端制作

8^# 大中小发表于 2010-4-25 11:31

额....

6楼的css这样可能好一点。

复制内容到剪贴板

代码:

dl {

    margin-top:20px;

        overflow:hidden;

        zoom:1;

}

ul li dl dt {

    float:right;

    width:290px;

    text-align:left;

    font-weight:bold;

}

ul li dl .pic {

    float:left;

    width:100px;

    height:100px;

    background:#69F;

}

ul li dl .text {

        margin-left:110px;    

}

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

TOP

nowar [楼主]

中级会员

帖子: 231
体力: 451
威望: 0
当前: 上海浦东
离线: 1 天

专长 网页设计,前端制作

9^# 大中小发表于 2010-4-25 20:47

太刺激了...
web标准交流会的同学们可以出来围观了呵呵

非洲小白脸

TOP

050304004

新手上路

认证
帖子: 12
体力: 31
威望: 0
当前: 福建泉州
离线: 98 天

10^# 大中小发表于 2010-4-26 09:32

围观

TIM FENG

警告

goos: 请勿在技术区进行非技术回复，谢谢理解！ 2010-4-29 17:56

提示：警告两次以上者，每次警告将会被禁言三天。

TOP

4321285

李寻饭

版主

认证
帖子: 2977
体力: 2557
威望: 2
当前: 北京海淀区
离线: 1 天

专长 网页设计,前端制作

11^# 大中小发表于 2010-4-26 09:44

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

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

佛说这个世界有五浊，其中一个见浊，人的见解很多，好、坏、对、错。又多又复杂！
如此，观点与观点互相碰撞，引起争论，平常人的争论会演变出口角、打架。领导阶级就会发动战争！每个人的起心动念都会影响世界！

TOP

zhutianyi

银牌会员

帖子: 5465
体力: 2402
威望: 2
当前: 上海长宁

专长 产品设计

12^# 大中小发表于 2010-4-26 09:54

这里的图片不用单独给标签
<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>

TOP

Tuan

暴

高级会员

认证
帖子: 812
体力: 634
威望: 1
当前: 广东深圳

专长 前端制作

13^# 大中小发表于 2010-4-26 12:48

如果是这样我会dt dd，图片作为背景；如果图片是产品，我会把它放到dt里

TOP

idche

中级会员

认证
帖子: 141
体力: 320
威望: 0
当前: 上海长宁
离线: 7 天

14^# 大中小发表于 2010-4-26 13:05

全是高手。

TOP

ddkan8

新手上路

帖子: 10
体力: 28
威望: 0
离线: 1 天

15^# 大中小发表于 2010-4-26 14:14

和11楼的结构相同，标题用dt，图片和内容用dd
css我会把图片向左浮动，标题和内容向右浮动

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

TOP

firhome

飞猪

中级会员

帖子: 269
体力: 350
威望: 0
当前: 上海长宁
离线: 1 天

专长 前端制作,PHP,MySQL

16^# 大中小发表于 2010-4-26 14:20

晚上发邮件通知大家。

TOP

safeiluosi020

萨菲罗斯

初级会员

认证
帖子: 47
体力: 100
威望: 0
当前: 河南南阳
离线: 110 天

17^# 大中小发表于 2010-4-26 14:21

11#css设置有问题，text文字增多就能看出来

TOP

itchina110

裕波

初级会员

帖子: 100
体力: 121
威望: 0
当前: 北京海淀区

专长 前端制作,JS,UE

18^# 大中小发表于 2010-4-26 14:25

第一种：
li
img
h
p

第二种：

dl
dt：标题
dd：图片
dd：内容

www.webchina110.cn

TOP

difangla

初级会员

认证
帖子: 73
体力: 153
威望: 0
当前: 山东荷泽
离线: 13 天

专长 网页设计,前端制作,SEO

19^# 大中小发表于 2010-4-26 15:03

我也来一个。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0; padding:0;}
body{ font-size:12px; font-family:Arial, Helvetica, sans-serif,"宋体"; background:#fff; color:#000; padding:20px;}
a:link,a:visited,a:active{ color:#000; text-decoration:none; font-size:12px;star:expression(this.onFocus=this.blur());}
a:hover{ color:#f00; text-decoration:underline;font-size:12px;}
a:focus {outline:0;}
dd,li { list-style:none;}
img { border:0;}
.pic { width:300px; overflow:hidden; clear:both; padding:0 0 10px}
.pic a { display:block; width:300px; height:100px; overflow:hidden; text-decoration:none; cursor:pointer;}
.pic img { display:block; width:120px; height:94px; padding:2px; background:#fff; border:1px solid #ccc; float:left}
.pic h4 { width:165px; height:16px; line-height:16px; font-size:14px; overflow:hidden; float:right; color:#00f;}
.pic p { line-height:22px; text-indent:2em; color:#666; width:165px; float:right;}
</style></head>
<body>
<div class="pic">
<a href="http://www.hezewangzhan.com/">
<img src="http://bbs.blueidea.com/attachment.php?aid=142967&k=bc6e4e49d904497aac8a207a809e054a&t=1272126751&noupdate=yes" alt="标题" />
<h4>这里就是标题咯！！</h4>
<p>详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述...</p>
</a>
</div>
<div class="pic">
<a href="http://www.hezewangzhan.com/">
<img src="http://bbs.blueidea.com/attachment.php?aid=142967&k=bc6e4e49d904497aac8a207a809e054a&t=1272126751&noupdate=yes" alt="标题" />
<h4>这里就是标题咯！！</h4>
<p>详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述...</p>
</a>
</div>
<div class="pic">
<a href="http://www.hezewangzhan.com/">
<img src="http://bbs.blueidea.com/attachment.php?aid=142967&k=bc6e4e49d904497aac8a207a809e054a&t=1272126751&noupdate=yes" alt="标题" />
<h4>这里就是标题咯！！</h4>
<p>详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述...</p>
</a>
</div>
<div class="pic">
<a href="http://www.hezewangzhan.com/">
<img src="http://bbs.blueidea.com/attachment.php?aid=142967&k=bc6e4e49d904497aac8a207a809e054a&t=1272126751&noupdate=yes" alt="标题" />
<h4>这里就是标题咯！！</h4>
<p>详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述详细描述...</p>
</a>
</div>
</body>
</html>

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

[ 本帖最后由 difangla 于 2010-4-26 15:07 编辑 ]

搜索“地方网络”找我

TOP

impan

猪的明天

初级会员

认证
帖子: 40
体力: 85
威望: 3
当前: 上海闸北
离线: 59 天

20^# 大中小发表于 2010-4-26 15:22

回复 18# itchina110 的帖子

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

UECSS.COM

TOP

fb01192008

初级会员

帖子: 35
体力: 65
威望: 0
离线: 29 天

21^# 大中小发表于 2010-4-26 16:52

这样写可以吗？
知道标题要在代码第一行，但最简单实际的方法？这样有什么缺陷？我认为也很好啊！为什么要套标准的枷锁。请批我！

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

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

TOP

14px

秋末

版主

帖子: 1545
体力: 3250
威望: 52
当前: 湖南长沙
离线: 1 天

专长 网页设计,UI,前端制作

22^# 大中小发表于 2010-4-26 17:47

参与下讨论：我用dl结构，不使用img。
理由：
用dl结构：这是个典型的定义列表，dl结构更语义。
不使用img：设计图中图标不属于“数据内容”的范畴。

我的博客（14px.com）我的微博（t.qq.com/qweibo）

TOP

nowar [楼主]

中级会员

帖子: 231
体力: 451
威望: 0
当前: 上海浦东
离线: 1 天

专长 网页设计,前端制作

23^# 大中小发表于 2010-4-26 19:30

引用:

原帖由 14px 于 2010-4-26 17:47 发表
参与下讨论：我用dl结构，不使用img。
理由：
用dl结构：这是个典型的定义列表，dl结构更语义。
不使用img：设计图中图标不属于“数据内容”的范畴。

up一下

非洲小白脸

TOP

shadowhuan

中级会员

认证
帖子: 195
体力: 343
威望: 0
当前: 广东深圳
离线: 6 天

专长 前端制作

24^# 大中小发表于 2010-4-26 21:38

图片只是背景,没必要IMG吧...顶#22

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dl</title>
<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<style type="text/css">

</style>
</head>
<body>
<dl style="background-image:url(http://www.pingan.com/app_images/pingan/v20/pinganlicaizhuanqu/pic_08.jpg)">
	<dt>免担保免抵押</dt>
	<dd>子女教育、出国进修、新屋装修缺钱？平安银行快速帮你解决燃眉之急！ 子女教育、出国进修、新屋装修缺钱？平安银行快速帮你解决燃眉之急！ </dd>
</dl>
<dl style="background-image:url(http://www.pingan.com/app_images/pingan/v20/pinganlicaizhuanqu/pic_02.jpg)">
	<dt>免担保免抵押</dt>
	<dd>子女教育、出国进修、新屋装修缺钱？平安银行快速帮你解决燃眉之急！ 子女教育、出国进修、新屋装修缺钱？平安银行快速帮你解决燃眉之急！ </dd>
</dl>
<dl style="background-image:url(http://www.pingan.com/app_images/pingan/v20/pinganlicaizhuanqu/pic_12.jpg)">
	<dt>免担保免抵押</dt>
	<dd>子女教育、出国进修、新屋装修缺钱？平安银行快速帮你解决燃眉之急！ 子女教育、出国进修、新屋装修缺钱？平安银行快速帮你解决燃眉之急！ </dd>
</dl>
</body>
</html>

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

饥寒交迫.

TOP

nowar [楼主]

中级会员

帖子: 231
体力: 451
威望: 0
当前: 上海浦东
离线: 1 天

专长 网页设计,前端制作

25^# 大中小发表于 2010-4-26 21:59

都说了文字和图片都是定义内容的一部分呵呵

非洲小白脸

TOP

wangkaye

中级会员

认证
帖子: 219
体力: 413
威望: 0
当前: 上海闵行
离线: 1 天

专长 前端制作,SEO

26^# 大中小发表于 2010-4-26 22:12

引用:

原帖由 nowar 于 2010-4-26 21:59 发表
都说了文字和图片都是定义内容的一部分呵呵

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

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

小马

TOP

safeiluosi020

萨菲罗斯

初级会员

认证
帖子: 47
体力: 100
威望: 0
当前: 河南南阳
离线: 110 天

27^# 大中小发表于 2010-4-26 22:33

引用:

原帖由 wangkaye 于 2010-4-26 22:12 发表

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

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

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

TOP

nowar [楼主]

中级会员

帖子: 231
体力: 451
威望: 0
当前: 上海浦东
离线: 1 天

专长 网页设计,前端制作

28^# 大中小发表于 2010-4-27 09:44

引用:

原帖由 safeiluosi020 于 2010-4-26 22:33 发表

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

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

非洲小白脸

TOP

HeTingYi

贫僧法号净空

银牌会员

帖子: 1291
体力: 1743
威望: 3
当前: 湖南湘潭
离线: 5 天

专长 UI,前端制作

29^# 大中小发表于 2010-4-27 10:02

引用:

原帖由 14px 于 2010-4-26 17:47 发表
参与下讨论：我用dl结构，不使用img。
理由：
用dl结构：这是个典型的定义列表，dl结构更语义。
不使用img：设计图中图标不属于“数据内容”的范畴。

哥这里的程序说，不用img ，.net没法更新

※ 看破红尘 ※ 遁入空门

TOP

mycggo

银牌会员

认证
帖子: 1637
体力: 2450
威望: 0
当前: 上海浦东

专长 网页设计,前端制作,UE

30^# 大中小发表于 2010-4-27 10:23

这个帖子收获不小

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

[ 本帖最后由 mycggo 于 2010-4-27 11:15 编辑 ]

适当偏执但适合最好

TOP