時(shí)間：2023-07-26 17:33:01 | 來源：網(wǎng)站運(yùn)營(yíng)
時(shí)間：2023-07-26 17:33:01 來源：網(wǎng)站運(yùn)營(yíng)
制作一個(gè)簡(jiǎn)單HTML游戲網(wǎng)頁(yè)（HTML+CSS）米哈游 1頁(yè) 帶輪播圖：?> ? 源碼獲取 文末聯(lián)系 ?Web前端開發(fā)技術(shù) 描述 網(wǎng)頁(yè)設(shè)計(jì)題材，DIV+CSS 布局制作,HTML+CSS網(wǎng)頁(yè)設(shè)計(jì)期末課程大作業(yè) | 游戲官網(wǎng) | 游戲網(wǎng)站 | 電競(jìng)游戲 | 游戲介紹 | 等網(wǎng)站的設(shè)計(jì)與制作 | HTML期末大學(xué)生網(wǎng)頁(yè)設(shè)計(jì)作業(yè)，Web大學(xué)生網(wǎng)頁(yè)
在線咨詢
<!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"> <meta name="description" content="仿米游社首頁(yè)靜態(tài)頁(yè)面案例"> <meta name="keywords" content="米游社,靜態(tài)頁(yè)面,案例,float布局"> <title>原神社區(qū)-米游社</title> <link rel="shortcut icon" href="http://www.ylcp.shop/files/files/1653039741554/favicon.ico"> <link rel="stylesheet" href="css/common.css"> <link rel="stylesheet" href="css/header.css"> <link rel="stylesheet" href="css/content.css"> <link rel="stylesheet" href="css/footer.css"> <link rel="stylesheet" href="http://www.ylcp.shop/files/files/1653039741554/css/index.css"> <link rel="stylesheet" href="css/iconfont.css"> <link rel="stylesheet" href="css/swiper-bundle.min.css"></head><body> <!-- header部分開始 --> <header style="z-index: 100;"> <div class="mid"> <div class="logo"> <img src="picture/logo.png" alt="mihoyo"> <strong>米游社·原神</strong> </div> <ul class="list"> <li>首頁(yè)</li> <li>酒館</li> <li>攻略</li> <li>官方</li> <li>觀測(cè)樞</li> <li>米游鋪</li> <li>更多</li> </ul> <div class="user"> <form action="javascript:;" method="post"> <input type="text"> </form> <div class="focus">關(guān)注</div> <div class="message">消息</div> <div class="userInfo"> <a href="#"> <img src="picture/profile.png" alt="我的頭像"> </a> </div> </div> </div> </header> <!-- header部分結(jié)束 --> <!-- content部分開始 --> <div class="content clearfix"> <!-- article部分開始 --> <article> <div class="picscroll"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide"><img src="picture/banner01.jpeg" alt=""></div> <div class="swiper-slide"><img src="picture/banner02.jpeg" alt=""></div> <div class="swiper-slide"><img src="picture/banner03.png" alt=""></div> <div class="swiper-slide"><img src="picture/banner04.jpeg" alt=""></div> <div class="swiper-slide"><img src="picture/banner05.jpeg" alt=""></div> </div> <div class="swiper-pagination"></div> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> </div> </div> <ul class="articlelist"> <li> <div class="article-item-header"> <a href="#"><img src="picture/usericon.png" alt="usericon"></a> <a href="#"><span>西風(fēng)快報(bào)員</span><img src="picture/level16.png" alt=""></a> <span>11-13·官方</span> </div> <div class="article-item-body"> <a href="#"> <div class="article-item-body-title clearfix"> <h3>官方</h3> <h3>2.3新版本「皚塵與雪影」先行展示頁(yè)現(xiàn)已開啟！</h3> </div> <p class="article-item-body-content">極冰之寒令人望而卻步，生命的奧秘在其中慢慢滋長(zhǎng)…追蹤潛藏于雪幕之中的暗影，等待拂去灰燼，皚塵落定吧。>>點(diǎn)擊前往2.3新版本「皚塵與雪影」先行展示頁(yè)<< </p> <div class="article-item-body-pic"></div> </a> </div> <div class="article-item-footer"> <div class="article-item-footer-label"> <a href="#"><span>皚塵與雪影</span></a> </div> <p class="article-item-footer-details"> <span class="iconfont icon-browse"></span><span>17w+</span> <a href="#"><span class="iconfont icon-comment"></span></a><span>1250</span> <span class="iconfont icon-good"></span><span>2w+</span> </p> </div> </li> <li class="secondlist"> <div class="article-item-header"> <a href="#"><img src="picture/usericon.png" alt="usericon"></a> <a href="#"><span>西風(fēng)快報(bào)員</span><img src="picture/level16.png" alt=""></a> <span>11-13·官方</span> </div> <div class="article-item-body"> <a href="#"> <div class="article-item-body-title clearfix"> <h3>官方</h3> <h3>2.3新版本「皚塵與雪影」先行展示頁(yè)現(xiàn)已開啟！</h3> </div> <p class="article-item-body-content">極冰之寒令人望而卻步，生命的奧秘在其中慢慢滋長(zhǎng)…追蹤潛藏于雪幕之中的暗影，等待拂去灰燼，皚塵落定吧。>>點(diǎn)擊前往2.3新版本「皚塵與雪影」先行展示頁(yè)<< </p> <div class="article-item-body-pic"> <div class="article-item-body-pic-pause"></div> </div> </a> </div> <div class="article-item-footer"> <div class="article-item-footer-label"> <a href="#"><span>皚塵與雪影</span></a> </div> <p class="article-item-footer-details"> <span class="iconfont icon-browse"></span><span>17w+</span> <a href="#"><span class="iconfont icon-comment"></span></a><span>1250</span> <span class="iconfont icon-good"></span><span>2w+</span> </p> </div> </li> <li class="thirdlist"> <div class="article-item-header"> <a href="#"><img src="picture/usericon.png" alt="usericon"></a> <a href="#"><span>西風(fēng)快報(bào)員</span><img src="picture/level16.png" alt=""></a> <span>11-13·官方</span> </div> <div class="article-item-body"> <a href="#"> <div class="article-item-body-title clearfix"> <h3>官方</h3> <h3>2.3新版本「皚塵與雪影」先行展示頁(yè)現(xiàn)已開啟！</h3> </div> <p class="article-item-body-content">極冰之寒令人望而卻步，生命的奧秘在其中慢慢滋長(zhǎng)…追蹤潛藏于雪幕之中的暗影，等待拂去灰燼，皚塵落定吧。>>點(diǎn)擊前往2.3新版本「皚塵與雪影」先行展示頁(yè)<< </p> <div class="article-item-body-pic"></div> <div class="article-item-body-pic"></div> <div class="article-item-body-pic"></div> </a> </div> <div class="article-item-footer"> <div class="article-item-footer-label"> <a href="#"><span>皚塵與雪影</span></a> </div> <p class="article-item-footer-details"> <span class="iconfont icon-browse"></span><span>17w+</span> <a href="#"><span class="iconfont icon-comment"></span></a><span>1250</span> <span class="iconfont icon-good"></span><span>2w+</span> </p> </div> </li> <li> <div class="article-item-header"> <a href="#"><img src="picture/usericon.png" alt="usericon"></a> <a href="#"><span>西風(fēng)快報(bào)員</span><img src="picture/level16.png" alt=""></a> <span>11-13·官方</span> </div> <div class="article-item-body"> <a href="#"> <div class="article-item-body-title clearfix"> <h3>官方</h3> <h3>2.3新版本「皚塵與雪影」先行展示頁(yè)現(xiàn)已開啟！</h3> </div> <p class="article-item-body-content">極冰之寒令人望而卻步，生命的奧秘在其中慢慢滋長(zhǎng)…追蹤潛藏于雪幕之中的暗影，等待拂去灰燼，皚塵落定吧。>>點(diǎn)擊前往2.3新版本「皚塵與雪影」先行展示頁(yè)<< </p> <div class="article-item-body-pic"></div> </a> </div> <div class="article-item-footer"> <div class="article-item-footer-label"> <a href="#"><span>皚塵與雪影</span></a> </div> <p class="article-item-footer-details"> <span class="iconfont icon-browse"></span><span>17w+</span> <a href="#"><span class="iconfont icon-comment"></span></a><span>1250</span> <span class="iconfont icon-good"></span><span>2w+</span> </p> </div> </li> </ul> </article> <!-- article部分結(jié)束 --> <!-- aside部分開始 --> <aside> <div class="asidecommit"> <p>發(fā)布</p> <div> <a href="#" target="_blank"><button>發(fā)布帖子</button></a> <p>討論、分析、攻略、同人文</p> </div> <div> <a href="#" target="_blank"><button>發(fā)布圖片</button></a> <p>繪畫、COS、手工、表情包</p> </div> </div> <div class="download"> <div class="download-img"> <img src="picture/qrcode_ys.png" alt="QRcode"> </div> <div class="download-text"> <p>掃碼下載米游社App</p> <p>了解提瓦特最新資訊</p> </div> </div> <div class="banner"> <img src="picture/banner.jpg" alt="banner"> </div> <div class="news"> <div class="news-header"> <strong>官方資訊</strong> <a href="#"><span>更多</span></a> </div> <div class="news-body"> <div class="news-body-img"> <div class="news-body-img-info">【已開獎(jiǎng)】香菱生日活動(dòng)開啟！</div> </div> <ul class="news-list"> <li><a href="#"><span>活動(dòng)</span><span>米游幣許愿池-原神版區(qū)十一月場(chǎng)開啟！</span></a></li> <li><a href="#"><span>資訊</span><span>2.3新版本「皚塵與雪影」先行展示頁(yè)現(xiàn)已開啟！</span></a></li> <li><a href="#"><span>資訊</span><span>《原神》2.3版本「皚塵與雪影」前瞻特別節(jié)目回顧長(zhǎng)圖</span></a></li> <li><a href="#"><span>公告</span><span>「地脈移涌」活動(dòng)：「藏金之花」「啟示之花」雙倍掉落！</span></a></li> <li><a href="#"><span>公告</span><span>「角色活動(dòng)祈愿-2」（新增類型）機(jī)制說明</span></a></li> </ul> </div> </div> </aside> <!-- aside部分結(jié)束 --> </div> <!-- content部分結(jié)束 --> <!-- footer部分開始 --> <footer> <div class="main"> <div class="footer-nav"> <div class="footer-item" id="communityMap"> <p class="footer-item-title"><strong>社區(qū)地圖</strong></p> <div> <p><a href="#">酒館</a><a href="#">攻略</a></p> <p><a href="#">官方</a><a href="#">觀測(cè)樞</a></p> <p><a href="#">米游鋪</a></p> <p><a href="#">同人圖</a><a href="#">COS</a></p> <p><a href="#">硬核</a></p> </div> </div> <div class="footer-item" id="knowUs"> <p class="footer-item-title"><strong>了解我們</strong></p> <div> <p><a href="#">關(guān)于我們</a></p> <p><a href="#">加入我們</a></p> <p><a href="#">原神官網(wǎng)</a></p> <p><a href="#">米哈游官網(wǎng)</a></p> </div> </div> <div class="footer-item" id="relatedInfo"> <p class="footer-item-title"><strong>相關(guān)信息</strong></p> <div> <p><a href="#">隱私政策</a></p> <p><a href="#">米哈游社區(qū)用戶服務(wù)協(xié)議</a></p> <p><a href="#">米哈游通行證用戶服務(wù)協(xié)議</a></p> </div> </div> <div class="footer-item" id="contactUs"> <p class="footer-item-title"><strong>聯(lián)系我們</strong></p> <div> <p><a href="#">地址：杭州市徐匯區(qū)宜山路700號(hào)C4棟6層</a></p> <p><a href="#">電話：400-666-6312（每天10:00~20:00）</a></p> </div> </div> <div class="footer-item" id="QRcode"> <a href="javascript:;" target="_self"> <div> <img src="picture/qrcode_ys.png" alt=""> </div> <p>掃碼下載米游社App</p> <p>了解提瓦特最新資訊</p> </a> </div> </div> <div class="footer-copyright"> <p>? 2018 米哈游版權(quán)所有｜滬公網(wǎng)安備31010402001113號(hào) | 滬ICP備19018275號(hào)-4</p> <p>滬網(wǎng)文〔2021〕3168-216｜增值電信業(yè)務(wù)經(jīng)營(yíng)許可證：滬B2-20210555</p> <p>互聯(lián)網(wǎng)違法不良信息舉報(bào)電話：021-60371750（工作時(shí)間：每天10點(diǎn)-20點(diǎn)）｜互聯(lián)網(wǎng)違法不良信息舉報(bào)郵箱：tousu@mihoyo.com</p> <p>親愛的市民朋友，杭州警方反詐勸阻電話“962110”系專門針對(duì)避免您財(cái)產(chǎn)被騙受損而設(shè)，請(qǐng)您一旦收到來電，立即接聽。</p> <ul class="footer-license"> <li><a href="#" target="_blank"><img src="picture/license01.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="picture/license02.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="picture/license03.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="picture/license04.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="picture/license05.png" alt=""></a></li> <li><a href="#" target="_blank"><img src="picture/license06.png" alt=""></a></li> </ul> </div> </div> </footer> <!-- footer部分結(jié)束 --> <!-- js 引入swiper --> <script src="js/swiper-bundle.min.js"></script> <!-- js swiper初始化 --> <script> var swiper = new Swiper('.swiper-container', { slidesPerView: 3, spaceBetween: -245, centeredSlides: true, loop: true, pagination: { el: '.swiper-pagination', clickable: true, }, navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, // autoplay :true, }); </script></body></html>關(guān)鍵詞：簡(jiǎn)單,游戲
客戶&案例
營(yíng)銷資訊
關(guān)于我們
客戶&案例
營(yíng)銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
