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

搜索
博主信息
博文 14
粉絲 0
評論 0
訪問量 13356
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
語義化布局標簽及HTML頁實戰(zhàn)—2018年08月20日作業(yè)
悅派的博客
原創(chuàng)
838人瀏覽過

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文檔</title>
</head>
<body>
<table>
    <caption>文檔</caption>
    <tr>
        <td>ID</td>
        <td>圖片</td>
        <td>文檔標題</td>
        <td>分類</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td><img src="1.jpg" alt="" width="60"></td>
        <td><a href="">一條鯽魚正在刷屏：它把50名高中生送進北大清華</a></td>
        <td>新聞</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="2.jpg" alt="" width="50"></td>
        <td><a href="">人民日報：年輕干部絕不能熱衷于自我設計晉升路線</a></td>
        <td>新聞</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="3.jpg" alt="" width="50"></td>
        <td><a href="">特朗普透露很可能再會金正恩 稱兩人彼此喜歡</a></td>
        <td>新聞</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td><img src="4.jpg" alt="" width="50"></td>
        <td><a href="">兩名美使館槍擊案嫌疑人被拘捕：均為土耳其公民</a></td>
        <td>新聞</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
</table>

<!--分頁-->
<p>
    <a href="">首頁</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="">尾頁</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: green;
    }

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

    tr:first-child {
        margin-top: 20px;
            background: linear-gradient(to top, #FFBD9D, #FFFFFF);
    }

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

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

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

    }

    /*當前頁樣式*/
    .active {
        background-color: green;
        color: white;
    }

    .more {
        border: none;
    }

</style>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>產品</title>
</head>
<body>
<table>
    <caption>產品</caption>
    <tr>
        <td>ID</td>
        <td>圖片</td>
        <td>商品</td>
        <td>價格</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td><img src="1.jpg" alt="" width="60"></td>
        <td>田小花麻花</td>
        <td>58</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="2.jpg" alt="" width="50"></td>
        <td>嶗山啤酒</td>
        <td>78</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="3.jpg" alt="" width="50"></td>
        <td>海飛絲</td>
        <td>68</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td><img src="4.jpg" alt="" width="50"></td>
        <td>王老吉</td>
        <td>39</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
</table>

<!--分頁-->
<p>
    <a href="">首頁</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="">尾頁</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: green;
    }

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

    tr:first-child {
        margin-top: 20px;
        background: linear-gradient(to top, #FFBD9D, #FFFFFF);
    }

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

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

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

    }

    /*當前頁樣式*/
    .active {
        background-color: green;
        color: white;
    }

    .more {
        border: none;
    }

</style>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分類</title>
</head>
<body>
<table>
    <caption>分類</caption>
    <tr>
        <td>ID</td>
        <td>分類名稱</td>
        <td>級別</td>
        <td>是否啟用</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>飲品</td>
        <td>1級</td>
        <td>啟用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>酒水</td>
        <td>1級</td>
        <td>啟用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>零食</td>
        <td>2級</td>
        <td>啟用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td>日用</td>
        <td>1級</td>
        <td class="disable">禁用</td>
        <td><a href="">編輯</a> | <a href="">刪除</a></td>
    </tr>
</table>

<!--分頁-->
<p>
    <a href="">首頁</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="">尾頁</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: green;
    }

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

    tr:first-child {
        margin-top: 20px;
        background: linear-gradient(to top, #FFBD9D, #FFFFFF);
    }

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

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

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

    }

    /*當前頁樣式*/
    .active {
        background-color: green;
        color: white;
    }

    .more {
        border: none;
    }

    .disable {
        color: red;
    }

</style>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

微信圖片_20180821184757.jpg

總結：

html5的新增語義化標簽，很便捷直觀，而且也能很好地美化代碼

結合之前所學HTML和CSS的基礎知識寫了個簡單的后臺的案例，能夠更直觀的了解了之前所學的HTML和CSS的各項使用方法

感覺英語是硬傷，還有很多單詞都記不住

批改狀態(tài)：合格

老師批語：
本博文版權歸博主所有，轉載請注明地址！如有侵權、違法，請聯系admin@php.cn舉報處理！
全部評論 文明上網理性發(fā)言，請遵守新聞評論服務協(xié)議
0條評論
關于我們 免責申明 意見反饋 講師合作 廣告合作 最新更新
php中文網：公益在線php培訓，幫助PHP學習者快速成長！
關注服務號 技術交流群
PHP中文網訂閱號
每天精選資源文章推送
PHP中文網APP
隨時隨地碎片化學習
PHP中文網抖音號
發(fā)現有趣的

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

    • 登錄PHP中文網，和優(yōu)秀的人一起學習！
    全站2000+教程免費學