主要用到div和图片,可以参考下这个代码,更多的可以自己去修改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#main{
width:250px;
height:250px;
border:1px solid silver
}
img{
height:100px;
width:95%;
padding:5px;
}
p{
margin-top:0px;
font-size:12px;
padding:5px;
}
.price{
color:tomato;
font-size:16px;
}
.yj{
padding-left:10px;
font-size:10px;
}
.qg{
border:1px solid silver;
margin-left:10px;
height:24px;
width:60px;
border-radius: 5px;
background-color: silver;
display: inline-block;
text-align:center;
line-height: 24px;
}
</style>
</head>
<body>
<div id="main">
<p>团购网</p>
<img src="./1.jpeg" alt="" width="">
<p>【69店通用】过桥米线代金券1张,无需预约,全场通用</p>
<p><span class="price">¥19.9</span> <span class="yj">原价:¥39 | 6.6折</span><span class="qg">去抢购</span></p>
</div>
</body>
</html>
除了图片部分,其他部分直接用html+css就可以完成。
图片部分根据题目,是带有切换效果的,找一个带切换效果的js就可以,或者直接用 bootstrap自带的也可以,不过需要自行调整样式成为图片的样子
最好还是自己实现的好就是布局这种很锻炼css和html
您好,我是有问必答小助手,您的问题已经有小伙伴解答了,您看下是否解决,可以追评进行沟通哦~
如果有您比较满意的答案 / 帮您提供解决思路的答案,可以点击【采纳】按钮,给回答的小伙伴一些鼓励哦~~
ps:问答VIP仅需29元,即可享受5次/月 有问必答服务,了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632