位置：首页>> 网络编程>> 网页设计>> [翻译]标记语言和样式手册 chapter 5 表单（8）

[翻译]标记语言和样式手册 chapter 5 表单（8）

作者：zhaozy　来源：3user.com　发布时间：2008-01-23 17:20:00　

标签：样式,标记,css,手册,表单

立体的<legend>

最后,为<legend>标签指定一些样式,做出立体的边线效果,让它看起来像是与<fieldset>元素的边线连在一起.

#thisform {
  font-family: Georgia, serif;
  font-size: 12px;
  color: #999;
  }
#thisform label {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  color: #660000;
  }
#thisform fieldset {
  border: 1px solid #ccc;
  padding: 0 20px;
  }
#thisform legend {
  font-family: arial, sans-serif;
  font-weight: bold;
  font-size: 90％;
  color: #666;
  background: #eee;
  border: 1px solid #ccc;
  border-bottom-color: #999;
  border-right-color: #999;
  padding: 4px 8px;
  }

如你所见,这里做了几件事,首先,调整了<legend>的字体,粗细与大小,接着产生了立体效果,把背景设为浅灰色,然后在整个<legend>的外面加上配合<fieldset>边线颜色的单像素边线,为了达成阴影效果,我们还把底部与右侧的边线颜色换成深一点的灰色.

字体大小百分比: 由于我们之前为整个#thisform 的字体设置为font-size:12px;因此要缩小<legend>文字时,我们直接用百分比,在较高层级指定字体大小,接着在底层使用百分比,能够减轻未来的维护负担.要调大整个网站的字体大小么?只要修改一个地方,所有百分比都会随之改变.事实上,最理想的状况下,我们可以设定<body>的初始字型大小,然后在其他所有地方使用百分比.然而在这个示例中,我们选择在<form>层级指定字体大小.

然后调整内部定,以便文字与边线之间留下一点空间.就是这样了!图5-14显示的是最后结果,加上本章内的所有CSS代码,同时仍然使用最简洁,灵活的表单结构.

图5-14 完成的表单示例,以CSS设定样式.

结论

标记表单有许多方法,不管你使用表格,定义清单,还是最基本的段落标签进行说明,表单元素的排版,都要记住,本章讨论的易用性功能,可以轻易加到任何方法里面.

像是tabindex与accesskey这种属性可以提升浏览效率,而<label>元素与对应的id属性能确保互助设备可以正确辨识你的表单内容.

基于短小简介的修改,就能得到更好的结果.

下一章：chapter 6 <strong>,<em>与其他短语元素

第一页上一页 4 5 6 7

投稿

[翻译]标记语言和样式手册 chapter 5 表单（8）

猜你喜欢