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

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

第一步：搭建HTML框架

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

<body>
    
    <div class="box">
        
        <a href="#"><img src='images/img2.png' alt=''>a>

        
        <p class="re"><a href="#">apple，我们的创造是未来改变这个世界，你也想加入其中吗a>p>

        
        <div class="ap">来自于 132456879 的评价div>

        
        <div class="info">
            
            <h4><a href="#">灵动岛，软硬件共同结合的UIa>h4>
            
            <em>|em>
            
            <span>3999.9元span>
        div>
    div>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

第二步: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>
    
    <div class="box">
        
        <a href="#"><img src='images/img2.png' alt=''>a>

        
        <p class="re"><a href="#">apple，我们的创造是未来改变这个世界，你也想加入其中吗a>p>

        
        <div class="ap">来自于 132456879 的评价div>

        
        <div class="info">
            
            <h4><a href="#">灵动岛，软硬件共同结合的UIa>h4>
            
            <em>|em>
            
            <span>3999.9元span>
        div>
    div>
body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

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

如果大家觉得有用的话，可以关注我下面的微信公众号，极客李华，我会在里面更新更多行业资讯，企业面试内容，编程资源，如何写出可以让大厂面试官眼前一亮的简历等内容，让大家更好学习编程，我的抖音，B站也叫极客李华。大家喜欢也可以关注一下

相关阅读:
实现Object.create()
Blender中的高级边缘控制和纹理映射
 ElasticSearch详解
 【M365运维】很抱歉、无法打开“https://..../.xlsx”
欧冶云商将于11月4日上会：上半年营收566亿元，毛利率整体较低
 Win11勒索软件防护怎么打开？Win11安全中心勒索软件防护如何设置
 从一座瑞典风机的倒塌看VDI2230用于螺栓连接精确计算的重要性
 TIdAntiFreeze与TIdhttp配合使用注意事项
 基于SSM的网络教学（作业）管理系统
 GROUP BY与COUNT（也可以换成其他聚合函数）用法详解
原文地址：https://blog.csdn.net/qq_51447496/article/details/127409678