亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

搜索
博主信息
博文 35
粉絲 0
評(píng)論 0
訪(fǎng)問(wèn)量 44259
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
一個(gè)簡(jiǎn)單的網(wǎng)站后臺(tái)界面，實(shí)現(xiàn)不少于三個(gè)頁(yè)面的展示(0928)
Ray的博客
原創(chuàng)
9627人瀏覽過(guò)

1) 編程：一個(gè)簡(jiǎn)單的網(wǎng)站后臺(tái)界面，實(shí)現(xiàn)不少于三個(gè)頁(yè)面的展示。

實(shí)例 index.html 后臺(tái)入口程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/style.css">
    <title>網(wǎng)站后臺(tái)模板</title>
</head>
<body>
<!--頂部信息區(qū)-->
<header role="header">
    <div>
        <h1>后臺(tái)管理系統(tǒng)</h1>
        <nav role="user">
            <ul>
                <li>歡迎管理員:<strong>admin</strong></li>
                <li><a href="modify_pass.html" target="main">修改密碼</a></li>
                <li><a href="javascript:void(0);" onclick="logout()">退出登錄</a></li>
            </ul>

        </nav>
    </div>

</header>

<!--圣杯二列布局-->
<main role="main">
    <!--主體內(nèi)聯(lián)框架區(qū)-->
    <article role="content">
        <iframe src="welcome.html"  name="main"></iframe>
        <footer role="copyright">
            <p><a href="#">php.cn</a> ?版權(quán)所有</p>
        </footer>
    </article>

    <!--左側(cè)導(dǎo)航區(qū)-->
    <aside>
        <nav role="option">
            <ul>
                <li><a href="setting.html" target="main">系統(tǒng)設(shè)置</a></li>
                <li><a href="user1.html" target="main">用戶(hù)管理</a></li>
                <li><a href="article1.html" target="main">文檔管理</a></li>
            </ul>
        </nav>
    </aside>
</main>
</body>
</html>

<script>
    function logout() {
        if (window.confirm('是否退出?')) {
            window.location.href = 'login.html';
        } else {
            return false;
        }
    }
</script>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

hm01.png

實(shí)例 （系統(tǒng)設(shè)置頁(yè)面）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>系統(tǒng)設(shè)置</title>
</head>
<body>
<h2>系統(tǒng)設(shè)置</h2>
<form action="" method="post">
    <table>
        <tr>
            <td><label for="title">站點(diǎn)名稱(chēng):</label></td>
            <td><input type="text" id="title" placeholder="建議不超過(guò)40個(gè)中文" required></td>
        </tr>
        <tr>
            <td><label for="keywords">關(guān)鍵字:</label></td>
            <td><input type="text" id="keywords" placeholder="多個(gè)關(guān)鍵字之間用英文逗號(hào)分隔" required></td>
        </tr>
        <tr>
            <td><label for="desc">站點(diǎn)描述:</label></td>
            <td><textarea name="desc" id="desc" cols="30" rows="10" placeholder="不超過(guò)120個(gè)中文" required></textarea></td>
        </tr>
        <tr>
            <td colspan="2"><input type="submit" name="submit" value="提交" onclick="alert('提交成功')"></td>
        </tr>
    </table>
</form>
</body>
</html>

<style>
    h2 {
        text-align: center;
    }

    table,td {
        border: none;
        padding: 15px;
    }

    table {
        width: 600px;
        margin: auto;

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

    input[type="text"] {
        width: 400px;
        height: 30px;
        border: 1px solid black;
        border-radius: 5px;
        padding-left: 15px;
    }

    table td textarea {
        width: 400px;
        height: 100px;
        border: 1px solid black;
        border-radius: 5px;
        padding-left: 15px;
        resize: none;
    }

    /*選擇最后一行中的最后一個(gè)單元格*/
    table tr:last-child td:last-child {
        text-align: center;
    }
    input[type="submit"] {
        width: 100px;
        height: 36px;
        background-color: #fff;
        border:2px solid #000;
        border-radius: 8px;
    }

    input[type="submit"]:hover {
        background-color: black;
        color: white;
        cursor: pointer;
    }
</style>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

hm02.png

實(shí)例（用戶(hù)管理頁(yè)面）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <title>用戶(hù)管理</title>
</head>
<body>
<div class="container">
            <!--面板的情景樣式-->
            <!--<div class="panel panel-primary">-->
            <div class="panel panel-default" style="margin: 20px">
                <div class="panel-heading">
                    <!--面板的標(biāo)題-->
                    <h3 class="panel-title text-center">用戶(hù)管理</h3>
                </div>
                <!--面板的主體-->
                <!--<div class="panel-body">-->
                    <!--在面板中嵌入一個(gè)表格-->
                    <table class="table table-bordered table-hover text-center">
                        <thead>
                        <tr class="bg-success" >
                            <td>ID</td>
                            <td>用戶(hù)名</td>
                            <td>郵箱</td>
                            <td>角色</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>admin</td>
                            <td>admin@php.cn</td>
                            <td>超級(jí)管理員</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>peter</td>
                            <td>peter@php.cn</td>
                            <td>講師</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>        
                            <td>3</td>
                            <td>zhu</td>
                            <td>zhu@php.cn</td>
                            <td>會(huì)員</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>豬哥</td>
                            <td>zhuge@php.cn</td>
                            <td>版主</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                       </tbody>
                    </table>

            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            
            <!--分頁(yè)通常寫(xiě)到一對(duì)nav標(biāo)簽中,居中顯示-->
            <nav class="text-center">
                <!--分頁(yè)基類(lèi)容器: .pagination-->
                <ul class="pagination pagination-md">
                    <li class="disabled"><a href="">?上一頁(yè)</a></li>
                    <li class="active"><a href="">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                    <li><a href="">下一頁(yè)?</a></li>
                </ul>
                
            </nav>
            
        </div>
    </div>

</div>

<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

hm03.png

實(shí)例（文檔管理頁(yè)面）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../lib/dist/css/bootstrap.css">
    <title>文檔管理</title>
</head>
<body>
<div class="container">
            <!--面板的情景樣式-->
            <!--<div class="panel panel-primary">-->
            <div class="panel panel-default" style="margin: 10px">
                <div class="panel-heading">
                    <!--面板的標(biāo)題-->
                    <h3 class="panel-title text-center">文 檔 管 理</h3>
                </div>
                <!--面板的主體-->
                <!--<div class="panel-body">-->
                    <!--在面板中嵌入一個(gè)表格-->
                    <table class="table table-bordered table-hover text-center" style="padding: 10px">
                        <thead>
                        <tr class="bg-success" >
                            <td>ID</td>
                            <td>標(biāo)題圖片</td>
                            <td>文檔標(biāo)題</td>
                            <td>所屬分類(lèi)</td>
                            <td>操作</td>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td><img src="./static/images/未來(lái)地圖.png" alt="" width="50"></td>
                            <td><a href="">李開(kāi)復(fù)推薦《未來(lái)地圖》</a></td>
                            <td>大咖書(shū)單</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td><img src="./static/images/權(quán)力之路.png" alt="" width="50"></td>
                            <td><a href="">許知遠(yuǎn)推薦《權(quán)力之路》</a></td>
                            <td>大咖書(shū)單</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>        
                            <td>3</td>
                            <td><img src="./static/images/校園秘史.png" alt="" width="50"></td>
                            <td><a href="">張悅?cè)煌扑]《校園秘史》</a></td>
                            <td>大咖書(shū)單</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td><img src="./static/images/思想史.png" alt="" width="50"></td>
                            <td><a href="">吳曉波推薦《思想史》</a></td>
                            <td>大咖書(shū)單</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>
                        <tr>
                            <td>5</td>
                            <td><img src="./static/images/潦草.png" alt="" width="50"></td>
                            <td><a href="">史航推薦《潦草》</a></td>
                            <td>大咖書(shū)單</td>
                            <td><a href="">編輯</a> | <a href="">刪除</a></td>
                        </tr>                        
                       </tbody>
                    </table>

            </div>

        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            
            <!--分頁(yè)通常寫(xiě)到一對(duì)nav標(biāo)簽中,居中顯示-->
            <nav class="text-center">
                <!--分頁(yè)基類(lèi)容器: .pagination-->
                <ul class="pagination pagination-md">
                    <li class="disabled"><a href="">?上一頁(yè)</a></li>
                    <li class="active"><a href="">1</a></li>
                    <li><a href="">2</a></li>
                    <li><a href="">3</a></li>
                    <li><a href="">4</a></li>
                    <li><a href="">5</a></li>
                    <li><a href="">下一頁(yè)?</a></li>
                </ul>
                
            </nav>
            
        </div>
    </div>

</div>

<script src="../lib/jquery.js"></script>
<script src="../lib/dist/js/bootstrap.js"></script>
</body>
</html>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線(xiàn)實(shí)例

hm04.png

總結(jié)：把之前的作業(yè)的后臺(tái)程序用bootstrap改寫(xiě)了一下，比較一下效果，bootstrap還是快捷方便的。

批改狀態(tài)：未批改

老師批語(yǔ)：
本博文版權(quán)歸博主所有，轉(zhuǎn)載請(qǐng)注明地址！如有侵權(quán)、違法，請(qǐng)聯(lián)系admin@php.cn舉報(bào)處理！
全部評(píng)論 文明上網(wǎng)理性發(fā)言，請(qǐng)遵守新聞評(píng)論服務(wù)協(xié)議
1條評(píng)論
十二 2021-04-12 11:44:16
你好博主，可以給一個(gè)index的css嘛，麻煩了 ，可以加qq 1132418341
1樓
作者最新博文
關(guān)于我們 免責(zé)申明 意見(jiàn)反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線(xiàn)php培訓(xùn)，幫助PHP學(xué)習(xí)者快速成長(zhǎng)！
關(guān)注服務(wù)號(hào) 技術(shù)交流群
PHP中文網(wǎng)訂閱號(hào)
每天精選資源文章推送
PHP中文網(wǎng)APP
隨時(shí)隨地碎片化學(xué)習(xí)
PHP中文網(wǎng)抖音號(hào)
發(fā)現(xiàn)有趣的

Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)

    • 登錄PHP中文網(wǎng)，和優(yōu)秀的人一起學(xué)習(xí)！
    全站2000+教程免費(fèi)學(xué)