HTML5语义化标签布局2018.8.21/14:43 - HTML5/CSS

Home > List of blog posts > HTML5语义化标签布局2018.8.21/14:43

Blogger Information

Blog 20

fans 0

comment 0

visits 14858

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文章管理</title>
    <style>
        table,tr,td{
            border: 1px solid black;
        }
        table{
            width: 700px;
            border-collapse: collapse;
            margin: auto;
            text-align: center;
        }
        table tr td img{
            width: 150px;
        }
        td{
            padding: 8px;
        }
        table caption{
            font-size: 25px;
            margin-bottom: 20px;
        }
        table tr:first-child{ /*table下的第一个tr标签*/
            background-color: lightseagreen;
            font-weight: bolder;
        }
        a{
            text-decoration: none;
            color: seagreen;
        }
        a:hover{
            color: red;
        }
/*分页样式*/
        
        p{
            text-align: center;
        }
        p a {
            display: inline-block;
            border: 1px solid lightseagreen;
            width: 25px;
        }
        p a:first-child{ /*p标签下的第一个a标签*/
            width: 45px;
        }
        p a:last-child{ /*p标签下的最后一个a标签*/
            width: 45px;
        }
        /*当前页样式*/
        .active{
            background-color: lightseagreen;
            color: #cfcfcf;
        }

    </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="images/web.png" alt=""></td>
        <td><a href="">WEB项目开发流程大揭秘</a></td>
        <td>其他</td>
        <td><a href="">编辑</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><img src="images/peixunphp.jpg" alt=""></td>
        <td><a href="">第三期培训_PHP开发</a></td>
        <td>PHP</td>
        <td><a href="">编辑</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><img src="images/peixunqianduan.jpg" alt=""></td>
        <td><a href="">第三期培训_前端基础</a></td>
        <td>HTML5</td>
        <td><a href="">编辑</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td><img src="images/peixunshizhan.jpg" alt=""></td>
        <td><a href="">第三期培训_PHP开发</a></td>
        <td>PHP</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="">...</a>
    <a href="">尾页</a>
</p>
</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分类管理</title>
    <style>
        table,tr,td{
            border: 1px solid black;
        }
        table{
            width: 700px;
            border-collapse: collapse;
            margin: auto;
            text-align: center;
        }
        table tr td img{
            width: 150px;
        }
        td{
            padding: 8px;
        }
        table caption{
            font-size: 25px;
            margin-bottom: 20px;
        }
        table tr:first-child{ /*table下的第一个tr标签*/
            background-color: lightseagreen;
            font-weight: bolder;
        }
        a{
            text-decoration: none;
            color: seagreen;
        }
        a:hover{
            color: red;
        }
        /*分页样式*/

        p{
            text-align: center;
        }
        p a {
            display: inline-block;
            border: 1px solid lightseagreen;
            width: 25px;
        }
        p a:first-child{ /*p标签下的第一个a标签*/
            width: 45px;
        }
        p a:last-child{ /*p标签下的最后一个a标签*/
            width: 45px;
        }
        /*当前页样式*/
        .active{
            background-color: lightseagreen;
            color: #cfcfcf;
        }
    </style>
</head>
<body>
<table>
<caption>分类管理</caption>
<tr>
    <td>ID</td>
    <td>名称</td>
    <td>总数</td>
    <td>操作</td>
</tr>
<tr>
    <td>1</td>
    <td><a href="">PHP</a></td>
    <td>2</td>
    <td><a href="">编辑</a>|<a href="">删除</a></td>
</tr>
<tr>
    <td>2</td>
    <td><a href="">HTML5</a></td>
    <td>1</td>
    <td><a href="">编辑</a>|<a href="">删除</a></td>
</tr>
<tr>
    <td>3</td>
    <td><a href="">其他</a></td>
    <td>1</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="">...</a>
    <a href="">尾页</a>
</p>


</body>
</html>

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>软件管理</title>
    <style>
        table,tr,td{
            border: 1px solid black;
        }
        table{
            width: 700px;
            border-collapse: collapse;
            margin: auto;
            text-align: center;
        }
        table tr td img{
            width: 150px;
        }
        td{
            padding: 8px;
        }
        table caption{
            font-size: 25px;
            margin-bottom: 20px;
        }
        table tr:first-child{ /*table下的第一个tr标签*/
            background-color: lightseagreen;
            font-weight: bolder;
        }
        a{
            text-decoration: none;
            color: seagreen;
        }
        a:hover{
            color: red;
        }
        /*分页样式*/

        p{
            text-align: center;
        }
        p a {
            display: inline-block;
            border: 1px solid lightseagreen;
            width: 25px;
        }
        p a:first-child{ /*p标签下的第一个a标签*/
            width: 45px;
        }
        p a:last-child{ /*p标签下的最后一个a标签*/
            width: 45px;
        }
        /*当前页样式*/
        .active{
            background-color: lightseagreen;
            color: #cfcfcf;
        }
    </style>
</head>
<body>
<table>
    <caption>软件管理</caption>
    <tr>
        <td>ID</td>
        <td>软件名称</td>
        <td>下载地址</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>1</td>
        <td><a href="">Notepad++7.3.1
        </a></td>
        <td><a href="http://www.php.cn/xiazai/gongju/92">http://www.php.cn/xiazai/gongju/92</a></td>
        <td><a href="">编辑</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>2</td>
        <td><a href="">SublimeText3汉化版
        </a></td>
        <td><a href="http://www.php.cn/xiazai/gongju/93">http://www.php.cn/xiazai/gongju/93</a></td>
        <td><a href="">编辑</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>3</td>
        <td><a href="">Zend Studio 13.0.1
        </a></td>
        <td><a href="http://www.php.cn/xiazai/gongju/121">http://www.php.cn/xiazai/gongju/121</a></td>
        <td><a href="">编辑</a>|<a href="">删除</a></td>
    </tr>
    <tr>
        <td>4</td>
        <td><a href="">PhpStorm 18.2.1 Win版
        </a></td>
        <td><a href="http://www.php.cn/xiazai/gongju/122">http://www.php.cn/xiazai/gongju/122</a></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="">...</a>
    <a href="">尾页</a>
</p>

</body>
</html>

运行实例 »

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

手写作业

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

HTML文档结构 2018.8.10/22.31

2018-08-13 16:17:19