1.效果展示
鼠标移到这时会这块区域会出现圆角矩形边框,背景色也会发生变化
2.代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
#tb {
width: 400px;
height: 200px;
background-color: rgb(247, 251, 249);
border-radius: 15px;
margin: 50px;nm
padding: 10px;
border: 1px solid transparent;
}
img {
width: 150px;
height: 150px;
padding-top: 30px;
padding-left: 20px;
vertical-align: top;
}
.rd {
background-color: red;
color: aliceblue;
display: inline-block;
padding-right: 5px;
padding-left: 5px;
margin-right: 5px;
border-radius: 5px;
}
.nr {
display: inline-block;
width: 200px;
padding-top: 40px;
padding-left: 20px;
}
.p2 {
color: orange;
border: 1px solid orange;
width: 60px;
border-radius:6px ;
text-align: center;
margin-top: 10px;
font-size: 12px;
}
.p3 {
color: rgb(229, 76, 10);
padding-top: 30px;
font-size: 20px;
}
#tb:hover{
background-color: rgb(237, 234, 234);
border:1px solid rgb(238, 122, 5) ;
}
.w1{
font-size: 14px;
letter-spacing:2px ;
}
</style>
</head>
<body>
<div id="tb">
<img src="./淘宝.png" alt="">
<div class="nr">
<p class="p1">
<div class="rd">HOT</div><span class="w1">揽洞仍救同非姑县秦蒲李谓公羊知事是,烦。</span> </p>
<p class="p2">免费包邮</p>
<p class="p3">¥998</p>
</div>
</div>
</body>
</html>
3.代码讲解
首先设置一个盒子(border),然后再把图片和文字内容分别设置一个盒子方便后面调整位置,最后再详细设置文字颜色、背景、样式等内容。
代码的撰写,首先要注意框架的搭建,框架明晰了后面设置样式就很容易