CSS 盒子模型综合案例

最新推荐文章于 2025-08-13 18:53:35 发布

知知为荔枝

最新推荐文章于 2025-08-13 18:53:35 发布

阅读量356

点赞数 16

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： css 前端盒子模型内外边距新闻列表产品卡片

本文链接：https://blog.csdn.net/qq_56808981/article/details/148693331

HTML 专栏收录该内容

14 篇文章

订阅专栏

CSS 推荐书写顺序（网页加载速度可更快）：

盒子模型属性
文字样式
圆角、阴影等修饰属性

1 案例一产品卡片

<!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>综合案例一：产品卡片</title>
    <style>
        /* 先清楚所有的默认样式 */
        * {
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;   /* 启动内减模式，因为不希望撑大盒子*/
        }

        /* 设置整个浏览器的背景色 */
        body {
            background-color: #f1f1f1;
        }

        .product {
            /* 先写盒子模型的 */
            margin: 48px auto;   /* 设置版心居中    是针对盒子进行版心居中 */
            padding-top: 40px;     /* 给盒子设置内边距，即图片和盒子最上方之间会有距离*/

            /* 再写文字的 */
            width: 270px;
            height: 253px;
            background-color: #ffffff;
            /* font-weight: 400;               这个不会被继承！*/
            text-align: center;     /* 内容居中，图片加文字居中，而且是在父级里设置 */

            /* 最后写圆角等修饰性的 */
            border-radius: 10px;  /* 设置圆角 */
        }

        .product h4{
            margin-top: 20px;
            margin-bottom: 12px;

            font-size: 18px;
            font-weight: 400;   /* 不加粗 */
            color: #333;
        }

        .product p {
            font-size: 12px;
            color: #555;
        }
    </style>
</head>
<body>
    <div class="product">
        <img src="file:///D:/D%E7%9B%98/%E6%A1%8C%E9%9D%A2/%E5%89%8D%E7%AB%AF/%E9%BB%91%E9%A9%AC_html_css/%E8%B5%84%E6%96%99/Day01-10%E5%9F%BA%E7%A1%80%E7%8F%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%96%99/%E5%9F%BA%E7%A1%80%E7%8F%AD%E8%AF%BE%E7%A8%8B%E8%B5%84%E6%96%99/code/day05/%E6%A1%88%E4%BE%8B/19-%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B%E4%B8%80-%E4%BA%A7%E5%93%81%E5%8D%A1%E7%89%87/images/liveSDK.svg" alt="">
        <h4>抖音直播SDK</h4>
        <p>包含抖音直播看播功能</p>
    </div>
</body>
</html>

运行效果：

2 案例二新闻列表

分析：

技巧：列表内容的装饰性小图片，在 CSS　内设置背景图片

<!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>案例二 新闻列表</title>
    <style>
        /* 先清除默认样式 */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        li {
            list-style: none;   /* 清楚无序列表前边的项目符号 */
        }

        a {
            text-decoration: none;   /* 清楚超链接下边的下划线 */
        }

        .news {
            width: 360px;
            height: 200px;
            /* background-color: pink; */

            margin: 50px auto;   /* 盒子模型版心居中 */
        }

        .news .hd {
            /* 子级默认宽度就是父级宽度的 100% ，所以不用设置宽度 */
            height: 34px;
            background-color: #eee;
            border: 1px solid #dbdee1;   /* 设置框的描边 */
            border-left: 0px;   /* 左边框没有 */
        }

        .news .hd a {
            margin-top: -1px;   /* 设置超链接方框的上边外边距为 -1 ，即盒子会整体往上移动一个像素 */
            display: block;
            border-top: 3px solid #ff8400;   /* 设置超链接方框的上边边框线 */
            border-right: 1px solid #dbdee1;   /* 设置超链接方框右边边框线 */
            width: 48px;
            height: 34px;
            background-color: #fff;

            /* 文字水平垂直居中 */
            text-align: center;
            line-height: 34px;     /* 行高和高度设置一致 */

            font-size: 14px;
            color: #333;
        }

        .news .bd {
            padding: 5px;
        }

        /* 橙色的方框项目符号，做为 li 的背景图显示，即写在 CSS 样式内 */
        .news li {
            padding-left: 15px;

            background-image: url(../../HTML_img/7.png);  
            /* 注意背景图默认是平埔的 */
            background-repeat: no-repeat;   /* 设置背景图不要平铺 */
            /* 设置背景图垂直居中 */
            background-position: 0 center;
        }

        /* 小图片做为标签 a 的背景图显示 */
        .news .bd li a {
            background-image: url(../../HTML_img/8.gif);
            background-repeat: no-repeat;   /* 设置背景图不要平铺 */
            padding-left: 20px;

            font-size: 12px;
            color: #666;
            line-height: 24px;   /* 加行高 */
        }

        /* 鼠标悬停效果 */
        .news .bd li a:hover {
            color: #ff8400;
        }

    </style>
</head>
<body>
    <!-- 新闻区域 包含 标题 + 内容 -->
    <div class="news">
        <!-- 标题区域 -->
        <div class="hd"><a href="#">新闻</a></div>
        <div class="bd">
            <ul>
                <li><a href="#">点赞“新农人”温暖的伸手</a></li>
                <li><a href="#">在希望的田野上..</a></li>
                <li><a href="#">“中国天眼”又有新发现已在《自然》杂志发表</a></li>
                <li><a href="#">这个领域，缺人！月4万元还不好招！啥情况？</a></li>
                <li><a href="#">“带货”背后：亏损面持续扩大，竞争环境激烈</a></li>
                <li><a href="#">多地力推二手房“带押过户”，有什么好处？</a></li>
            </ul>
        </div>
    </div>
</body>
</html>

运行效果：