HTML + CSS 连载 | 21 - 盒子模型小米（下）

最新推荐文章于 2024-07-21 17:58:14 发布

Riemann Hypothesis

最新推荐文章于 2024-07-21 17:58:14 发布

阅读量93

点赞数

分类专栏： HTML2CSS 文章标签： html css 前端

本文链接：https://blog.csdn.net/JingnanJia/article/details/134084319

版权

HTML2CSS 专栏收录该内容

64 篇文章 5 订阅

订阅专栏

html+css.jpeg

一、实现小米官网首页的商品 item

第五步：增加商品描述并设置样式

商品标题下面是商品的描述信息，这里我们使用 p 元素来表示，在 HTML 页面中添加 p 元素，具体 HTML 页面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .item {
      display: inline-block;
      width: 234px;
      height: 300px;
      padding: 20px 0px;

      background-color: #fff;
      box-sizing: border-box;

      /*设置img子元素居中，img 时行内级元素*/
      text-align: center;
    }

    .item img {
      width: 160px;
      height: 160px;
    }

    .item .title {
      /*上0px 右10px 下 2px 左10px*/
      margin: 0px 10px 2px;
    }
  </style>
</head>
<body>
  <div>
    <a class="item" href="">
      <img src="../images/earphones.webp" alt="">
      <h3 class="title">Readmi Buds 5</h3>
      <p class="desc">46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航</p>
    </a>
  </div>
</body>
</html>

通过浏览器的检查工具查看商品描述信息的样式：

新增一个商品描述信息的 CSS 选择器，并在这里设置文字的颜色以及外边距

.item .desc {
  color: #b2b2b2;
  margin: 0px 10px 10px;
}

通过与原样式的对比，我们这里的商品描述信息占据了两行，因为我们应该设置让他们在一行显示，多处的内容可以通过省略号表示，具体 CSS 代码如下：

.item .desc {
  color: #b2b2b2;
  margin: 0px 10px 10px;
  /*文字在一行显示*/
  white-space: nowrap;
  /*隐藏超时父元素的部分的内容*/
  overflow: hidden;
  /*使用省略号代替文字*/
  text-overflow: ellipsis;
}

在浏览器中打开该 HTML 页面，效果如下：

第六步：增加商品价格并设置样式

对于商品价格的表示我们可以使用 p 元素来实现，并且里面要嵌套一个 span 来包裹元素的价格，分别给它们添加一个 class 属性，具体 HTML 页面的代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/reset.css">
  <style>
    .item {
      display: inline-block;
      width: 234px;
      height: 300px;
      padding: 20px 0px;

      background-color: #fff;
      box-sizing: border-box;

      /*设置img子元素居中，img 时行内级元素*/
      text-align: center;
    }

    .item img {
      width: 160px;
      height: 160px;
    }

    .item .title {
      /*上0px 右10px 下 2px 左10px*/
      margin: 0px 10px 2px;
    }

    .item .desc {
      color: #b2b2b2;
      margin: 0px 10px 10px;
      /*文字在一行显示*/
      white-space: nowrap;
      /*隐藏超时父元素的部分的内容*/
      overflow: hidden;
      /*使用省略号代替文字*/
      text-overflow: ellipsis;
    }

  </style>
</head>
<body>
  <div>
    <a class="item" href="">
      <img src="../images/earphones.webp" alt="">
      <h3 class="title">Readmi Buds 5</h3>
      <p class="desc">46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航</p>
      <p class="price"><span class="discount">199</span>元</p>
    </a>
  </div>
</body>
</html>

在浏览器中打开该 HTML 页面，效果如下：

接下来给商品价格设置样式，我们可以通过浏览器的检查工具查看原商品价格的样式；包括字体颜色、大小以及边距等。

新增一个 CSS 选择器设置商品价格的样式

.item .price {
  color: #ff6700;
  text-align: center;
  margin: 0px 10px 14px;
  font-size: 14px;
}

在浏览器中打开 HTML 页面，效果如下：

第七步：微调各个元素之间的间距

在完成各个元素的样式设置之后，与原样式相比还需要进行一些微调，其实就是通过 padding 及 margin 来调整元素的内外间距。

调整后的 CSS 代码如下：

/*其余不需要调整的代码已忽略*/
.item {
  padding: 24px 0px;
}
.item .title {
  /*上15px 右10px 下 2px 左10px*/
  margin: 15px 10px 2px;
}

在浏览器中再次打开 HTML 页面，效果如下：

可以看到各个元素的位置与原样式之间非常接近了。

第八步：hover 状态实现

最后，当鼠标悬浮在商品上的时候，商品 item 会出现一个阴影，这个阴影可以使用 box-shadow 来实现，如下图所示：

在实现阴影之前，我们可以先设置 text-align: center 来让盒子在页面中居中显示：

body {
  text-align: center;
}

在浏览器中打开 HTML 页面，可以看到已经居中显示了：

接着我们可以设置 box-shadow 来实现阴影，需要注意的是只有当 hover 状态时才会出现阴影，因此在书写 CSS 选择器的时候要使用到伪类 :hover，具体 CSS 选择器和代码如下所示：

.item:hover {
  box-shadow: 0 5px 10px 5px rgba(0, 0, 0, .2);
}

在浏览器中打开 HTML 页面，效果如下：

至此，我们已经实现了小米官网上的一个商品 item 的开发。

Riemann Hypothesis

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML + CSS 连载 | 21 - 盒子模型小米（下）

来实现阴影，需要注意的是只有当 hover 状态时才会出现阴影，因此在书写 CSS 选择器的时候要使用到伪类。接下来给商品价格设置样式，我们可以通过浏览器的检查工具查看原商品价格的样式；最后，当鼠标悬浮在商品上的时候，商品 item 会出现一个阴影，这个阴影可以使用。在完成各个元素的样式设置之后，与原样式相比还需要进行一些微调，其实就是通过。新增一个商品描述信息的 CSS 选择器，并在这里设置文字的颜色以及外边距。至此，我们已经实现了小米官网上的一个商品 item 的开发。在实现阴影之前，我们可以先设置。
复制链接

扫一扫