web前端入门到实战：html,css制作九宫格

最新推荐文章于 2023-04-02 21:20:34 发布

编程世界-云

最新推荐文章于 2023-04-02 21:20:34 发布

阅读量1.1k

点赞数 2

文章标签： Html css 前端 web前端前端开发

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103284374

版权

绘制九宫格
要求:九宫格垂直居中于页面,只能使用ul和li标签,添加背景边框

代码

<!DOCTYPE html>
<html>
<body>

<h1>九宫格</h1>

<p>要求:</p>
<p>1:不能修改标签，仅通过 css 实现效果</p>
<p>2:添加绿色的边框</p>

<style type="text/css">
    ul{
        position: fixed;
        top: 50%;
        left: 50%;
        text-align: center;
        transform: translate(-50%,-50%);
        overflow: hidden;
        list-style: none;
        width: 200px;
        height: 200px;
        border: 10px solid green;
        padding: 0px;
        }

    li{
        width: 33.3333333%;
        height: 33.333333%;
        float: left;
        background: pink;
        color: white;
        border: 2px solid white;
        flex-wrap: nowrap;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

</style>

    <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>

</body>
</html>
web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（详细的前端项目实战教学视频，PDF）

效果图:

有很多种方法可以实现,我用的是伸缩盒,本来不想用的,但是文字的上下居中没有固定的高度只有百分比实在没想到方法居中.最后才加了伸缩盒.以后有时间要多尝试别的方法.

编程世界-云

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
web前端入门到实战：html,css制作九宫格

绘制九宫格要求:九宫格垂直居中于页面,只能使用ul和li标签,添加背景边框代码<!DOCTYPE html><html><body><h1>九宫格</h1><p>要求:</p><p>1:不能修改标签，仅通过 css 实现效果</p><p>2:添加绿色的边框&...
复制链接

扫一扫