css比较常见的li布局

最新推荐文章于 2024-04-29 18:25:35 发布

chengxue_123

最新推荐文章于 2024-04-29 18:25:35 发布

阅读量479

点赞数

分类专栏： css布局文章标签： css 前端

本文链接：https://blog.csdn.net/chengxue_123/article/details/109633485

版权

css布局专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>li布局</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .layout {
            width: 1230px;
            margin: 50px auto;
        }
        
        .layout ul {
            width: 100%;
            height: 614px;
            background-color: #ccc;
        }
        
        .layout ul li {
            width: 234px;
            height: 300px;
            background-color: red;
            float: left;
            margin-left: 15px;
            margin-bottom: 14px;
            list-style: none;
        }
        /* 此处可以用nth-of-type或nth-child */
        
        .layout ul li:nth-child(1),
        .layout ul li:nth-child(6) {
            margin-left: 0px;
        }
        
        .layout ul li:nth-child(10),
        .layout ul li:nth-child(11) {
            width: 234px;
            height: 143px;
        }
    </style>
</head>

<body>
    <div class="layout">
        <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>
            <li>10</li>
            <li>11</li>
        </ul>
    </div>
</body>

</html>

chengxue_123

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css比较常见的li布局

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>li布局</title> <style> * { ma...
复制链接

扫一扫