怎样的“标题”与“更多”更简洁实用呢?
页面多了,不可避免的就会碰到“标题”与“更多”在一行内的情况。初一看下,这有什么可说的呢?不就是标题更多混写嘛,很简单啊。
是,确实很简单,不过在简单的同时还考虑实用合理的话,或许就有些些麻烦了。
比如,我们要定制一个如下图的“标题”与“更多”(想必是最常见的了)。
看到上图,首先头脑里就会有一个大致的结构,如:
<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>都是内联元素,感觉舒服点。