HTML + CSS 连载 | 21 - 盒子模型小米（下）一、实现小米官网首页的商品 item 第五步：增加商品描述并
一、实现小米官网首页的商品 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 的开发。
转载自:https://juejin.cn/post/7294454930395725858