代码:
<!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>Document</title> <!-- 引入ico图标 --> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <!-- 第三方资源库 --> <link rel="stylesheet" href="./lib/iconfont/iconfont.css"> <!-- 引入css文件 --> <link rel="stylesheet" href="./css/index.css"> </head> <body> <!-- 轮播图 banner --> <div class="banner"> <img src="./uploads/banner_1.png" alt=""> </div> <!-- 活动 --> <div class="active"> <h3>乐园活动</h3> <ul> <li> <a href="javascript:;"> <img src="./uploads/item_3.png" alt=""> <div class="info"> <div class="desc"> <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p> <span>免费</span> </div> <div class="time"> <span>200人已报名</span> <span>本周六开始</span> </div> </div> <!-- 两个定位 --> <div class="ing">进行中</div> <div class="collect"> <img src="./uploads/heart.png" alt=""> </div> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/item_3.png" alt=""> <div class="info"> <div class="desc"> <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p> <span>免费</span> </div> <div class="time"> <span>200人已报名</span> <span>本周六开始</span> </div> </div> <!-- 两个定位 --> <div class="ing">进行中</div> <div class="collect"> <img src="./uploads/heart.png" alt=""> </div> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/item_3.png" alt=""> <div class="info"> <div class="desc"> <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p> <span>免费</span> </div> <div class="time"> <span>200人已报名</span> <span>本周六开始</span> </div> </div> <!-- 两个定位 --> <div class="ing">进行中</div> <div class="collect"> <img src="./uploads/heart.png" alt=""> </div> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/item_3.png" alt=""> <div class="info"> <div class="desc"> <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p> <span>免费</span> </div> <div class="time"> <span>200人已报名</span> <span>本周六开始</span> </div> </div> <!-- 两个定位 --> <div class="ing">进行中</div> <div class="collect"> <img src="./uploads/heart.png" alt=""> </div> </a> </li> <li> <a href="javascript:;"> <img src="./uploads/item_3.png" alt=""> <div class="info"> <div class="desc"> <p>疯狂的红包 不一样的撕名牌 大型家庭亲子户外活动</p> <span>免费</span> </div> <div class="time"> <span>200人已报名</span> <span>本周六开始</span> </div> </div> <!-- 两个定位 --> <div class="ing">进行中</div> <div class="collect"> <img src="./uploads/heart.png" alt=""> </div> </a> </li> </ul> </div> <!-- 底部 --> <footer> <a href="#">首页</a> <a href="#">卡券</a> <a href="#">我的</a> </footer> <!-- flexible.js --> <script src="./js/flexible.js"></script> </body> </html>
效果图: