Community Learn Tools Library Leisure
search
English
Home > List of blog posts > html/css基础知识第七课--实战项目《网站后台管理系统》--0820
Blogger Information
Blog 16
fans 0
comment 1
visits 19051
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
html/css基础知识第七课--实战项目《网站后台管理系统》--0820
学先森的博客
Original
994 people have browsed it

代码

  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;
}

    运行实例 »

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

Correction status：qualified

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