打印

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

lalasxc [楼主]

中级会员

帖子: 172
体力: 296
威望: 1
当前: 天津南开
离线: 2 天

专长 前端制作,JS,AS

1^# 大中小发表于 2008-4-15 17:08

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

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

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

TOP

做西部数码代理.Cn1元国际45元 | 将虚拟化进行到底

mental

小鱼的理想

高级会员

帖子: 321
体力: 646
威望: 0
当前: 山东威海

专长 网页设计,平面,前端制作

2^# 大中小发表于 2008-4-15 17:11

有排名的当然是用UL了

说到不如做到！

TOP

【美橙超级G空间】688元绑定10个子目录 | oracle工程师注册

hauy

初级会员

帖子: 118
体力: 160
威望: 0
当前: 上海浦东
离线: 2 天

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

3^# 大中小发表于 2008-4-15 17:13

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

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

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

噢噢~~~~

TOP

请大家尊重和保护奥运知识产权。

hejie06

高级会员

帖子: 240
体力: 740
威望: 0
离线: 5 天

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

4^# 大中小发表于 2008-4-15 17:14

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

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

辞职待业中，哈哈

TOP

还在为头像烦恼?还在为不能关注好友动态烦忧?快来蓝色理想家园吧!

lalasxc [楼主]

中级会员

帖子: 172
体力: 296
威望: 1
当前: 天津南开
离线: 2 天

专长 前端制作,JS,AS

5^# 大中小发表于 2008-4-15 17:19

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

TOP

lalasxc [楼主]

中级会员

帖子: 172
体力: 296
威望: 1
当前: 天津南开
离线: 2 天

专长 前端制作,JS,AS

6^# 大中小发表于 2008-4-15 17:21

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

TOP

hejie06

高级会员

帖子: 240
体力: 740
威望: 0
离线: 5 天

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

7^# 大中小发表于 2008-4-15 17:23

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

辞职待业中，哈哈

TOP

10dw

小盆友

高级会员

帖子: 464
体力: 901
威望: 0
当前: 美洲美国
离线: 1 天

专长 网页设计,JS,PHP

8^# 大中小发表于 2008-4-15 18:19

有点恶心凑合看吧

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

TOP

shulin

漂亮的疯子

初级会员

帖子: 83
体力: 120
威望: 0
当前: 北京大兴区
离线: 1 天

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

9^# 大中小发表于 2008-4-16 10:26

用table最合理！！

我很善狼！

TOP

lalasxc [楼主]

中级会员

帖子: 172
体力: 296
威望: 1
当前: 天津南开
离线: 2 天

专长 前端制作,JS,AS

10^# 大中小发表于 2008-4-16 10:29

用table最合理！！
严重同意·！！！！

TOP

cycloned

程让

金牌会员

帖子: 1311
体力: 3077
威望: 0
当前: 上海浦东
离线: 2 天

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

11^# 大中小发表于 2008-4-16 10:38

虽然看起来像是个OL，但他本质是列数据，表格应该最好

前端开发

TOP

czcz

新手上路

帖子: 14
体力: 33
威望: 0
离线: 48 天

12^# 大中小发表于 2008-4-16 10:51

如果您认为它是数据，那么用table就好，如果您比较注重它的有序性，那么用ol吧。

TOP