请选择进入手机版 | 继续访问电脑版

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

邮件列表客服QQ 800003860 切换到窄版

点点网模板设计大赛

phpchina

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

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

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

经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › web标准交流会归来---关于一个布局写法的争论

12 3 4 下一页

发新帖

查看: 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...

非洲小白脸

使用道具举报

safeiluosi020　

萨菲罗斯

初级会员 

帖子: 47
体力: 115
威望: 0
居住地: 河南省南阳市

发表于 2010-4-25 00:29:57 |显示全部楼层

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

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

附件: 你需要登录才可以下载或查看附件。没有帐号？注册 

使用道具举报

xxhai

帖子: 339
体力: 1212
威望: 0
居住地: 陕西省西安市

发表于 2010-4-25 07:36:32 |显示全部楼层

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

使用道具举报

帖子: 18
体力: 57
威望: 2
居住地: 广东省珠海市

发表于 2010-4-25 11:05:04 |显示全部楼层

<!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 编辑 ]

使用道具举报

落落

帖子: 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这样可能好一点。

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 编辑 ]

使用道具举报

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里

使用道具举报

中级会员 

帖子: 144
体力: 332
威望: 0

发表于 2010-4-26 13:05:52 |显示全部楼层

全是高手。

使用道具举报

帖子: 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 |显示全部楼层

晚上发邮件通知大家。

使用道具举报

safeiluosi020　

萨菲罗斯

初级会员 

帖子: 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 |显示全部楼层

我也来一个。

<!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 编辑 ]

搜索“地方网络”找我

使用道具举报

猪的明天

帖子: 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：设计图中图标不属于“数据内容”的范畴。

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

使用道具举报

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

<!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>

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

饥寒交迫.

使用道具举报

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 发表
都说了文字和图片都是定义内容的一部分呵呵

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

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

使用道具举报

safeiluosi020　

萨菲罗斯

初级会员 

帖子: 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没法更新

※ 看破红尘 ※ 遁入空门

使用道具举报

金牌会员 

帖子: 1966
体力: 4724
威望: 0

发表于 2010-4-27 10:23:46 |显示全部楼层

这个帖子收获不小

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

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

坚韧不拔的毅力 & 良好的心态

使用道具举报

12 3 4 下一页

发新帖

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.

回顶部