怎样的“标题”与“更多”更简洁实用呢？
页面多了，不可避免的就会碰到“标题”与“更多”在一行内的情况。初一看下，这有什么可说的呢？不就是标题更多混写嘛，很简单啊。
是，确实很简单，不过在简单的同时还考虑实用合理的话，或许就有些些麻烦了。
比如，我们要定制一个如下图的“标题”与“更多”（想必是最常见的了）。
看到上图，首先头脑里就会有一个大致的结构，如：
<h3><strong>今日新闻</strong><span>更多</span></h3>
或者：
<h3>今日新闻</h3><span>更多</span>
再或者其它。
结构也许就是这样的，但如何把效果实现出来呢？比如第一种结构要如何写样式？常规的想法会是让<strong>左浮动，<span>右浮动，可不可以？当然可以，只不过稍显麻烦了点。
写了以下4种来讨论这个问题：
［演示地址：http://www.doyoe.com/model/xhtmlcss/style/tit_more.htm］
CSS部分：
/*第一种写法样式*/
.case_1 span {
float:right;
}
/*第二种写法样式*/
.case_2 {
width:100%;
overflow:hidden;
}
.case_2 strong {
float:left;
}
.case_2 span {
float:right;
}
/*第三种写法样式*/
.case_3 {
text-align:right;
}
.case_3 strong {
float:left;
}
/*第四种写法样式*/
.case_4 {
text-align:right;
}
.case_4 h3 {
float:left;
}
XHTML部分：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe, 飘零雾雨, edzmaster@gmail.com" />
<title>怎样的"标题与更多"更简洁实用</title>
</head>
<body>
<h3>以下只列举4种比较常见的写法：</h3>
<dl>
<dt>第一种：</dt>
<dd><h3 class="case_1"><span>更多 »</span><strong>今日新闻</strong></h3>< /dd>
<dt>第二种：</dt>
<dd><h3 class="case_2"><strong>今日新闻</strong><span>更多 »</span></h3></dd>
<dt>第三种：</dt>
<dd><h3 class="case_3"><strong>今日新闻</strong><span>更多 »</span></h3></dd>
<dt>第四种：</dt>
<dd><div class="case_4"><h3>今日新闻</h3><span>更多 »</span></div></dd>
</dl>
</body>
</html>
从结构上看，第一种情况把“更多”写在了“今日新闻”前面，按理说只要效果是一样的就行，但从合理性上来考虑，主观上就会觉得这样写不妥。应该把重要的信息“置前”。（不妥）
第二、三两种情况在结构上是一样的，没有第一种情况的那个问题，但和第四种情况对比起来，个人感觉会是第四种情况语义更好点，对于这点仁者见仁，智者见智。
从样式上看，第一种情况最简单，只需要让<span>右浮动就行；第二种情况则要分别让<strong>和< span>左浮动和右浮动，但之后又得为其清除浮动，显得有些麻烦（不妥）；第三种情况让整个<h3>的内容居右，然后再单独使 <strong>左浮动；第四种情况分别让<h3>和<span>左浮动和右浮动，之后也得清除浮动。
综合结构和样式两种情况，第一种写法在结构上被排除了；第二种在样式上被排除了；第三种结构一般，但样式OK；第四种结构OK，样式也OK，不过个人而言还是比较喜欢第三种。主观上不喜欢类似<h3><span>这样块级和内联元素并行的写法，而< strong><span>都是内联元素，感觉舒服点。
发表于 @ 2007年10月10日 08:41:00|评论(loading...)|编辑