一：文本：
1：文本下拉框textarea
Demo:
2:
二：表格：
1：表格布局
Demo:
三：正则：
自定义方法：
匹配：
要想提交table必须加上form。DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ注册验证</title>
<style>
body{
background-image: url("images/body.png");
background-repeat: repeat-x;
}
table{
margin-left: 200px;
font-size: 14px;
}
tr>td:first-of-type{
text-align: right;
}
td>span{
font-size: 13px;
color:red;
}
</style>
<script type="text/javascript">
function valinfo(id,valuemsg,patternmsg){
var e = document.getElementById(id);
if(e.validity.valueMissing){
e.setCustomValidity(valuemsg);
}else if(e.validity.patternMismatch){
e.setCustomValidity(patternmsg);
}else{
e.setCustomValidity("")
}
}
function funsubmit(){
valinfo("nickname","昵称不能为空","昵称长度为4-10个字符");
valinfo("password","密码不能为空","密码长度为6-16个字符");
var e =document.getElementById("confirm");
if(e.validity.valueMissing){
e.setCustomValidity("确认密码不能为空");
}else if(e.validity.patternMismatch){
e.setCustomValidity("确认密码长度为6-16个字符");
}else if(e.value!=document.getElementById("password").value){
e.setCustomValidity("两次密码输入不一致");
}else{
e.setCustomValidity("");
}
valinfo("phone","手机号码不能为空","密码长度为11位，以13|5|7|8开头")
valinfo("email","电子邮箱不能为空","邮箱格式中有且只有一个@符号")
valinfo("age","年龄不能为空","必须是18-60之间的数字")
}
</script>
</head>
<body>
<img src="images/bg_chs.png" />
<form action="" method="POST">
<table border="0" cellpadding="" cellspacing="">
<tr>
<td style="text-align: left;" colspan="3"><strong>注册账号</strong></td>
</tr>
<tr>
<td>昵称：</td>
<td> <input type="text" id="nickname"
name="nickname" required="required" pattern="\w{4,10}"/></td>
<td><span>长度为4-10个字符</span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" id="password"
name="password" required="required" pattern="\w{6,16}"/></td>
<td><span>长度为6-16个字符</span></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" id="confirm"
name="confirm" required="required" pattern="\w{6,16}"/></td>
<td><span>长度为6-16个字符</span></td>
</tr>
<tr>
<td>手机号码:</td>
<td><input type="text" id="phone"
name="phone" required="required" pattern="1[3,5,7,8]\d{9}"</td>
<td><span>密码长度为11位，以13|5|7|8开头</span></td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="text" id="email"
name="email" required="required" pattern="\w+@\w+[.]\w"/></td>
<td><span>邮箱格式中有且只有一个@符号</span></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" id="age" name="age"
required="required" pattern="(1[8,9])|([2-5]\d)|(60)"/></td>
<td><span>必须是18-60之间的数字</span></td>
</tr>
<tr>
<td> </td>
<td><input onclick="funsubmit();" type="image" style="height: 30px;" src="images/btn.bmp"></td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
四：边框border
Demo自定义序号样式：一定要将样式设为块不然不能设置
自定义边框型按键：
五：鼠标：
鼠标放上去onmouseover，鼠标移走 onmouseleave：Demo：
<script>
function funcback(id1,id2) {
var e =document.getElementById(id1)
var x= document.getElementById(id2)
e.style.backgroundColor='rgb(219, 27, 85)';
x.style.color='rgb(219, 27, 85)';
}
function funcoriginal(id1,id2) {
var e =document.getElementById(id1)
var x= document.getElementById(id2)
e.style.backgroundColor='black';
x.style.color='gray';
}
</script>
</head>
<body>
<p id="p1">大家都喜欢买的美容品</p>
<dir id="div1">
<ul id="u1">
<li ><span id="s1" onmouseover="funcback('s1','a1');" onmouseleave="funcoriginal('s1','a1');">1</span><a href="#" id="a1" onmouseover="funcback('s1','a1');" onmouseleave="funcoriginal('s1','a1');">雅诗兰黛即时修护眼部精华霜15ml</a></li>
<li><span id="s2" onmouseover="funcback('s2','a2');" onmouseleave="funcoriginal('s2','a2');">2</span><a href="#" id="a2" onmouseover="funcback('s2','a2');" onmouseleave="funcoriginal('s2','a2');">伊丽莎白雅顿显效复合活肤霜 75ml</a></li>
</ul>
</dir>
</body>
六：透明度：
七：flex文本的排布 
八：HTML特效
绝对定位下的z-index：100后面不带单位
九：表格
DEMO：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热销时装</title>
<style>
ul>li {
list-style: none;
font-size: 14px;
}
ul>li:first-of-type {
font-weight: bolder;
line-height: 40px;
}
td[rowspan="2"] ul li {
line-height: 50px;
}
body {
margin-left: 450px;
margin-top: 50px;
}
table {
width: 800px;
height: 350px;
margin: 50px auto;
}
li img {
transform: translate(50px, 0px);
cursor: pointer;
transition: transform 1s 0s ease-in-out;
}
li img:hover {
transform: translate(-10px, 0px);
}
</style>
</head>
<body>
<form>
<tbody>
<table cellspacing="0" border="1">
<tr>
<td rowspan="2">
<ul>
<li>超级信用卡</li>
<li>线上线下课累计彩贝积分</li>
<li><img src="images/1.bmp" /></li>
</ul>
</td>
<td>
<ul>
<li>彩贝抢霸</li>
<li>每天10点更新</li>
<li><img src="images/2.bmp" /></li>
</ul>
</td>
<td>
<ul>
<li>热门优惠劵</li>
<li>全场免费领取</li>
<li><img src="images/3.bmp" /></li>
</ul>
</td>
</tr>
<tr>
<td>
<ul>
<li>促销活动</li>
<li>汇集全网优惠</li>
<li><img src="images/4.bmp" /></li>
</ul>
</td>
<td>
<ul>
<li>精挑细选</li>
<li>给你最好的选择</li>
<li><img src="images/5.bmp" /></li>
</ul>
</td>
</tr>
</table>
</tbody>
</form>
</body>
</html>
十：帧：触发点与转换点不是同一个，不会造成图片更换出错：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>QQ彩贝导航</title>
<style type="text/css">
header {
line-height: 70px;
width: 1200px;
margin: 10px auto;
background-image: linear-gradient(to buttom, #FFFFFF, #EDEDED);
}
#li0 {
margin-left: 20px;
margin-right: 100px;
}
ul li {
list-style: none;
display: inline-block;
line-height: 20px;
text-align: center;
width: 100px;
}
li img {
vertical-align: middle;
}
li a {
text-decoration: none;
font-size: 18px;
color: #000033;
}
.li1 {
border-right: solid 1px #000033;
}
.li2 {
width: 40px;
}
#img1 {
position: relative;
top: -85px;
left: 445px;
}
#img2 {
width: 38px;
height: 23px;
background-image: url("images/header_03.png");
}
#img1:hover #img2 {
animation: spread 1s 0s infinite ease-out;
}
@keyframes spread {
0% {
background-image: url("images/header_05.png");
width: 0px;
}
17% {
background-image: url("images/header_05.png");
width: 11px;
}
34% {
background-image: url("images/header_05.png");
width: 22px;
}
51% {
background-image: url("images/header_05.png");
width: 33px;
}
68% {
background-image: url("images/header_05.png");
width: 44px;
}
85% {
background-image: url("images/header_05.png");
width: 55px;
}
100% {
background-image: url("images/header_05.png");
width: 66px;
}
}
#img3 {
position: relative;
top: -105px;
left: 655px;
}
#img4 {
width: 37px;
height: 23px;
background-image: url("images/header_07.png");
}
#img3:hover #img4 {
animation: spread1 1s 0s infinite ease-in-out;
}
@keyframes spread1 {
0% {
background-image: url("images/header_09.png");
width: 0px;
}
17% {
background-image: url("images/header_09.png");
width: 11px;
}
34% {
background-image: url("images/header_09.png");
width: 22px;
}
51% {
background-image: url("images/header_09.png");
width: 33px;
}
68% {
background-image: url("images/header_09.png");
width: 44px;
}
85% {
background-image: url("images/header_09.png");
width: 55px;
}
100% {
background-image: url("images/header_09.png");
width: 65px;
}
}
</style>
</head>
<body>
<header>
<ul>
<li id="li0"><img src="images/logo_170x46.png" /> </li>
<li class="li1">
<a href="#">返回商城</a>
</li>
<li class="li1">
<a href="#">商旅频道</a>
</li>
<li class="li1">
<a href="#">积分商城</a>
</li>
<li class="li1">
<a href="#">商旅频道</a>
</li>
<li class="li1">
<a href="#">了解彩贝</a>
</li>
<li>
<a href="#">个人中心</a>
</li>
<li class="li2"><img src="images/iconsB_11.gif" /> </li>
<li class="li2"><img src="images/iconsB_12.gif" /> </li>
<li class="li2"><img src="images/iconsB_13.png" /> </li>
</ul>
</header>
<div id="img1">
<div id="img2">
</div>
</div>
<div id="img3">
<div id="img4">
</div>
</div>
</body>
</html>
end》》》
花其实不如花，它是仙人掌在逆境中也能生存。
如花似玉：像花一样坚强，似玉一样脆弱。
988
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
