网页设计之5中简单的XHTML网页表单。
技术3：语义先生
web 标准的信条之一就是考虑数据类型和与之对应的代码。既然表单是一个连续的问题列表，那么有序列表用在这里就非常贴切。
主要好处：
结构化
代码：
ol {
list-style: none;
padding-left: 0;
}
运行结果：
#example3 ol {
list-style: none;
padding-left: 0;
}
技术4：分而治之
假如你采取将横向表单，需要何种形式？很多情况（客户）会要求横向表单。我们可以依赖的是老伙伴 div，只需要把表单分割成多栏。利用标签三明治方法我们可以很容易的实现。
主要好处
：空间的利用
代码：
label, input, select, textarea {display: block;}
label {margin-bottom: 10px;}
input[type="radio"], input[type="checkbox"] {display: inline;}
.form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
运行结果：
#Example4 label,#Example4 input, #Example4 select, #Example4 textarea {display: block;}
#Example4 label {margin-bottom: 10px;}
#Example4 input[type="radio"], #Example4 input[type="checkbox"] {display: inline;}
#Example4 .form-column {
width: 150px;
height: 250px;
padding-left: 20px;
border-left: 1px solid #ccc;
float: left;
}
技术5：老学究似的懒人
如果你不想纠缠与 CSS，非常匆忙，并且不打算做浏览器测试，你应该另外找个新工作。玩笑而已，这个是为你准备的。
主要好处
：直观
代码：
运行结果：
上一页
1
2
下一页
阅读全文
网页设计之5种简单的XHTML网页表单
•
👁 0人浏览过