HTML+CSS，时髦手机Apple14介绍模考，CSS入门项目，代码已分享！

2023-09-27 22:36:10

用 CSS 制作时尚的商品介绍模块

在众多 CSS 教程中，一个经典且实用的案例是商品介绍模块。本文将详细介绍如何使用 HTML 和 CSS 创建一个时尚的 iPhone 14 商品介绍模块，帮助初学者理解 CSS 的基本原理。

HTML 结构：商品介绍模块的骨架

商品介绍模块的 HTML 结构决定了其整体布局。本案例采用两栏布局：左边是商品图片，右边是商品信息。代码如下：

<div class="product">
  <div class="product-image">
    <img src="apple-14.jpg" alt="Apple iPhone 14">
  </div>
  <div class="product-info">
    <h1>Apple iPhone 14</h1>
    <p>The latest and greatest from Apple.</p>
    <ul>
      <li>6.1-inch Super Retina XDR display</li>
      <li>A15 Bionic chip</li>
      <li>12MP dual-camera system</li>
      <li>5G connectivity</li>
    </ul>
    <p>Price: $999</p>
    <button>Buy Now</button>
  </div>
</div>

CSS 样式：赋予模块生命

CSS 样式控制 HTML 元素的视觉呈现，包括字体、颜色、大小和位置。以下是 iPhone 14 商品介绍模块的 CSS 代码：

.product {
  width: 100%;
  margin: 0 auto;
  padding: 20px;
}

.product-image {
  float: left;
  width: 250px;
  height: 250px;
  margin-right: 20px;
}

.product-info {
  float: left;
  width: calc(100% - 270px);
}

h1 {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 10px;
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

li {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

.price {
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  margin-bottom: 20px;
}

button {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  background-color: #00ff00;
  color: #ffffff;
  border: none;
}

效果预览：见证成果

将 HTML 和 CSS 代码保存到文件中，然后在浏览器中打开 HTML 文件即可看到商品介绍模块的效果。它将包含商品图片、名称、、价格和购买按钮。

自定义和美化：让你的模块脱颖而出

上述代码提供了一个基本的商品介绍模块，但你可以根据自己的需要添加额外的 CSS 样式来对其进行美化和定制。例如，你可以添加一个滑块来切换商品图片，或者添加一个购物车按钮来方便用户直接购买。

常见问题解答

Q1：如何更改商品图片？
- A1：修改 <img> 标签中的 src 属性。
Q2：如何调整字体大小？
- A2：修改 font-size 属性。
Q3：如何添加背景颜色？
- A3：添加 background-color 属性。
Q4：如何让商品信息在图片上方？
- A4：将 .product-image 的 float 属性改为 none，并将 .product-info 的 float 属性改为 left。
Q5：如何制作响应式模块？
- A5：使用媒体查询或 CSS 框架来响应不同屏幕大小。