题目
1、模仿某电商首页的“逛好店”(样式使用引入链接方式),效果如下图所示。其中标题右侧的箭头的交互效果为:默认显示空心红箭头,鼠标移入后变成红色背景的白箭头。
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>仿京东的逛好店</title> <link href="1.css" type="text/css" rel="stylesheet"> </head> <body> <div class="top"> <ul> <li class="top1"> <div class="top1-left a" >逛好店</div> <div class="top1-right"></div> </li> <li class="top2"> <div class="top2-left"></div> <ul> <li class="one a"> 贝恩施京东自营官方 </li> <li class="a"> 旗舰店 </li> <li class=" top-left-box"> 自营 </li> <li class="a tip"> 277.9万人关注 </li> </ul> <div class="top2-right "> </div> </li> <li class="top3"> <div class="top3-left"> <ul> <li class="a one"> 美宝莲京东自营官方 </li> <li class="a"> 旗舰店 </li> <li class="top-left-box"> 自营 </li> <li class="a b tip"> 192.2万人关注 </li> </ul> </div> <div class="top3-right"> </div> </li> </ul> </div> </body> </html>
CSS
body{ padding:20px; margin: 0; padding: 0; background-color: rgba(220, 235, 249, 0.737); } .a{ padding-left: 10px; } .b{ margin-top: 20px; } .tip{ color: #0a0909; opacity: 0.4; } .top-left-box{ margin-left: 10px; width:42px; height:30px; padding-left: 3px; padding-right: 2px; border:1px #f00606 solid; color: #f00606; margin-top: 8px; margin-bottom: 20px; } .top{ width: 420px; height:460px; padding:20px; margin:10% 30% 10%; background:rgb(249, 249, 249); box-shadow: 0 0 15px rgb(0, 0, 0); } ul,li{ list-style:none; margin: 0; padding: 0; } li{ font-size: 20px; } .one{ margin-top:10px; } .top1{ display:flex; } .top1-right{ width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #f00606; margin-top: 20px; cursor:pointer; } .top1 .top1-right:hover{ width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #9b8282; margin-top: 20px; } .top1-left{ width: 140px; display:inline; font-size: 40px; font-weight:bolder; } .top2{ margin-top: 20px; display: flex; width: 420px; height:180px; background-color:LavenderBlush; border-radius: 10px; opacity: 0.7; } .top .top2 .top2-right{ width: 160px; height: 150px; margin-top:15px; margin-left:55px; max-width: 100%; background: url(./img/1.jpg); //自行修改为自己的图片地址:url(自己的图片地址); } .top3{ display: flex; margin-top: 20px; width: 420px; height:180px; background-color:LightGrey; border-radius: 10px; opacity: 0.7; } .top .top3 .top3-right{ width: 160px; height: 150px; margin-top:15px; margin-left:55px; max-width: 100%; background: url(./img/2.jpg); //自行修改为自己的图片地址:url(自己的图片地址); }
运行结果
仿京东的逛好店(HTML+CSS)
于 2023-12-31 16:44:35 首次发布