「英雄联盟主题网页」
链接：https://pan.quark.cn/s/d83e4d3414ee链接：https://pan.quark.cn/s/d83e4d3414ee
链接：https://pan.quark.cn/s/d83e4d3414ee
之前代做的大作业（doge），全部放出来，放着也是吃灰~
纯搬砖，技术力很差，天天耕地，在代码的田野里，干就完了！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>首页 </title> </head> <body> <nav class="navbar navbar-expand-lg fixed-top"> <div class="container"> <a class="navbar-brand" href="index.html"> <img src="images/logo.png" alt="英雄联盟"> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav ms-auto"> <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li> <li class="nav-item"><a class="nav-link" href="champions.html">英雄</a></li> <li class="nav-item"><a class="nav-link" href="skins.html">皮肤</a></li> <li class="nav-item"><a class="nav-link" href="lore.html">宇宙</a></li> <li class="nav-item"><a class="nav-link" href="esports.html">电竞</a></li> <li class="nav-item"><a class="nav-link" href="modes.html">玩法</a></li> </ul> </div> </div> </nav> <main> <section class="hero-carousel mb-5 fade-in-scroll"> <div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel"> <div class="carousel-indicators"> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button> <button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button> </div> <div class="carousel-inner"> <div class="carousel-item active"> <div class="image-container" style="height: 500px;"> <img src="images/111.jfif" class="d-block w-100" alt="..."> </div> <div class="carousel-caption d-none d-md-block"> <h5></h5> <p></p> <a href="#" class="btn btn-primary">了解更多</a> </div> </div> <div class="carousel-item"> <div class="image-container" style="height: 500px;"> <img src="images/222.jfif" class="d-block w-100" alt="..."> </div> <div class="carousel-caption d-none d-md-block"> <h5></h5> <p></p> <a href="#" class="btn btn-outline-secondary">查看详情</a> </div> </div> </div> <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </button> <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </button> </div> </section> <section class="news-section container my-5 fade-in-scroll"> <h2 class="text-center mb-4">最新资讯</h2> <div class="row row-cols-1 row-cols-md-3 g-4"> <div class="col"> <div class="card h-100"> <div class="image-container card-img-top" style="height: 180px;"> <img src="images/activity-img2.png" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">灵魂莲华通行证</h5> <p class="card-text " style="color: #d8caca;">参与灵魂莲华赛季通行证</p> <a href="#" class="btn btn-sm btn-outline-secondary">前往参与</a> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="image-container card-img-top" style="height: 180px;"> <img src="images/activity-img3.png" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">莲华祈愿</h5> <p class="card-text " style="color: #d8caca;">首次祈愿仅需6元</p> <a href="#" class="btn btn-sm btn-outline-secondary">前往参与</a> </div> </div> </div> <div class="col"> <div class="card h-100"> <div class="image-container card-img-top" style="height: 180px;"> <img src="images/activity-img8.png" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">绽灵夺宝</h5> <p class="card-text " style="color: #d8caca;">十次夺宝100%获取一款皮肤</p> <a href="#" class="btn btn-sm btn-outline-secondary">前往参与</a> </div> </div> </div> </div> </section> <section class="featured-content container my-5 fade-in-scroll"> <h2 class="text-center mb-4">精选英雄与皮肤</h2> <div class="row row-cols-1 row-cols-sm-2 row-cols-lg-4 g-4"> <div class="col"> <div class="card h-100 text-center"> <div class="image-container card-img-top image-contain" style="height: 500px;"> <img src="images/aaa.jpg" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">灵魂莲华 </h5> <p class="card-text " style="color: #d8caca;">瑟提</p> <a href="champions.html#[英雄ID]" class="btn btn-outline-secondary btn-sm">查看皮肤</a> </div> </div> </div> <div class="col"> <div class="card h-100 text-center"> <div class="image-container card-img-top image-contain" style="height: 500px;"> <img src="images/bbb.jpg" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">灵魂莲华 </h5> <p class="card-text " style="color: #d8caca;">辛德拉</p> <a href="skins.html#[皮肤ID]" class="btn btn-outline-secondary btn-sm">查看皮肤</a> </div> </div> </div> <div class="col"> <div class="card h-100 text-center"> <div class="image-container card-img-top image-contain" style="height: 500px;"> <img src="images/ccc.jpg" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">灵魂莲华 </h5> <p class="card-text " style="color: #d8caca;">阿狸</p> <a href="skins.html#[皮肤ID]" class="btn btn-outline-secondary btn-sm">查看皮肤</a> </div> </div> </div> <div class="col"> <div class="card h-100 text-center"> <div class="image-container card-img-top image-contain" style="height: 500px;"> <img src="images/ddd.jpg" class="card-img-top" alt="..."> </div> <div class="card-body"> <h5 class="card-title">灵魂莲华 </h5> <p class="card-text " style="color: #d8caca;">瑞雯</p> <a href="skins.html#[皮肤ID]" class="btn btn-outline-secondary btn-sm">查看皮肤</a> </div> </div> </div> </div> </section> </main> <footer class="mt-auto py-3"> <div class="container"> <p>© 2023 英雄联盟主题网站 (学习作品)</p> </div> </footer> </body> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.7/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="js/script.js"></script> </html>
扫一扫
2198
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
