Blogger Information
Blog 5
fans 0
comment 0
visits 3395
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
2019年4月23日综合作业
猴子哥哥专属博客
Original
654 people have browsed it

表格的跨行合并实例

<!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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

 

Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post