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>运行结果：
![[HTML、CSS]细节与使用经验](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635950/20241110/4a6bb78b9c294263bd2e005a5c2642e0.gif?x-oss-process=image/resize,h_160,m_lfit)
![[HTML、CSS]知识点](https://ucc.alicdn.com/3mfxe2r26qbaq/developer-article1635461/20241109/bcc34220ff734707ab00ebc739596dff.jpeg?x-oss-process=image/resize,h_160,m_lfit)