一: 表格跨行的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>表单</title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption style="font-size:18px;">学员信息表</caption> <thead> <tr bgcolor="aqua"> <th>编号</th> <th width="70">姓名</th> <th>性别</th> <th>年龄</th> <th width="120">籍贯</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>老王</td> <td rowspan="2" align="center">男</td> <td>29</td> <td>广东</td> </tr> <tr> <td>2</td> <td>老李</td> <td>28</td> <td>山西</td> </tr> <tr> <td>3</td> <td>李婷</td> <td>女</td> <td>23</td> <td>江苏</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">合计</td> <td>3</td> <td>3</td> </tr> </tfoot> </table> </body> </html>
用户注册
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用户注册登录</title> </head> <body> <form action="" method="get"> <p> <label for="username">用户名:</label> <input type="text" name="username" id="username" placeholder="4到6个字母数字的组合"autofocus> <br> <label for="password">密 码:</label> <input type="password" name="password" id="password" minlength="3" maxlength="12" placeholder="3到12个字符"> <br> <label for="email">邮 箱:</label> <input type="email" name="email" id="email"> <br> <label for="age">年 龄：</label> <input type="number" name="age" id="age" min="18" max="100"> <br> <label for="birthday">生日:</label> <input type="date" name="birthday" id="birthday"> <br> <label for="course">课程:</label> <select name="course" id="course"> <option value="0">html</option> <option value="1">css</option> <option value="2" selected>javascript</option> <option value="3">php</option> </select> <br> <label for="program">爱好:</label> <input type="checkbox" name="hobby[]" id="game" value="ganme"><label for="game">游戏</label> <input type="checkbox" name="hobby[]" id="program" value="program"><label for="program">编程</label> <input type="checkbox" name="hobby[]" id="moive" value="moive"><label for="moive">电影</label> <br> <label for="female">性别:</label> <input type="radio" name="gender" id="male" value="male"><label for="male">男</label> <input type="radio" name="gender" id="female" value="female"><label for="female">女</label> <input type="radio" name="gender" id="secrecy" value="secrecy"><label for="secrecy">保密</label> <br> <label for="comment">个人简介</label> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="60" placeholder="个人简介不能超过60个字"></textarea> </p> <p> <button type="submit" name="login">登录</button> <button type="submit" name="register">注册</button> </p> </form> </body> </html>
网站后台管理
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>后台管理</title> </head> <body> <ul style="float:left;"> <li><a href="http://www.baidu.com" target="search">用户管理</a></li> <li><a href="http://www.so.com" target="search">分类管理</a></li> <li><a href="http://www.sogou.com" target="search">商品管理</a></li> <li><a href="http://www.biying.com" target="search">系统设置</a></li> </ul> <iframe src="http://www.sohu.com" name="search" width="700px" height="300px" style="float:left;"></iframe> </form> </body> </html>