登录  /  注册
首页 > 博客列表 > html/css基础知识第七课--实战项目《网站后台管理系统》--0820
博主信息
博文 16
粉丝 0
评论 1
访问量 18605
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
html/css基础知识第七课--实战项目《网站后台管理系统》--0820
学先森的博客
原创
966人浏览过

代码

  1. <!DOCTYPE html>
<!--file: admin/index.html 起始页-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style.css">
    <title>网站后台管理系统</title>
</head>
<body>
<!--header[role="header"]+main[role="main"]>article[role="content"]+aside-->
<!--header[role="header"]+main[role="main"]>article[role="content"]+aside^footer[role="copyright"]-->
<header role="header">
    <div>
        <h1>后台管理系统</h1>
        <nav role="user1">
            <ul>
                <li>欢迎：<strong>admin</strong></li>
                <li><a href="modify_pwd.html" target="ad">修改密码</a></li>
                <li><a href="">退出</a></li>
            </ul>
        </nav>
    </div>
</header>
<!--圣杯两列布局-->
<main role="main">
    <article role="content">
        <iframe src="welcome.html" name="ad"></iframe>
        <footer role="copyright">
            <p><a href="http://www.php.cn">php.cn</a>©版权所有</p>
        </footer>
    </article>
    <aside>
        <nav role="option">
            <ul>
                <li><a href="setting.html" target="ad">系统设置</a></li>
                <li><a href="user.html" target="ad">用户管理</a></li>
                <li><a href="article.html" target="ad">文档管理</a></li>
                <li><a href="category.html" target="ad">分类管理</a></li>
                <li><a href="product.html" target="ad">产品管理</a></li>
            </ul>
        </nav>
    </aside>
</main>



</body>
</html>

    运行实例 »

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

  2. 实例

    <!DOCTYPE html>
<!--file:admin/setting.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系统设置</title>
    <link rel="stylesheet" href="static/css/style.css">
    <style type="text/css">
        h1 {
            font-weight: lighter;
            text-indent: 4rem;
            background-color: lightgray;
            height:3rem;
            line-height: 3rem;
        }

        table {
            margin: auto;
            font-size: 14px;
        }

        table td {
            padding-top: 20px;
        }

        table td:first-child {
            padding-right: 20px;
            text-align: right;
        }

        input[type="text"] {
            width: 420px;
            height: 32px;
            border: 1px solid #666;
            border-radius: 2px;
            padding-left: 15px;
        }

        textarea {
            width: 420px;
            height: 180px;
            border: 1px solid #666;
            border-radius: 2px;
            padding-left: 15px;
            resize: none;
        }

        input[type="submit"] {
            width: 100px;
            height: 38px;
            font-size: 18px;
            background-color: white;
            color: black;
            border: 1px solid black;
            border-radius: 3px;
            margin-right: 60px;
        }

        input[type="submit"]:hover {
            color: white;
            background-color: black;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>系统设置</h1>
<form action="" method="post">
    <table>
        <tr>
            <td><label for="siteTitle">站点名称:</label></td>
            <td><input type="text" id="siteTitle" placeholder="建议不超过40个中文"></td>
        </tr>
        <tr>
            <td><label for="keywords">关键字:</label></td>
            <td><input type="text" id="keywords" placeholder="多个关键字之间用逗号隔开"></td>
        </tr>
        <tr>
            <td><label for="desc">站点描述:</label></td>
            <td><textarea name="desc" id="desc" rows="10" cols="30" placeholder="不超过120中文"></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" name="submit" value="提交" onclick="alert('提交成功！')"></td>
        </tr>
    </table>
</form>
</body>
</html>

    运行实例 »

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

  3. 实例

    <!DOCTYPE html>
<!--file:admin/user.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="static/css/style.css">
    <style type="text/css">
        h1 {
            font-weight: lighter;
            text-indent: 4rem;
            background-color: lightgray;
            height:3rem;
            line-height: 3rem;
        }
        /*表格样式*/
        table,th,td{
            border:1px solid #666;
        }
        table{
            width:650px;
            margin:20px auto 0;
            border-collapse:collapse;
            text-align:center;
        }
        table tr:first-child{
            background-color: lightskyblue;
            font-size:16px;
        }
        td{
            font-size:14px;
            padding:10px;
        }
        section,nav{
            /*width:800px;*/
        }
        /*分页样式*/
        nav{
            height:60px;
            width:800px;
            display: table-cell;
            vertical-align: bottom;
            text-align: center;

        }
        nav ul li{
            display:inline;
            margin-left:3px;
            text-align:center;
        }
        nav li a{
            display: inline-block;
            border:1px solid #666;
            border-radius:2px;
            width:20px;
            height:26px;
            text-align: center;
            padding:0 3px;
            line-height: 26px;

        }
        nav .active{
            background-color:lightgreen;
        }
        nav li:first-child a,nav li:last-child a{
            width:56px;
        }
        nav li:nth-last-child(2) a{
            border:none;
        }
    </style>
</head>
<body>
<h1>用户管理</h1>
<section>
    <table>
        <tr>
            <th>ID</th>
            <th>用户名</th>
            <th>邮箱</th>
            <th>角色</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>admin</td>
            <td>a@anmuo.com</td>
            <td>超级管理员</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>peter</td>
            <td>peter@anmuo.com</td>
            <td>讲师</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>zhu</td>
            <td>zhu@anmuo.com</td>
            <td>管理员</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>猪哥</td>
            <td>zhuge@anmuo.com</td>
            <td>版主</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
    </table>
</section>
<nav>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="" class="active">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="" class="more">...</a></li>
        <li><a href="">尾页</a></li>
    </ul>
</nav>
</body>
</html>

    运行实例 »

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

  4. 实例

    <!DOCTYPE html>
<!--file:admin article.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档管理</title>
    <link rel="stylesheet" href="static/css/style.css">
    <style type="text/css">
        /*标题样式*/
        h1{
            font-weight:lighter;
            text-indent:4rem;
            background-color:lightgray;
            height:3rem;
            line-height: 3rem;
        }
        /*表格样式*/
        table,th,td{
            border:1px solid #666;
            font-size:14px;
            padding:6px;
        }
        table{
            border-collapse:collapse;
            text-align:center;
            margin:20px auto 0;
        }
        table tr:first-child{
            background-color:lightskyblue;
        }
        /*分页样式*/
        nav{
            width:800px;
            height:60px;
            display:table-cell;
            vertical-align:bottom;
            text-align: center;
        }
        nav ul li{
            display:inline;
            margin-left:3px;
            text-align:center;
        }
        nav li a{
            display:inline-block;
            width:26px;
            height:26px;
            border:1px solid #666;
            border-radius:3px;
            text-align: center;
            line-height: 26px;

        }
        nav li:first-child a,nav li:last-child a{
            width:56px;
        }
        nav li .active{
            background-color:lightgreen;
        }
        nav li .more{
            border:none;
        }
    </style>
</head>
<body>
<h1>文档管理</h1>
<!--section(>table>(tr>th*5)+tr*4>td*5)+nav>ul>li*7>a-->
<section>
    <table>
        <tr>
            <th>ID</th>
            <th>标题图片</th>
            <th>文档标题</th>
            <th>所属分类</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="./static/images/1.jpg" width="40px" title="iPhone X 系列"></td>
            <td><a href="">Apple公司最新旗舰产品: iPhone X 系列手机隆重上市</a></td>
            <td>手机</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="./static/images/2.jpg" width="40px"  title="华为P20"></td>
            <td><a href="">华为P20手机将全面采用自主研发的麒麟系统xin片</a></td>
            <td>手机</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td><img src="./static/images/3.jpg" width="40px"  title="小米9手机"></td>
            <td><a href="">小米9手机预计在明年8月正式上市</a></td>
            <td>手机</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td><img src="./static/images/4.jpg" width="40px"  title="OPPO手机"></td>
            <td><a href="">OPPO手机勇夺印度市销售冠军</a></td>
            <td>手机</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
    </table>
</section>
<nav>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="" class="active">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="" class="more">...</a></li>
        <li><a href="">尾页</a></li>
    </ul>
</nav>
</body>
</html>

    运行实例 »

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

  5. 实例

    <!DOCTYPE html>
<!--file: admin/category.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <link href="./static/css/style.css" rel="stylesheet">
    <style type="text/css">
        /*标题样式*/
        h1{
            font-weight:lighter;
            text-indent:4rem;
            background-color:lightgray;
            height:3rem;
            line-height: 3rem;
        }
        /*表格样式*/
        table,th,td{
            border:1px solid #666;
            font-size:14px;
            padding:6px 26px;
        }
        table{
            border-collapse:collapse;
            text-align:center;
            margin:20px auto 0;
        }
        table tr:first-child{
            background-color:lightskyblue;
        }
        /*分页样式*/
        nav{
            width:800px;
            height:60px;
            display:table-cell;
            vertical-align:bottom;
            text-align: center;
        }
        nav ul li{
            display:inline;
            margin-left:3px;
            text-align:center;
        }
        nav li a{
            display:inline-block;
            width:26px;
            height:26px;
            border:1px solid #666;
            border-radius:3px;
            text-align: center;
            line-height: 26px;

        }
        nav li:first-child a,nav li:last-child a{
            width:56px;
        }
        nav li .active{
            background-color:lightgreen;
        }
        nav li .more{
            border:none;
        }
        section .disable{
            color:red;
        }
    </style>
</head>
<body>
<h1>分类管理</h1>
<section>
    <table>
        <tr>
            <th>ID</th>
            <th>分类名称</th>
            <th>层级</th>
            <th>是否启用</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>手机</td>
            <td>顶级</td>
            <td>启用</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>笔记本电脑</td>
            <td>顶级</td>
            <td class="disable">禁用</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>打印机</td>
            <td>顶级</td>
            <td>启用</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>显示器</td>
            <td>顶级</td>
            <td>启用</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
    </table>
</section>
<nav>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="" class="active">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="" class="more">...</a></li>
        <li><a href="">尾页</a></li>
    </ul>
</nav>
</body>
</html>

    运行实例 »

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

  6. 实例

    <!DOCTYPE html>
<!--file:admin/product.html-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
    <link rel="stylesheet" href="static/css/style.css">
    <style type="text/css">
        /*标题样式*/
        h1{
            font-weight:lighter;
            text-indent:4rem;
            background-color:lightgray;
            height:3rem;
            line-height: 3rem;
        }
        /*表格样式*/
        table,th,td{
            border:1px solid #666;
            font-size:14px;
            padding:6px 30px;
        }
        table{
            border-collapse:collapse;
            text-align:center;
            margin:20px auto 0;
        }
        table tr:first-child{
            background-color:lightskyblue;
        }
        /*分页样式*/
        nav{
            width:800px;
            height:60px;
            display:table-cell;
            vertical-align:bottom;
            text-align: center;
        }
        nav ul li{
            display:inline;
            margin-left:3px;
            text-align:center;
        }
        nav li a{
            display:inline-block;
            width:26px;
            height:26px;
            border:1px solid #666;
            border-radius:3px;
            text-align: center;
            line-height: 26px;

        }
        nav li:first-child a,nav li:last-child a{
            width:56px;
        }
        nav li .active{
            background-color:lightgreen;
        }
        nav li .more{
            border:none;
        }
    </style>
</head>
<body>
<h1>产品管理</h1>
<section>
    <table>
        <tr>
            <th>ID</th>
            <th>图片</th>
            <th>型号</th>
            <th>价格</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td><img src="./static/images/1.jpg" width="40px" title="iPhone X 系列"></td>
            <td>iPhone X</td>
            <td>5888</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td><img src="./static/images/2.jpg" width="40px"  title="华为P20"></td>
            <td>华为P20</td>
            <td>6988</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td><img src="./static/images/3.jpg" width="40px"  title="小米9手机"></td>
            <td>小米9</td>
            <td>5899</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td><img src="./static/images/4.jpg" width="40px"  title="OPPO手机"></td>
            <td>OPPO x20</td>
            <td>6799</td>
            <td><a href="">编辑</a>  |  <a href="">删除</a></td>
        </tr>
    </table>
</section>
<nav>
    <ul>
        <li><a href="">首页</a></li>
        <li><a href="" class="active">1</a></li>
        <li><a href="">2</a></li>
        <li><a href="">3</a></li>
        <li><a href="">4</a></li>
        <li><a href="" class="more">...</a></li>
        <li><a href="">尾页</a></li>
    </ul>
</nav>
</body>
</html>

    运行实例 »

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

  7. 实例

    /*通用样式
*file:admin/static/css/style.css
*/
body,h1,h2,h3,h4,h5,h6,ul,li,a,iframe{
    margin:0;
    padding:0;
    border:0;
}
body{
    background-color:#efefef;
}
li{
    list-style-type:none;
}
a,a:link,a:visited{
    color:green;
    text-decoration-line:none;
}
a:hover{
    text-decoration-line:underline;
}
/*头部样式*/
header{
    background:linear-gradient(to top,lightgrey,#efefef);
    width:100%;
    height:60px;
    overflow: hidden;
    border-bottom:1px solid gray;
}
header div{
    width:1000px;
    margin:auto;
}
header h1{
    float:left;
    margin-left:20px;
    font-weight:lighter;
    line-height:60px;
}
header nav{
    float:right;
    margin-right:20px;
}
header nav ul li{
    float:left;
    line-height: 85px;
    padding-left:30px;
}
/*圣杯两列布局*/
main{
    width:800px;
    height:800px;
    margin:0 auto;
    padding-left:200px;
    overflow:hidden;
}
main article{
    float:left;
    width:100%;
    min-height:100%;
}
main aside{
    float:left;
    width:200px;
    min-height: 100%;
    margin-left:-100%;
    position:relative;
    left:-200px;
    background:linear-gradient(to left,lightgrey,#efefef);
    border-right:1px dashed gray;
}
main aside nav{
    padding: 20px 30px;
}
main aside nav ul li{
    line-height:2rem;
}
main article iframe{
    min-width:100%;
    min-height:650px;
    margin:auto;
    border:none;
}
footer p{
    text-align: center;
}

    运行实例 »

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

批改状态：合格

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

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

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录