[翻译]标记语言和样式手册 chapter 5 表单（8）
作者：zhaozy 来源：3user.com 时间：2008-01-23 17:20:00
立体的<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>与其他短语元素
0
投稿猜你喜欢
D3.js实现拓扑图的示例代码
python鼠标绘图附代码
Mysql安装注意事项、安装失败的五个原因分析
关于SQL中CTE（公用表表达式）（Common Table Expression）的总结
浅析mysql 语句的调度优先级及改变
Python之re操作方法(详解)
Python Django框架中表单的用法详解
用css+js给网页背景插入flash播放器
django框架使用orm实现批量更新数据的方法
mpvue跳转页面及注意事项
MySQL 数据库 source 命令详解及实例
Python range与enumerate函数区别解析
python 实现ping测试延迟的两种方法
Python全栈之学习JS(1)
Python识别快递条形码及Tesseract-OCR使用详解
python中set()函数简介及实例解析
JS设计模式之单例模式（一）
sql server实现分页的方法实例分析
如何利用PHP实现上传图片功能详解
