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

搜索
博主信息
博文 35
粉絲 0
評(píng)論 0
訪問(wèn)量 44200
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板
html5新增語(yǔ)義化標(biāo)簽及布局實(shí)戰(zhàn)：后臺(tái)管理系統(tǒng)（0820）
Ray的博客
原創(chuàng)
1662人瀏覽過(guò)

  1. 手寫: html5新增語(yǔ)義化布局標(biāo)簽的名稱與功能：

hm01.png

2. 完成后臺(tái)管理頁(yè)面的其它幾個(gè)頁(yè)面: （1）文檔管理

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文檔管理</title>
</head>
<body>
<table>
    <caption>文 檔 管 理</caption>
    <tr>
        <td>ID</td>
        <td>標(biāo)題圖片</td>
        <td>文檔標(biāo)題</td>
        <td>所屬分類</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td><img src="./static/images/未來(lái)地圖.png" alt="" width="50"></td>
        <td><a href="">李開復(fù)推薦《未來(lái)地圖》</a></td>
        <td>大咖書單</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>大咖書單</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>大咖書單</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>大咖書單</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>大咖書單</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
</table>

<!--分頁(yè)-->
<p>
    <a href="">首頁(yè)</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="" class="more">...</a>
    <a href="">尾頁(yè)</a>
</p>
</body>
</html>

<style>
    table, th, td {
        border: 1px solid black;
    }
    table {
        width: 780px;
        margin: auto;
        border-collapse: collapse;
        text-align: center;
    }
    td {
        padding: 10px;
    }
    a {
        text-decoration-line: none;
        color: blue;
    }

    a:hover {
        color: brown;
        text-decoration-line: underline;
    }

    tr:first-child {
        margin-top: 20px;
        background-color: lightgreen;
    }

    table caption {
        font-size: 1.5rem;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    p {
        text-align: center;
    }
    /*首頁(yè)樣式*/
    p a:first-child {
        width: 56px;
    }

    p a:last-child {
        width: 56px;
    }
    p a {
        display: inline-block;
        width: 28px;
        height: 24px;
        border: 1px solid grey;
        margin-left:2px;
        line-height: 24px;
        border-radius: 5px;

    }

    /*當(dāng)前頁(yè)樣式*/
    .active {
        background-color: grey;
        color: white;
    }

    .more {
        border: none;
    }

</style>

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

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

運(yùn)行效果圖：

文檔管理.png

（2）分類管理：

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分類管理</title>
</head>
<body>
<table>
    <caption>分 類 管 理</caption>
    <tr>
        <td>ID</td>
        <td>分類名稱</td>
        <td>層級(jí)</td>
        <td>是否啟用</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>藝術(shù)</td>
        <td>頂級(jí)</td>
        <td>啟用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>文學(xué)</td>
        <td>頂級(jí)</td>
        <td>啟用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>教育</td>
        <td>頂級(jí)</td>
        <td>啟用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>人文</td>
        <td>頂級(jí)</td>
        <td>禁用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>5</td>
        <td>經(jīng)管</td>
        <td>頂級(jí)</td>
        <td class="disable">禁用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
</table>

<!--分頁(yè)-->
<p>
    <a href="">首頁(yè)</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="" class="more">...</a>
    <a href="">尾頁(yè)</a>
</p>
</body>
</html>

<style>
    table, th, td {
        border: 1px solid black;
    }
    table {
        width: 650px;
        margin: auto;
        border-collapse: collapse;
        text-align: center;
    }

    td {
        padding: 10px;
    }
    a {
        text-decoration-line: none;
        color: blue;
    }

    a:hover {
        color: brown;
        text-decoration-line: underline;
    }

    tr:first-child {
        margin-top: 20px;
        background-color: lightgreen;
    }

    table caption {
        font-size: 1.5rem;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    p {
        text-align: center;
    }
    /*首頁(yè)樣式*/
    p a:first-child {
        width: 56px;
    }

    p a:last-child {
        width: 56px;
    }
    p a {
        display: inline-block;
        width: 28px;
        height: 24px;
        border: 1px solid grey;
        margin-left:2px;
        line-height: 24px;
        border-radius: 5px;

    }

    /*當(dāng)前頁(yè)樣式*/
    .active {
        background-color: grey;
        color: white;
    }

    .more {
        border: none;
    }

    .disable {
        color: red;
    }

</style>

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

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

運(yùn)行效果圖：

分類管理.png

（3）產(chǎn)品管理：

實(shí)例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>產(chǎn)品管理</title>
</head>
<body>
<table>
    <caption>產(chǎn)品管理</caption>
    <tr>
        <td>ID</td>
        <td>圖片</td>
        <td>書名</td>
        <td>價(jià)格</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td><img src="./static/images/權(quán)力之路.png" alt="" width="50"></td>
        <td>權(quán)力之路</td>
        <td>￥119.70</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="./static/images/思想史.png" alt="" width="50"></td>
        <td>思想史</td>
        <td>￥186.00</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="./static/images/未來(lái)地圖.png" alt="" width="50"></td>
        <td>未來(lái)地圖</td>
        <td>￥79.40</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>校園秘史</td>
        <td>￥42.60</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>潦草</td>
        <td>￥44.10</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
</table>

<!--分頁(yè)-->
<p>
    <a href="">首頁(yè)</a>
    <a href="" class="active">1</a>
    <a href="">2</a>
    <a href="">3</a>
    <a href="">4</a>
    <a href="" class="more">...</a>
    <a href="">尾頁(yè)</a>
</p>
</body>
</html>

<style>
    table, th, td {
        border: 1px solid black;
    }
    table {
        width: 650px;
        margin: auto;
        border-collapse: collapse;
        text-align: center;
    }
    td {
        padding: 10px;
    }
    a {
        text-decoration-line: none;
        color: blue;
    }

    a:hover {
        color: brown;
        text-decoration-line: underline;
    }

    tr:first-child {
        margin-top: 20px;
        background-color: lightgreen;
    }

    table caption {
        font-size: 1.5rem;
        font-weight: bolder;
        margin-bottom: 20px;
    }

    p {
        text-align: center;
    }
    /*首頁(yè)樣式*/
    p a:first-child {
        width: 56px;
    }

    p a:last-child {
        width: 56px;
    }
    p a {
        display: inline-block;
        width: 28px;
        height: 24px;
        border: 1px solid grey;
        margin-left:2px;
        line-height: 24px;
        border-radius: 5px;

    }

    /*當(dāng)前頁(yè)樣式*/
    .active {
        background-color: grey;
        color: white;
    }

    .more {
        border: none;
    }

</style>

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

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

運(yùn)行效果圖：

產(chǎn)品管理.png

總結(jié)：第一次看見老師演示html版的后臺(tái)管理系統(tǒng)，讓我十分驚訝，原來(lái)前端是可以這樣做的。從而印證了上課的一句話“PHP是用來(lái)把html動(dòng)態(tài)化的“。這階段的前端學(xué)習(xí)收獲良多，把我之前碎片化學(xué)到的html知識(shí)連接起來(lái)了。

批改狀態(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é)議
0條評(píng)論
作者最新博文
關(guān)于我們 免責(zé)申明 意見反饋 講師合作 廣告合作 最新更新
php中文網(wǎng)：公益在線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é)