html 9宫格

最新推荐文章于 2024-07-20 13:41:52 发布

形形色色的人

最新推荐文章于 2024-07-20 13:41:52 发布

阅读量3.5k

点赞数 2

分类专栏： html

本文链接：https://blog.csdn.net/u014338577/article/details/79901198

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>HTML九宫格布局</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>

<body>
    <html>

    <head>
        <style type="text/css">
            /** 重置浏览器默认标签样式 */

            body,
            ul,
            li {
                margin: 0;
                padding: 0;
            }

            .xttblog {
                width: 930px;
                height: 120px;
                margin-top: 50px;
                margin-left: auto;
                margin-right: auto;
            }

            .box {
                margin-left: 5px;
                margin-top: 5px;
                list-style-type: none;
            }

            .box li {
                float: left;
                line-height: 230px;
            }

            .box li{
                display: block;
                border: 5px solid #ccc;
                width: 300px;
                height: 250px;
                text-align: center;
                margin-left: -5px;
                margin-top: -5px;
                position: relative;
                z-index: 1;
            }

            .box li:hover {
                border-color: #f00;
                z-index: 2;
            }
        </style>
    </head>

    <body>
        <div class="xttblog">
            <ul class="box">
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
                <li>
                    <img src="tb.jpg" />
                </li>
            </ul>
        </div>
    </body>

    </html>