admin管理员组文章数量:1619183
📂文章目录
- 👨🎓网页题目
- ✍️网页描述
- 🌐网站效果
- 🔧 代码实现
- 🧱HTML结构代码
- 🎁更多干货
👨🎓网页题目
🎮游戏官网、⛹️游戏网站、🕹️电竞游戏、🎴游戏介绍、等网站的设计与制作。
✍️网页描述
⭐ 网页中包含：Div+CSS、鼠标滑过特效、Table、导航栏效果、banner、表单、二级三级页面等，视频音频元素，同时设计了logo（源文件），基本期末作业所需的知识点全覆盖。
🌐网站效果
🔧 代码实现
🧱HTML结构代码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英雄联盟-S11</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/style.css">
<body>
<div class="body">
<header id="header">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="global-head">
<div class="navbar-brand">
<div class="menu-list">
<a href="index.html" class="c-logo">
<img src="images/logo.png"class="logo-image"
>
</a>
<div class="c-actions">
<ul class="nav-pills">
<li>购物车 <i class="fa fa-shopping-cart fa-fw" aria-hidden="true"></i></li>
<li onClick="handleLogin()">登录 <i class="fa fa fa-user-circle fa-fw" aria-hidden="true"></i></li>
</ul>
</div>
</div>
</div>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-menu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="collapse navbar-collapse" id="navbar-menu">
<div class="menu-list">
<ul class="nav-items nav navbar-nav navbar-right">
<li class="single-link">
<a class="c--nav-link" href="javascript:void(0);">
LPL全明星周末
</a>
</li>
<li class="single-link">
<a class="c--nav-link" href="javascript:void(0);">德玛西亚杯</a>
</li>
<li class="single-link">
<a class="c--nav-link" href="javascript:void(0);">全明星赛</a>
</li>
<li class="single-link">
<a class="c--nav-link" href="javascript:void(0);">全球总决赛</a>
</li>
<li class="single-link">
<a class="c--nav-link" href="hero.html">英雄分类</a>
</li>
<li class="single-link">
<a class="c--nav-link" href="hero-detail.html">英雄详情</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
</header>
<section class="main">
<div class="primaryR1">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/swiper1.jpeg">
</div>
<div class="swiper-slide">
<img src="images/swiper2.jpeg">
</div>
<div class="swiper-slide">
<img src="images/swiper3.jpeg">
</div>
<div class="swiper-slide">
<img src="images/swiper4.jpeg">
</div>
<div class="swiper-slide">
<img src="images/swiper5.jpeg">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
</div>
</div>
</div>
</div>
<div class="primaryR2">
<div class="container">
<div class="row">
<div class="fanart-left col-md-9 col-sm-12 col-xs-12">
<div class="indexpart-show">
<div class="part-top-tab">
<h2 class="part-h2-title">FANART创作馆</h2>
<a href="hero.html" class="herf-more">
更多
<i class="fa fa-hand-o-right more-arrow" aria-hidden="true"></i>
</a>
</div>
<ul class="fanart-left-content">
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature1.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">Seraphine 佐伊</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">莫大轩</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">28</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature2.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">Zed 劫</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">Jiang</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">12</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature3.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)"> KDA阿狸，短发0.0</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">solitu</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">82</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature4.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">剑魔和凯隐</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">WENZHU</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">49</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature5.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">萨勒芬妮</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">龟龟</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">68</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature6.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">神龙尊者李青</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">不语</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">12</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature7.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">Seraphine</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">莫大轩</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">58</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
<li class="col-sm-6 col-xs-12">
<a href="javascript:void(0)">
<img src="images/feature8.jpg" alt="" class="fanart-img">
</a>
<div class="innerhover-bottom">
<h4 class="p1">
<a href="javascript:void(0)">卡莎的更衣室</a>
</h4>
<p class="p2">
<a href="javascript:void(0)" class="a1">肥皂泡</a>
<a href="javascript:void(0)" class="a2">
<i class="fa fa-hand-peace-o icon-666" aria-hidden="true"></i>
<span class="number">62</span>
<span class="tip">+1</span>
</a>
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="fanart-right col-md-3 col-sm-12 col-xs-12 ">
<div class="main-column col-md-2 col-sm-12 col-xs-12">
<img src="images/0.jpg" alt="">
<span class="p1">
<i class="fa fa-snowflake-o inline-icon-1" aria-hidden="true"></i>
精品专栏
<i class="fa fa-snowflake-o inline-icon-1" aria-hidden="true"></i>
</span>
</div>
<ul class="fanart-right-right">
</ul>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container foot_inner">
<div class="row">
<div class="col-md-5 col-xs-12 pd-10">
<div class="foot_lefts">
<a href="javascript:void(0)" class="foot_ieg_logo"></a>
<a href="javascript:void(0)" class="foot_left logo-riot"></a>
</div>
</div>
<div class="col-md-7 col-xs-12 pd-10">
<ul class="foot_links">
<li class="link_map">
<a href="javasccript:void(0)">腾讯互动娱乐</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">服务条款</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">隐私保护指引</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">儿童隐私保护指引</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">腾讯游戏客服</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">游戏列表</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">广告服务及商务合作</a>
</li>
<li class="copyright_zh">
<a href="javascript:void(0)">
腾讯公司版权所有
</a>
</li>
<li class="copyright_en">
<p class="copyright_txt">COPYRIGHT © 1998 - 2020 TENCENT. ALL RIGHTS RESERVED.</p>
<p class="copyright_txt">COPYRIGHT © 2012 Riot Games,Inc. ALL RIGHTS RESERVED.</p>
</li>
<li class="limit_age">
本网络游戏适合18+岁的用户使用；为了您的健康，请合理控制游戏时间。
</li>
<li class="copyright_public">
<a href="javasccript:void(0)">工商网监电子标识</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">粤网文[2020]3396-195号</a>
<span class="f_line">|</span>
<a href="javasccript:void(0)">（署）网出证（粤）字第054号</a>
</li>
<li class="copyright_private">
批准文号：新出审字[2011]310号
<span class="f_line">|</span>
文网进字[2011] 004号
<span class="f_line">|</span>
出版物号：ISBN 978-7-89989-145-2
<span class="f_line">|</span>
全国文化市场统一举报电话：12318
</li>
</ul>
</div>
</div>
</div>
</footer>
<div class="dialog" id="dialog">
<div class="container dialog-wrapper">
<div class="row">
<div class="col-md-12">
<div class="login-body">
<div class="purpose-row">
<h5>欢饮登录心悦会员</h5>
<div class="cur">
还没有账户?
<span>30秒注册</span>
</div>
</div>
<h5 class="login-tip">用户名/邮箱/手机号:</h5>
<input type="text" class="form-control" id="userName" />
<h5 class="login-tip">密码:</h5>
<div style="position: relative">
<input type="xxword" class="form-control" id="xxword" />
<img id="xxwordImg1" src="images/眼睛 不可见-4.png" alt="">
<img id="xxwordImg2" src="images/眼睛.png" alt="" class="active">
</div>
<div class="form-btn">
<button class="btn" type="submit" id="login_btn">登录</button>
</div>
<div class="text_tip">忘记密码?</div>
</div>
</div>
</div>
</div>
</div>
</div>
log.style.display= "block";
}
</script>
</body>
</html>
🎁更多干货
1.如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻关注我| 获取更多源码 | 优质文章】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！
3.
以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻🔥版权声明：本文标题：web前端大作业 (仿英雄联盟网站制作html css javascript) 学生dreamweaver网页设计作业 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dongtai/1728792947a1173892.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论