效果展示
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background: #e7e5e5;
}
li{
list-style: none;
}
a{
text-decoration: none;
color: #3e3c3c;
}
.card{
margin: 50px auto;
width: 600px;
height: 400px;
background: #ffffff;
padding: 30px;
display: flex;
background: #e7e5e5;
}
.shop{
width: 150px;
height: 170px;
background: #ffffff;
}
img{
width: 150px;
padding: 7px;
}
.shop h4{
padding-left: 7px;
padding-bottom: 10px;
}
.shop span{
padding-left: 7px;
font-size: 12px;
color: rgb(255, 6, 6);
}
.shop strong{
padding-left: 7px;
font-size: 6px;
font-style:italic;
color: #959393;
}
</style>
</head>
<body>
<div class="card">
<!-- 商品栏 -->
<a href="#">
<div class="shop">
<img src="./photo/course04.png" alt="">
<h4 >安卓开发实战</h4>
<span>高级</span><strong>已观看200人</strong>
</div>
</a>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
