博主信息
博文 34
粉丝 0
评论 0
访问量 39343
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html5新增语义化布局标签+后台管理系统实战
Belifforz的博客
原创
992人浏览过

实例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./static/css/style.css">
    <title>首页</title>
</head>
<body>
<!--后台管理页面的DOM结构-->
<!--头部-->
<header role="header">
    <!--加div为了防止内部padding撑开父级容器-->
    <div>
        <h1>教学管理系统</h1>
        <nav>
            <ul>
            <li>欢迎管理员: <strong>admin</strong></li>
            <li><a href="changepass.html" target="main">修改密码</a></li>
            <li><a href="javascript:;" onclick="logout()">退出登录</a></li>
            </ul>
        </nav>
    </div>
</header>

<!--主体用圣杯布局来实现-->
<main role="main">
    <!--主体的内联框架-->
    <article role="content">
    <iframe src="welcome.html" name="main"></iframe>
        <footer role="copyright">
            <p><a href="http://www.beforz.cn">博客</a>©版权所有</p>
        </footer>
    </article>

    <!--左侧导航区-->
    <aside role="menu">
        <nav>
            <ul>
                <li><a href="setting.html" target="main">系统设置</a></li>
                <li><a href="user.html" target="main">教师管理</a></li>
                <li><a href="student.html" target="main">学生管理</a></li>
                <li><a href="class.html" target="main">班级管理</a></li>
                <li><a href="grade.html" target="main">成绩管理</a></li>
            </ul>
        </nav>
    </aside>
</main>
<script>
    function logout(){
        if(window.confirm('确定退出吗?')){
            window.location.href='login.html';
        }
    }
</script>
</body>
</html>

运行实例 »

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


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档管理</title>
</head>
<style>
    body{
        font-weight: 600;
    }
    .main a{
        text-decoration:none;
        color:green;
        /*border: 1px solid green;*/
    }
    table{
        text-align: center;
    }
    .link a{
        text-decoration:none;
        color:green;
        border: 1px solid green;
        width:100px;
        height:10px;
        padding:2px 10px;
    }
    img{
        width:50px;
    }
</style>
<body>
<div>
    <table border="1px" cellspacing="0" cellpadding="15" align="center" width="800" class="main">
        <caption style="font-size:32px">学生管理</caption>
        <tr bgcolor="#87ceeb">
            <th>ID</th>
            <th>姓名</th>
            <th>年级</th>
            <th>学号</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>六年级</td>
            <td>10000061</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>六年级</td>
            <td>10000062</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>六年级</td>
            <td>10000063</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>六年级</td>
            <td>10000064</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
    </table>
    <table border="0" cellspacing="8" cellpadding="8" align="center" width="800" class="link">
        <tr >
            <td colspan="5" border>
                <a href="">首页</a>
                <a href="" style="background:green;color:white;">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="" style="border: none;">...</a>
                <a href="">尾页</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
</head>
<style>
    body{
        font-weight: 600;
    }
    .main a{
        text-decoration:none;
        color:green;
        /*border: 1px solid green;*/
    }
    table{
        text-align: center;
    }
    .link a{
        text-decoration:none;
        color:green;
        border: 1px solid green;
        width:100px;
        height:10px;
        padding:2px 10px;
    }
    img{
        width:50px;
    }
</style>
<body>
<div>
    <table border="1px" cellspacing="0" cellpadding="15" align="center" width="800" class="main">
        <caption style="font-size:32px">产品管理</caption>
        <tr bgcolor="#87ceeb">
            <th>ID</th>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
            <th>英语</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>78</td>
            <td>85</td>
            <td>89</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>84</td>
            <td>90</td>
            <td>80</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>王五</td>
            <td>91</td>
            <td>75</td>
            <td>84</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>赵六</td>
            <td>85</td>
            <td>80</td>
            <td>89</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
    </table>
    <table border="0" cellspacing="8" cellpadding="8" align="center" width="800" class="link">
        <tr >
            <td colspan="5" border>
                <a href="">首页</a>
                <a href="" style="background:green;color:white;">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="" style="border: none;">...</a>
                <a href="">尾页</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
</head>
<style>
    body{
        font-weight: 600;
    }
    .main a{
        text-decoration:none;
        color:green;
        /*border: 1px solid green;*/
    }
    table{
        text-align: center;
    }
    .link a{
        text-decoration:none;
        color:green;
        border: 1px solid green;
        width:100px;
        height:10px;
        padding:2px 10px;
    }
</style>
<body>
<div>
    <table border="1px" cellspacing="0" cellpadding="15" align="center" width="800" class="main">
        <caption style="font-size:32px">班级管理</caption>
        <tr bgcolor="#87ceeb">
            <th>年级</th>
            <th>男</th>
            <th>女</th>
            <th>总人数</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>三年级</td>
            <td>21</td>
            <td>26</td>
            <td>47</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>四年级</td>
            <td>32</td>
            <td>20</td>
            <td>52</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>五年级</td>
            <td>19</td>
            <td>32</td>
            <td>51</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
        <tr>
            <td>六年级</td>
            <td>20</td>
            <td>28</td>
            <td>48</td>
            <td><a href="">编辑</a> | <a href="">操作</a></td>
        </tr>
    </table>
    <table border="0" cellspacing="8" cellpadding="8" align="center" width="800" class="link">
        <tr >
            <td colspan="5" border>
                <a href="">首页</a>
                <a href="" style="background:green;color:white;">1</a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="" style="border: none;">...</a>
                <a href="">尾页</a>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

运行实例 »

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

效果图:

QQ截图20180822104709.png

QQ截图20180822104630.png

批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学