CSS小项目九宫格

最新推荐文章于 2021-09-17 15:08:27 发布

TardisKey

最新推荐文章于 2021-09-17 15:08:27 发布

阅读量105

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/TardisKey/article/details/119323758

版权

前端专栏收录该内容

22 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<!-- 九宫格 -->
<html>
    <style>
        ul {
            position: fixed;/* 相对页面的位置固定 */
            top: 50%;
            left: 50%;
            text-align: center;/* 居中 */
            transform: translate(-50%,-50%);
            overflow: hidden;/*溢出元素内容区的内容，会被修剪，并且其余内容是不可见的*/
            list-style: none; /*去掉列表前方的点 */
            width: 200px;
            height: 200px;
            border: 2px solid rgb(126, 148, 26);
            padding: 0px;/*内边距*/

        }
        li {
            width: 33.3333333%;
            height: 33.333333%;
            float: left;
            background: rgb(196, 192, 255);
            color: white;
            border: 1px solid white;
            flex-wrap: nowrap;
            box-sizing: border-box;/*将 box-sizing 设置为 "border-box*，并排放置带边框的框*/
            display: flex;/*弹性布局*/
            align-items: center; /*flex容器属性*/
            justify-content: center;/*flex容器属性*/
        }
    </style>
    <body>
        <div>
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
            </ul> 
        </div>
    </body>
</html>

TardisKey

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS小项目九宫格

<!DOCTYPE html><html> <style> ul { position: fixed;/* 相对页面的位置固定 */ top: 50%; left: 50%; text-align: center;/* 居中 */ transform: translate(-50%,-50%
复制链接

扫一扫