HTML+CSS实现商品介绍模考（以Apple14为案例）

极客李华

已于 2024-01-12 19:08:29 修改

阅读量1.7k

点赞数 3

分类专栏： CSS常见小案例文章标签： css html css3

于 2022-10-19 15:55:13 首次发布

本文链接：https://blog.csdn.net/qq_51447496/article/details/127409678

版权

CSS常见小案例专栏收录该内容

22 篇文章 12 订阅

订阅专栏

HTML+CSS实现商品介绍模考（以Apple14为案例）

简介：本文以最通俗易懂的语言为读者提供一个经典CSS小案例，商品介绍模块，并且结合时事，以Apple14为案例进行讲解。

第一步：搭建HTML框架

分析HTML框架是第一步，我将我的思路放于下文的代码中。

<body>
    <!-- 搭建架构，分析可知，HTML框架属于比较简单的一种，一个大的div中添加各种元素
        采取的是垂直的结构
    -->
    <div class="box">
        <!-- 处于上方的img模块 -->
        <a href="#"><img src='images/img2.png' alt=''></a>

        <!-- 介绍文字使用<p>标签,然后内部包含链接 -->
        <p class="re"><a href="#">apple，我们的创造是未来改变这个世界，你也想加入其中吗</a></p>

        <!-- 用一个div来包括评价崔志布局 -->
        <div class="ap">来自于 132456879 的评价</div>

        <!-- 使用一个div来包裹介绍信息 -->
        <div class="info">
            <!-- 介绍商品部分 -->
            <h4><a href="#">灵动岛，软硬件共同结合的UI</a></h4>
            <!-- 分割线 -->
            <em>|</em>
            <!-- 价格 -->
            <span>3999.9元</span>
        </div>
    </div>
</body>

运行结果：
在这里插入图片描述

第二步:CSS渲染

下面是我极其详细的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>Apple14介绍</title>
    <style>
        /* 先消除所有内外边距 */
        * {
            margin: 0;
            padding: 0;
        }

        /* 设置最外面的大盒子的大小和背景颜色 */
        .box {
            /* 设置盒子的大小 */
            width: 415px;
            height: 645px;

            /* 设置盒子中的背景颜色 */
            background-color:   #3c3d3c;
            /* 让块级的盒子水平居中对齐 */
            margin: 100px auto;
        }

        /* 设置图片的宽度 */
        .box img {
            /* 让自己的宽度等于父亲 */
            width: 100%;
        }

        /* 设置里面出现的所有的链接的样式 */
        a {
            color: rgb(236, 232, 232);

            /* 去除下划线 */
            text-decoration: none;
        }

        /* 设置re段落的样子 */
        .re{
            /* 盒子的高度 */
            height: 85px;

            /* 字体的大小 */
            font-size: 19px;
        
            /* 设置左右内边距 上下内边距为0 左右为34px */
            /* 因为这个段落没有width属性 所以padding不会撑开盒子宽度 */
            padding: 0 34px;

            /* 设置盒子与上面的距离 */
            margin-top: 40px;
        }

        /* 设置评价的样式 */
        .ap {
            /* 设置字体 */
            font-size: 17px;

            /* 上边的外边距 */
            margin-top: 10px;

            /* 字体颜色 */
            color: #c0c7cc;

            /* 外边距 */
            padding: 0 34px;
        }

        /* 设置介绍信息的样式 */
        .info {
    
            /* 设置字体 */
            font-size: 18px;

            /* 上外边距 */
            margin-top: 22px;

            /* 内边距 */
            padding: 0 34px;
        }
        
        .info h4 {
            /* 把行列块标签设置为行内块 */
            display: inline-block;

            /* 字体的权重为400 为普通字体 默认h4是会加粗 */
            font-weight: 400;
        }

        /* 设置金额颜色 */
        .info span {
            color: #f77b72;
        }

        /* 设置中间的分割线 */
        .info em {
            /* 样式为normal */
            font-style: normal;
            /* 分割线颜色 */
            color: #e4e6e5;
            /* margin四个参数是顺时针 上右下左 */
            margin: 0 4px 0 10px;
        }
    </style>
</head>

<body>
    <!-- 搭建架构，分析可知，HTML框架属于比较简单的一种，一个大的div中添加各种元素
        采取的是垂直的结构
    -->
    <div class="box">
        <!-- 处于上方的img模块 -->
        <a href="#"><img src='images/img2.png' alt=''></a>

        <!-- 介绍文字使用<p>标签,然后内部包含链接 -->
        <p class="re"><a href="#">apple，我们的创造是未来改变这个世界，你也想加入其中吗</a></p>

        <!-- 用一个div来包括评价崔志布局 -->
        <div class="ap">来自于 132456879 的评价</div>

        <!-- 使用一个div来包裹介绍信息 -->
        <div class="info">
            <!-- 介绍商品部分 -->
            <h4><a href="#">灵动岛，软硬件共同结合的UI</a></h4>
            <!-- 分割线 -->
            <em>|</em>
            <!-- 价格 -->
            <span>3999.9元</span>
        </div>
    </div>
</body>

</html>