<html>
<head>
<title>注册界面</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<style>
* {
padding: 0
outline: 0
}
table {
margin: 0 auto
position: relative
border-collapse: collapse
width: 500px
height: 100%
}
caption {
font: bolder 40px 微软雅黑
}
td {
height: 25px
border: 1px solid black
}
textarea {
resize: none
width: 99%
height: 200px
}
</style>
<script src="jquery-1.8.0.min.js"></script>
<script>
jQuery(function($){
$("form").submit(function () {
var me = $(this)
var username = me.find(":text[name='username']")
var pwd = me.find(":password[name='pwd']")
var repwd = me.find(":password[name='repwd']")
var loves = me.find("[name='love']:checked")
var jianjie = me.find("[name='jianjie']")
if(!/^\w{3,15}$/.test(username.val())){
alert("用户名必须是3~15位的字母，数字，下划线!")
username.focus()
username[0].select()
return false
}
else if(!/^.{6,16}$/.test(pwd.val())){
alert("密码必须为6~16位的任意字符！")
pwd.focus()
pwd[0].select()
return false
}
else if(repwd.val() != pwd.val()){
alert("两次输入的密码不一致！")
repwd.focus()
repwd[0].select()
return false
}
else if(loves.length < 2){
alert("兴趣爱好至少勾选2样！")
return false
}
else if(!/^.{1,250}$/.test(jianjie.val())){
alert("个人简介必须0~250字符之间!")
jianjie.focus()
jianjie[0].select()
return false
}
alert("注册成功！")
return true
})
})
</script>
</head>
<body>
<form>
<table>
<caption>注册</caption>
<tr><td>用户名：</td><td><input type="text" name="username" /></td></tr>
<tr><td>密码：</td><td><input type="password" name="pwd" /></td></tr>
<tr><td>密码确认：</td><td><input type="password" name="repwd" /></td></tr>
<tr><td>性别：</td><td><label><input type="radio" name="sex" checked />男</label>
<label><input type="radio" name="sex" />女</label></td></tr>
<tr><td>学历：</td><td><select name="xueli">
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>专科</option>
<option>本科</option>
</select></td></tr>
<tr><td>兴趣爱好：</td>
<td>
<label><input type="checkbox" name="love" />篮球</label>
<label><input type="checkbox" name="love" />武术</label>
<label><input type="checkbox" name="love" />游泳</label>
<label><input type="checkbox" name="love" />看电影</label>
<label><input type="checkbox" name="love" />编程</label>
</td>
</tr>
<tr><td>个人简介：</td>
<td><textarea name="jianjie"></textarea></td>
</tr>
<tr><td style="text-align:center" colspan=2><input type="submit" value="提交" />
<input type="reset" value="重置" />
</td></tr>
</table>
</form>
</body>
</html>
比如做一个导航条首先搭建基本机构：
<div id="menu">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">年表</a></li>
<li><a href="#">作品</a></li>
<li><a href="#">文章</a></li>
<li><a href="#">画廊</a></li>
<li><a href="#">留言</a></li>
<li><a href="#">地图</a></li>
</ul>
</div>
这时候看到的一个纵列文字前带圆点的列表
然后用css进行美化：
#menu {
background-color: #6282ac
height: 35px
width: 570px
position: relative
}
定义菜单的宽，高，颜色及定位方式。
#menu ul {
list-style-type: none
}
去掉文字下划线。
#menu li {
float: left
display: block
width: 60px
height: 31px
margin-top: 2px
margin-right: 6px
margin-bottom: 2px
margin-left: 6px
line-height: 31px
text-align: center
background-repeat: repeat-x
border: 1px solid #FFFFFF
}
定义“float: left”使列表项横向排列，设置高与行高使链接文字垂直居中。
menu a {
font-family: Arial, Helvetica, sans-serif
font-size: 10px
background-image: url(../images/b.gif)
display: block
background-repeat: repeat-x
}
定义链接的字体及背景
#menu a:hover{
background-image: url(../images/a.gif)
display: block
background-repeat: repeat-x
}
定义a的伪类实现鼠标点击时的背景变化
亲，虽然我账号采纳率95%，回答这个问题有可能会拉低我的采纳率，但是我还是想说一句（真心是忍不住说一句）：作为程序猿，个个都是苦逼的代言，你说不要很复杂的，但是我很负责任的告诉你，不管复杂不复杂，功能要实现就要写一个完整的框架。而且你还要原创，不要网上一搜就搜到的，那么请问阁下的诚意呢？悬赏5分，就能让一个程序猿为您苦逼的敲代码吗？难道程序猿地位就这么低？
好吧，虽然我说话有点过分，但是真的是忍不住这么一说。如果你想学，很多人会乐意教，但是拿这5分心安理得的去换一个现成作品，我想，没人乐意！
