htm5+css3圣杯布局实战案例和html5的新增语义化布局元素--2018年8月21日11时09分

这节课主要讲了常用的html5的新增语义化布局元素和用圣杯布局一后台管理系统的布局案例

文档管理代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文档管理</title>
    <style type="text/css">
        table, th, td {
            border: 1px solid black;
        }
        table {
            width: 780px;
            margin: auto;
            border-collapse: collapse;
            text-align: center;
        }
        td {
            padding: 10px;
        }
        a {
            text-decoration: none;
            color: blue;
        }

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

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

        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 black;
            margin-left:2px;
            line-height: 24px;

        }

        .active {
            background-color: blue;
            color: white;
        }

        .more {
            border: none;
        }

    </style>
        </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="./static/images/1.png" alt="" width="50"></td>
        <td><a href="">YS-YZS型液下重型砂浆泵··</a></td>
        <td>YZ系列液下渣浆泵</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="./static/images/2.jpg" alt="" width="50"></td>
        <td><a href="">GMZ渣浆泵由清华大学设计的高··</a></td>
        <td>GMZ渣浆泵</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="./static/images/3.jpg" alt="" width="50"></td>
        <td><a href="">QW系列潜水排污泵是消化、吸收国外同类··</a></td>
        <td>QW系列潜水排污泵/td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td><img src="./static/images/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>

运行实例 »

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

预览图：

8ADY5G~08UQF8NH8VSTN2`C.png

分类管理代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <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: none;
            color: blue;
        }

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

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

        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 black;
            margin-left:2px;
            line-height: 24px;

        }

        /*当前页样式*/
        .active {
            background-color: blue;
            color: white;
        }

        .more {
            border: none;
        }

        .disable {
            color: red;
        }

    </style>
</head>
<body>
<table>
    <caption>分类管理</caption>
    <tr>
        <td>ID</td>
        <td>分类名称</td>
        <td>层级</td>
        <td>是否启用</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td>YZ系列液下渣浆泵</td>
        <td>顶级</td>
        <td>启用</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td>GMZ系列渣浆泵</td>
        <td>顶级</td>
        <td class="disable">禁用</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td>QW系列潜水排污泵</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>

<!--分页-->
<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>

运行实例 »

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

预览图：

@WLANPH`DNG@Z{KJ%KG(E@H.png

产品管理代码

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>产品管理</title>
    <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: lightblue;
        }

        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 black;
            margin-left:2px;
            line-height: 24px;

        }

        /*当前页样式*/
        .active {
            background-color: blue;
            color: white;
        }

        .more {
            border: none;
        }

    </style>
</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="./static/images/1.png" alt="" width="50"></td>
        <td>YS-YZS新型建材立式砂浆泵</td>
        <td>100000</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="./static/images/2.jpg" alt="" width="50"></td>
        <td>GMZ系列渣浆泵</td>
        <td>150000</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="./static/images/3.jpg" alt="" width="50"></td>
        <td>QW系列潜水排污泵</td>
        <td>150000</td>
        <td><a href="">编辑</a> | <a href="">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td><img src="./static/images/4.jpg" alt="" width="50"></td>
        <td>压滤机入料泵</td>
        <td>100000</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>

运行实例 »

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

预览图：

VGYL9@HSW8NZO{YNC86@}AV.png

手抄

手抄html5的新增语义化布局标签后，对于html5的新增语义化布局标签记忆更加清晰，这样也能加深自己的印象

总结

1、了解并学会应用html5的新增语义化布局标签

2、用圣杯布局写后台管理系统案例

3、ifream内联框架的应用

4、结合这一个星期所学的html5和css3的知识写应用案例，能够让学到的知识得以应用到实际

实例

实例

实例

相关文章