综合案例-浮动布局练习

最新推荐文章于 2024-03-22 08:59:27 发布

吉米的编程日记

最新推荐文章于 2024-03-22 08:59:27 发布

阅读量368

点赞数 9

文章标签： javascript css 前端 html

本文链接：https://blog.csdn.net/m0_62211222/article/details/136694258

版权

本文展示了如何使用HTML和CSS创建一个带有响应式布局的列表，使用浮动属性使列表项居左排列，同时保证最后一项自动移除右侧外边距。

摘要由CSDN通过智能技术生成

先看代码

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>综合案例</title>
    <style>
        * {
            margin: 0px; /*清除原本的样式属性*/
            padding: 0px;
        }
        .box {
            background-color: gray;
            width: 1226px;
            height: 285px;
            margin: 0 auto; /*居中显示*/
        }
        li{
            list-style:none;
        }
        .box li{
            width:296px;
            height:285px;
            background-color:red;
            float:left;
            margin-right:14px;
        }

        /*注意这里box后面有一个空格，然乎才是“.”不写空格是出不来效果的*/
        .box .last { /*这里必须写成.box last，不能写成.last，因为后者的权重太低了，不能起作用*/
            margin-right: 0px; /*最后一个盒子不需要设置右边框，否则会被挤下来*/
        }
    </style>
</head>
<body>

    <ul class="box">
        <li>我是一段详情文字。。。</li>
        <li>我是一段详情文字。。。</</li>
        <li>我是一段详情文字。。。</li>
        <li class="last">我是一段详情文字。。。</li>
    </ul>
</body>
</html>