表格的跨行合并实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格的跨行合并</title> </head> <body> <table border="1" cellpadding="5" cellspacing="0" width="580"> <caption>XX学校三年级学生信息统计表</caption> <thead bgcolor="greeon"> <th>班级</th> <th>姓名</th> <th>性别</th> <th>电话号码</th> <th>家庭住址</th> </thead> <tbody align="center"> <tr> <td rowspan="3" width="50">一班</td> <td width="80">张三</td> <td width="40">男</td> <td width="150">13912345678</td> <td width="250">北京市</td> </tr> <tr> <td>李四</td> <td>男</td> <td>13912345678</td> <td>北京市</td> </tr> <tr> <td>王麻子</td> <td>男</td> <td>13912345678</td> <td>北京市</td> </tr> <tr> <td rowspan="3">二班</td> <td>张娟</td> <td>女</td> <td>13912345678</td> <td>北京市</td> </tr> <tr> <td>李婷</td> <td>女</td> <td>13912345678</td> <td>北京市</td> </tr> <tr> <td>王丽</td> <td>女</td> <td>13912345678</td> <td>北京市</td> </tr> </tbody> <tfoot> <tr align="center"> <td>备注</td> <td colspan="4"></td> </tr> </tfoot> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
简单用户登录表单界面实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单用户注册表单</title> </head> <body> <div style="font-size: 18px;color: #1DC116;font-weight: bold; width: 400px;text-align: center; margin:0 auto;">简单用户注册登录界面</div> <div style="width: 400px; margin: 0 auto;"> <form action="" method="post"> <p> <label for="useradmin">账号：</label> <input type="text" name="username" id="useradmin" placeholder="请输入账号名称" required autofocus> </p> <p> <label for="password">密码：</label> <input type="password" name="password" id="password" placeholder="请输入密码"> </p> <p> <label for="age">年龄：</label> <input type="number" name="age" id="age" min="18" max="70" value="18"> </p> <p> <label for="birthday">生日：</label> <input type="date" name="birthday" id="birthday"> </p> <p> <label for="male">性别：</label> <input type="radio" name="gender" id="male" checked><label for="male">男</label> <input type="radio" name="gender" id="female"><label for="female">女</label> <input type="radio" name="gender" id="secrecy"><label for="secrecy">保密</label> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" id="email" placeholder="email@email.com" required> </p> <p> <label for="reading">兴趣：</label> <input type="checkbox" name="hobby[]" id="reading" checked><label for="reading">读书</label> <input type="checkbox" name="hobby[]" id="music"><label for="music">听歌</label> <input type="checkbox" name="hobby[]" id="run"><label for="run">跑步</label> <input type="checkbox" name="hobby[]" id="swim"><label for="swim">游泳</label> </p> <p> <label for="member">会员组：</label> <select name="member" id="member" size="1"> <optgroup label="企业"> <option value="0">请选择</option> <option value="1" selected>黄金会员</option> <option value="2">铂金会员</option> <option value="3">钻石会员</option> </optgroup> <optgroup label="个人"> <option value="4">黄金会员</option> <option value="5">铂金会员</option> <option value="6">钻石会员</option> </optgroup> </select> </p> <p> <label for="introduction">简介：</label> <textarea name="introduction" id="introduction" cols="40" rows="10" maxlength="60" placeholder="最多输入60个字符"></textarea> </p> <p align="center"> <button type="submit">提交</button> <button type="reset">重置</button> </p> </form> </div> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
简易后台首页实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易后台首页</title>
</head>
<style type="text/css">
a {
text-decoration: none;
color: #000;
}
ul,li {
list-style: none;
}
.backstage {
margin: 0 auto;
width: 1000px;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clear {
clear: both;
}
.main {
width: 120px;
}
.main a {
display: inline-block;
height: 40px;
width: 120px;
line-height: 40px;
}
</style>
<body>
<div class="backstage">
<div class="title">
<h2 align="center">简单后台操作界面</h2>
</div>
<div class="fl main">
<ul>
<li><a href="http://www.baidu.com/" target="management">用户管理</a></li>
<li><a href="http://www.sogou.com" target="management">生成首页</a></li>
<li><a href="http://www.so.com" target="management">添加文章</a></li>
<li><a href="https://cn.bing.com/" target="management">文章管理</a></li>
</ul>
</div>
<div class="fr">
<iframe srcdoc="<h2>后台管理操作</h2>" frameborder="1" width="800" height="500" name="management"></iframe>
</div>
<div class="clear"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
