<!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>手机抢购小页面</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a {
text-decoration: none;
}
.nav {
width: 240px;
height: 444px;
padding: 12px 9px;
background-color: #fff;
margin: 30px auto;
}
.pictures {
width: 100%;
}
.pictures img {
width: 100%;
}
/* 单行文本溢出显示省略号 */
/* .text {
word-spacing: normal;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} */
/* 多行文本溢出显示省略号 */
.text {
font-size: 12px;
color: #666;
overflow: hidden;
text-overflow: ellipsis;
/* 弹性伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个快元素显示的文本的行数 */
-webkit-line-clamp: 2;
/* 设置或者检索伸缩盒子对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
.xiaomi {
color: rgb(233, 97, 6);
}
/* 价格 */
.price {
position: relative;
width: 100%;
height: 30px;
line-height: 30px;
margin: 10px auto;
/* background-color: pink; */
border: 1px solid red;
}
/* 秒杀价格 */
.miaosha {
position: relative;
float: left;
width: 136px;
height: 100%;
background-color:red;
text-align: center;
color: #fff;
font-weight: 700;
margin-right: 2px;
}
/* 三角 */
.miaosha i {
position: absolute;
right: 0;
top: 0;
width: 0;
height: 0;
border-color: transparent #fff transparent transparent;
border-style: solid;
border-width: 28px 21px 0 0;
}
/* 原价 */
.price::after {
content: "¥5650";
position: absolute;
height: 100%;
right: 0;
margin-right: 20px;
color: #666;
text-decoration: line-through;
/* background-color: blue; */
}
/* 进度条 前面*/
.progress-bar::before {
position: absolute;
content: "已售87%";
left: 5px;
font-size: 12px;
}
/* 大盒子*/
.progress-bar {
position: relative;
width: 100%;
height: 40px;
line-height: 40px;
/* background-color: pink; */
}
/* 进度条 */
.progress-bar .bar {
position: absolute;
border: 1px solid red;
/* 使用calc函数进行计算长度 */
width: calc(100%*0.7);
height: 28px;
border-radius: 28px;
margin-top: 6px;
/* 居中不能使用auto */
left:50%;
margin-left: -53px;
}
.progress-bar .bar .bar-in {
width: 28px;
height: 100%;
border-radius: 28px;
background-color: red;
transition: all .7s;
}
.bar:hover .bar-in {
border-radius: 28px;
width: 87%;
}
/* 抢购 */
.shopping {
width: 100%;
height: 50px;
background-color: red;
margin: 10px auto;
line-height: 50px;
text-align: center;
}
.shopping a {
color: #fff;
font: 700 20px "Microsoft YaHei";
}
</style>
</head>
<body>
<div class="nav">
<!-- 手机图片部分 -->
<div class="pictures">
<a href="http://www.xiaomi.com" target="_blank">
<img src="images/手机抢购小页面.jpg">
</a>
</div>
<!-- 文字部分 多出来的字使用省略号代替-->
<p class="text"><span class="xiaomi">小米</span> 红米 Note10 Pro 5G 智能液冷游戏芯支持NFC手机 幻青 5G版 (8G + 128G) 天机888</p>
<!-- 价格 -->
<!-- 这里我们可以使用之前的三角形盒子来做 -->
<div class="price">
<span class="miaosha">
¥1449.00
<!-- 三角形的妙用 -->
<i></i>
</span>
</div>
<!-- 下面是进度条 progress bar-->
<div class="progress-bar">
<div class="bar">
<!-- 前面的的内容可以使用content来做 -->
<div class="bar-in">
</div>
</div>
</div>
<!-- 抢购 -->
<div class="shopping">
<a href="http://www.bilibili.com" target="_blank">立即抢购</a>
</div>
</div>
</body>
</html>
下面是图片素材