案例——新闻快报模块布局实现

最新推荐文章于 2023-11-12 12:54:06 发布

但缓且不息

最新推荐文章于 2023-11-12 12:54:06 发布

阅读量255

点赞数 1

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

本文链接：https://blog.csdn.net/weixin_49930465/article/details/123708776

版权

前端专栏收录该内容

12 篇文章 3 订阅

订阅专栏

注意：

标签都是有语义的，合理的地方用合理的标签。比如产品标题就用h，大量文字段落就用p
margin和padding大部分情况下可以进行混用，两者各有优缺点，最好根据实际情况，采取简单的方法实现，比如说，在没有设置宽度属性时，指定左右内边距不会撑开盒子大小，但是不管有没有设置高度属性，指定上下内边距总会撑开盒子大小，如果我们此时要避免撑开盒子的大小，我们可以采取margin-top
布局的时候，最好逐层的去实现，不要想到什么写什么，这样会造成写的样式结构很混乱，逐层实现写的时候思路会更加清晰！
在我们具体的实现过程中，很多参数最好使用工具根据设计图测量出来，这样有利于我们今后的开发！

我们来实现一个简单的新闻快报模块，这是实现效果：

具体的代码：

里面写好了注释，不懂的地方可以自己看看

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 取消默认的内边距和外边距 */
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            /* 把盒子这个块级元素设置为水平居中 */
            margin: 100px auto;
            width: 248px;
            height: 163px;
            /* 有边框的存在，整个盒子宽高会变成 250*165 */
            border: 1px solid #ccc;
        }
        .box h3{
            padding-left: 15px;
            /* height和line-height设置同一个值让文字垂直居中 */
            height: 32px;
            line-height: 32px;
            /* 取消加粗 */
            font-weight: 400;
            border-bottom: 1px dotted #ccc;
            font-size: 14px;
        }
        .box ul {
            margin-top: 7px;
        }
        .box ul li {
            /* 去掉li前面的小圆点 */
            list-style: none;
            height: 23px;
            line-height: 23px;
            padding-left: 20px;
        }
        .box ul li a{
            text-decoration: none;
            font-size: 12px;
            color: #666;
        }
        .box ul li a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="box">
        <h3>品优购快报</h3>
        <ul>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】母亲节，健康好礼低至5折！</a></li>
            <li><a href="#">【特惠】爆款耳机5折秒！</a></li>
            <li><a href="#">【特惠】9.9元洗100张照片！</a></li>
            <li><a href="#">【特惠】长虹智能空调立省1000</a></li>
        </ul>
    </div>
</body>
</html>