-----------------------------------------
/* demo31.css 内容如下 */
*{
padding: 0
margin: 0
color: #333
font-size: 15px
}
table td, table th{
padding: 5px
text-align: center
}
.table-title{
font:normal 25px '700' "微软雅黑"
}
.table-itemClo{
background-color: #999
}
.table-itemClo th{
font:normal 18px '700'
color: #fff
width: 100px
}
.table-itemsTit{
background-color: #ddd
font-weight: 700
}
.table-itemRowTh{
font-weight: 700
}
--------------------------------------------------
demo31.html 内容如下（本句不要粘贴进去）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="demo31.css"/>
</head>
<body>
<table border="" cellspacing="0" cellpadding="0">
<tr>
<th class="table-title" colspan="5">浏览器兼容性一览表</th>
</tr>
<tr class="table-itemClo">
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<th class="table-itemsTit" colspan="5">浏览器兼容性一览表</th>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<th class="table-itemsTit" colspan="5">浏览器兼容性一览表</th>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td class="table-itemRowTh">Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
</html>
实现表单自定义验证消息，实际上很简单。大体思路为:1、首先我们要设置表单的验证规则
2、然后根据表单的验证规则定义要显示验证消息，
3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。
下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms: 验证提示</title>
// 设置一些必要的样式，如验证消息的文字样式和控制验证消息显隐的样式
<style>
input:valid {
background: #fff
}
input:invalid {
background: #fcc
color: #333
}
.validation-messages {
margin-bottom:15px
}
.validation-messages span {
font-size:0.8em
background-color:#eee
padding:6px
border:1px solid #ccc
border-radius:10px
color:#666
}
//所有class属性为hide的元素都会被隐藏
.hide {
display:none
}
</style>
</head>
<body>
<article>
<h1>Forms<span>- 验证提示</span></h1>
</article>
<div id="result-stub" class="well hidden">
<form id="change-email-form" name="change-email-form">
<fieldset>
<h4>修改邮箱地址</h4>
//设置表单应该遵循的验证规则。
//pattern 属性：规定用于验证输入字段的模式。
//maxlength 属性：规定输入字段的最大长度,以字符个数计。
//required属性：规定该input元素为必须的元素。
<label>用户名:</label>
<input type="text" name="username"
id="username" pattern="[a-zA-Z ]{5,}"
maxlength="30" required />
//设置表单的验证消息，并结合class属性样式将其隐藏起来
<div>
//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种
<span data-rule="valueMissing"
class="hide">用户名不能为空.</span>
<span data-rule="patternMismatch"
class="hide">必须是字母字符(长度应为5~30个字符).</span>
</div>
<label>邮箱地址:</label>
//设置表单应该遵循的验证规则。
<input type="email" name="email" id="email"
title="Email address is required" required />
//设置表单的验证消息，并结合class属性样式将其隐藏起来
<div>
<span data-rule="valueMissing">
邮箱地址不能为空.</span>
<span data-rule="typeMismatch">
邮箱格式不正确.</span>
</div>
<hr />
//设置两个按钮，作用分别是“清空表单内容和对表单中的内容进行验证
<button type="submit" id="submit"
name="submit">修改</button>
<button type="button" id="checkValidation"
name="checkValidation"
class="btn">验证</button>
</fieldset>
</form>
</div>
<script>
window.onload= function() {
//---
// 创建一个验证规则容器。
var ruleNames = []
// 填充验证规则容器.
// 寻找所有具有验证规则的元素，然后将该元素的data-rule属性值添加到验证规则数组中去。
$("[data-rule]").each(function(i, element) {
var ruleName = element.getAttribute('data-rule')
if ($.inArray(ruleName, ruleNames) <0) {
ruleNames.push(ruleName)
}
})
var
// 首先确定用户界面隐藏了所有验证消息。
// 然后在选定的表单上运行验证规则。
validate = function() {
$(".validation-messages span")
.addClass('hide')
document.getElementById('change-email-form')
.checkValidity()
},
// 查询每个输入的元素，以确定哪个元素无效。
// 一旦检测到无效元素，就遍历验证规则，找到无效的原因，然后通过消息对用户进行提示
validationFail = function(e) {
var
element = e.srcElement,
validity = element.validity
if (!validity.valid) {
ruleNames.forEach(function(ruleName) {
checkRule(validity,
ruleName,
element)
})
e.preventDefault()
}
},
// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。
//如果这个验证规则返回ture，就表示无法通过验证，在表单中就会有相应的提示信息。
checkRule = function(state, ruleName, ele) {
if (state[ruleName]) {
$(ele).next()
.find('[data-rule="'
+ ruleName + '"]')
.removeClass('hide')
}
}
// 所有验证事件处理程序是附加在input元素上的而不是button元素
$(':input:not(:button)').each(function() {
this.oninvalid = validationFail
this.onblur = validate
})
$('#checkValidation').click(validate)
}
</script>
<script src="../js/jquery.js"></script>
</body>
</html>
推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。
HTML5+JavaScript+CSS3实现下拉列表以及折叠功能[javascript] view plain copy
function show(id){
var d = $('#content'+id).css('display')
if(d == 'block'){
$('#content'+id).css('display','none')
$('#img'+id).attr('src','img/bottom.png')
}else if(d == 'none'){
$('.drop_down_content').each(function(){
$(this).css('display','none')
$('.drop_down_list img').attr('src','img/bottom.png')
})
$('#content'+id).css('display','block')
$('#img'+id).attr('src','img/top.png')
}
[html] view plain copy
<div class="drop_down_list" onclick="show('1')">
<a>svg</a>
<img id="img1" src="img/top.png"/>
</div>
<ul class="drop_down_content" id="content1" style="display:block">
<li>姓名 <a>李雷</a></li>
</ul>
<div class="drop_down_list" onclick="show('2')">
<a>动画</a>
<img id="img2" src="img/bottom.png"/>
</div>
<ul class="drop_down_content" id="content2" style="display:none">
<li>父亲 <a>李大宝</a></li>
</ul>
[css] view plain copy
ul{
list-style-type: none
-webkit-margin-before: 0px
-webkit-margin-after: 0px
-webkit-margin-start: 0px
-webkit-margin-end: 0px
-webkit-padding-start: 0px
-webkit-padding-after: 0px
}
.drop_down_list{
width:100%
height:44px
border-bottom: 1px solid #D9D9D9
}
.drop_down_list a{
display: inline-block
height:44px
width:100px
background: url(../img/biaozhu.png) 0px 13px no-repeat
background-size: 6px 20px
padding-left: 25px
padding-top: 12px
color: #0085d0
}
.drop_down_list img{
float: right
height:15px
margin: 15px 20px
}
.drop_down_content a{
color: #AAAAAA
display: inline-block
float: right
margin-right: 8%
}
.drop_down_content li{
height:38px
width:94%
color: #353535
margin-left: 3%
margin-right: 3%
padding-top: 15px
padding-left: 20px
border-bottom: 1px solid #D9D9D9
}
