经典论坛 › 论坛 › 网站开发区 › HTML5及WEB标准化专栏 › 这种格式怎样才能符合语义呢？

查看: 907|回复: 11

[求助] 这种格式怎样才能符合语义呢？ [复制链接]

lalasxc　楼主

高级会员

帖子: 298
体力: 887
威望: 3

发表于 2008-4-15 17:08:24 |显示全部楼层

http://www.tjdadi.com.cn/oo/index.html
把偶偶视频网站截图下来做的，但是这一部分不知怎么做好，如下图，要怎样才能方便还符合语义呢：

是UL好，还是DL好呢？请大家指教。

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

西部数码顶级域名注册商39元抢注！

使用道具举报

mental　

小鱼的理想

银牌会员 

帖子: 568
体力: 2304
威望: 1
居住地: 山东省济宁市

发表于 2008-4-15 17:11:52 |显示全部楼层

有排名的当然是用UL了

租服务器，上51IDC | [长沙]招聘:PHP经理10K/WEB前端6K/PHP开发6K

使用道具举报

hauy　

初级会员

帖子: 126
体力: 289
威望: 0

发表于 2008-4-15 17:13:59 |显示全部楼层

这个部分，用ol就可以了。
不过只用ol的话，数字部分的样式会比较难写。

简单一点的话，ol里嵌套个其他标签。
用dl或者加个span我觉得问题都不大，只是不太符合语义。

[ 本帖最后由 hauy 于 2008-4-15 17:15 编辑 ]

噢噢~~~~

使用道具举报

hejie06　

钻石会员

帖子: 322
体力: 5032
威望: 0
居住地: 广东省深圳市

发表于 2008-4-15 17:14:30 |显示全部楼层

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

[ 本帖最后由 hejie06 于 2008-4-15 17:15 编辑 ]

@seadesign

使用道具举报

lalasxc　楼主

高级会员

帖子: 298
体力: 887
威望: 3

发表于 2008-4-15 17:19:10 |显示全部楼层

布局倒不是问题，关键是样式表去掉后，用户还能看明白，就是名次要和视频名称看起来有对应关系，像表格一样

使用道具举报

lalasxc　楼主

高级会员

帖子: 298
体力: 887
威望: 3

发表于 2008-4-15 17:21:22 |显示全部楼层

谢谢各位，个觉得4＃的方法合理些

使用道具举报

hejie06　

钻石会员

帖子: 322
体力: 5032
威望: 0
居住地: 广东省深圳市

发表于 2008-4-15 17:23:44 |显示全部楼层

这种情况，应该有所取舍。
看你重点是在列表还是有序？
列表的话，用ol，ul，dl都没多大问题，要是在乎有序列表的话，还是用ol吧。
当然，处理起来，个人认为dl占优势。

@seadesign

使用道具举报

10dw　

小盆友

高级会员

帖子: 474
体力: 1851
威望: 0
居住地: 美洲美国

发表于 2008-4-15 18:19: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>none</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}
body {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:small;}
ul {list-style-type:none;}
#child_board_chinese_video {position:relative;width:300px;height:300px;background-color:#EFEFEF;}
img.child_board_vision {height:30px;position:absolute;left:0;top:0;}
h3.child_board_head_title {text-align:center;line-height:30px;position:relative;color:#FF0000;font-size:18px;}
span.more {position:absolute;right:0;top:0;}
span>a {text-decoration:none;color:#FF0033;font-weight:normal;font-size:12px;}
table.child_board_body {width:300px;border-collapse:collapse;}
.child_board_body_sort {width:40px;height:20px;}
.child_board_body_name {height:20px;width:auto;border-left:1px solid #999999;}
th {background-color:#FFCC66;}
tr.child_board_body_piece_odd>td {background-color:#FFFFCC;}
table>tbody>tr {text-align:left;}
table>tbody>tr>td.child_board_body_sort {text-align:center;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="child_board_chinese_video">
<img class="child_board_vision" src="http://www.baidu.com/img/logo.gif" />
<div class="child_board_head">
<h3 class="child_board_head_title">十一期<span class="more"><a href="javascript:void(0)">more...</a></span></h3>
</div>
<table class="child_board_body">
<thead>
<tr>
<th class="child_board_body_sort">排名</th><th class="child_board_body_name">名称</th>
</tr>
</thead>
<tbody>
<tr class="child_board_body_piece_odd">
<td class="child_board_body_sort">1</td><td class="child_board_body_name">这一部分不知怎么做好</td>
</tr>
<tr>
<td class="child_board_body_sort">2</td><td class="child_board_body_name">是UL好，还是DL好呢？</td>
</tr>
<tr class="child_board_body_piece_odd">
<td class="child_board_body_sort">3</td><td class="child_board_body_name">要怎样才能方便还符合语义</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

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

<!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>none</title>
<style type="text/css" media="screen">
* {margin:0;padding:0;}
body {font-family:Verdana, Arial, Helvetica, sans-serif;font-size:small;}
ul {list-style-type:none;}
#child_board_chinese_video {position:relative;width:300px;height:300px;background-color:#EFEFEF;}
img.child_board_vision {height:30px;position:absolute;left:0;top:0;}
h3.child_board_head_title {text-align:center;line-height:30px;position:relative;color:#FF0000;font-size:18px;}
span.more {position:absolute;right:0;top:0;}
span>a {text-decoration:none;color:#FF0033;font-weight:normal;font-size:12px;}
table.child_board_body {width:300px;border-collapse:collapse;}
.child_board_body_sort {width:40px;height:20px;}
.child_board_body_name {height:20px;width:auto;border-left:1px solid #999999;}
th {background-color:#FFCC66;}
tr.child_board_body_piece_odd>td {background-color:#FFFFCC;}
table>tbody>tr {text-align:left;}
table>tbody>tr>td.child_board_body_sort {text-align:center;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="child_board_chinese_video">
<img class="child_board_vision" src="http://www.baidu.com/img/logo.gif" />
<div class="child_board_head">
<h3 class="child_board_head_title">十一期<span class="more"><a href="javascript:void(0)">more...</a></span></h3>
</div>
<table class="child_board_body">
<thead>
<tr>
<th class="child_board_body_sort">排名</th><th class="child_board_body_name">名称</th>
</tr>
</thead>
<tbody>
<tr class="child_board_body_piece_odd">
<td class="child_board_body_sort">1</td><td class="child_board_body_name">这一部分不知怎么做好</td>
</tr>
<tr>
<td class="child_board_body_sort">2</td><td class="child_board_body_name">是UL好，还是DL好呢？</td>
</tr>
<tr class="child_board_body_piece_odd">
<td class="child_board_body_sort">3</td><td class="child_board_body_name">要怎样才能方便还符合语义</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>