这是一个简单的HTML期末作业，下面是网页效果图和代码
登录页面的
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {
/*整体背景图片*/
background-image: url("images/deng6.jpeg");
background-repeat: no-repeat;
background-size: cover;
}
fieldset {
width: 400px;
height: 200px;
}
.bordered {
/*登录界面的边框*/
width: 250px;
height: 320px;
margin-top: 100px;
margin-left:50px;
}
.deng {
/*登录界面位置定位*/
margin-right: 100px;
}
.font {
color: white;
font-size: 20px;
font-weight: bolder;
}
.btn-bottm{
width: 120px;
margin: auto;
}
</style>
<link href="导航栏.css" rel="stylesheet" type="text/css">
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<!--链接导航栏-->
</head>
<body>
<!--导航栏-->
<ul>
<li><a href="登录界面.html"><i>登录</i></a></li>
<li><a href="冠军队伍.html">冠军队伍</a></li>
<li><a href="往期回顾.html">往期回顾</a></li>
<li><a href="阵容英雄.html">阵容英雄</a></li>
<li><a href="关于.html">关于</a></li>
</ul>
<body align="center">
<!--登录框-->
<div class="bordered">
<form>
<div class="form-group">
<label for="exampleInputEmail1">账号</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入账号">
</div>
<div class="form-group">
<label for="exampleInputPassword1">密码</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入密码">
</div>
<div class="btn-bottm">
<button type="submit" class="btn btn-default">登录</button>
<button type="submit" class="btn btn-default">注册</button>
</div>
</form>
</div>
</body>
</body>
</html>
关于页面
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
body {
/*背景图片*/
background-image: url("images/bg2.jfif");
background-size: cover;
background-repeat: no-repeat;
}
.bg1 {
/*整体盒子样式*/
width: 100%;
height: 730px;
float: left;
border: #000000 2px solid;
}
.bg2 {
/*意见栏定位*/
width: 450px;
height: 600px;
border: #000000 0px solid;
position: relative;
float: right;
top: -390px;
margin-right: 20px;
}
.p {
/*标题样式*/
font-family: 微软雅黑;
font-size: 20px;
text-indent: 2em;
}
.p1 {
/*正文样式*/
font-family: 微软雅黑;
font-size: 20px;
text-indent: 2em;
}
</style>
<!--导航栏-->
<link href="导航栏.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="bg1">
<!--调用整体样式-->
<ul>
<!--调用导航栏-->
<li><a href="登录界面.html"><i>登录</i></a></li>
<li><a href="冠军队伍.html">冠军队伍</a></li>
<li><a href="往期回顾.html">往期回顾</a></li>
<li><a href="阵容英雄.html">阵容英雄</a></li>
<li><a href="关于.html">关于</a></li>
</ul>
<!--正文内容-->
<p class="p"><b style="font-size: 40px; color: white;">英雄联盟全球总决赛</b>（League Of Legends World
Championship，简称Worlds）<br>是英雄联盟一年一度的最为盛大的比赛，同时全球总决赛也是所有英雄联盟赛事中最高荣誉、最高含金量、<br>最高竞技水平、最高知名度的比赛。</p>
<p class="p1">全球总决赛迄今为止已经举办了S1-S11 [100] （“S”即Season，意为赛季）十一届 [101]
的比赛。<br>总决赛一般在每年10月-11月开赛，参赛者均是来自各大赛区最顶尖水平的战队，只有在每一年职业联赛<br>中表现出色的队伍才有资格参赛；每个赛区根据规模和水平决定其在总决赛当中的名额 。</p>
<p class="p1">
全球12个赛区及联赛分别是：中国大陆地区LPL、韩国LCK、欧洲LEC、北美洲LCS、独联体LCL、巴<br>西CBLOL、中国港澳台地区和东南亚PCS、拉丁美洲LLA、土耳其TCL、大洋洲LCO、日本LJL、越南VCS。
</p>
<p class="p1">北京时间2021年11月7日凌晨，LPL赛区战队EDG电子竞技俱乐部以3：2战胜韩国LCK赛区战队DK，<br>获得2021年英雄联盟全球总决赛冠军。</p>
<div class="bg2">
<!--意见栏-->
<table width="450" height="600" border="1">
<tbody>
<tr>
<td colspan="2" class="p1">意见反馈</td>
</tr>
<tr>
<td class="p1">您的性别：</td>
<td>
<p>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_0">
男</label>
<label>
<input type="radio" name="RadioGroup1" value="单选" id="RadioGroup1_1">
女</label>
<br>
</p>
</td>
</tr>
<tr>
<td class="p1">您的邮箱：</td>
<td><input type="email"></td>
</tr>
<tr>
<td class="p1">您的电话：</td>
<td><input type="text" name="phohe"></td>
</tr>
<tr>
<td class="p1">您最喜欢哪个网页：</td>
<td><select>
<option value="volvo">登录界面</option>
<option value="saab">战队简介</option>
<option value="fiat">往期回顾</option>
<option value="hero">阵容英雄</option>
<option value="audi">关于</option>
</select>
</td>
</tr>
<tr>
<td class="p1">您的其他改进意见：</td>
<td class="p1"><textarea name="text" rows="5">改进意见：</textarea></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交">
<input type="reset" value="重置">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>冠军队伍
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled-2</title>
<style type="text/css">
.table{/*表格样式*/
font-size: 30px;
font-weight: 800;
font-family:"abril-fatface";
color:#000000
}
.p{/*标题字体样式*/
font-family:微软雅黑;
font-size:10;
}
.a{/*正文字体样式*/
font-family:微软雅黑;
font-size:50px;
}
body{/*页面背景图片样式*/
background:url("images/bj.jpg");
background-repeat: no-repeat;
background-size: cover;
}
</style>
<link href="导航栏.css" rel="stylesheet" type="text/css"><!--导航栏链接-->
</head>
<body>
<ul><!--导航栏-->
<li><a href="登录界面.html"><i>登录</i></a></li>
<li><a href="冠军队伍.html">冠军队伍</a></li>
<li><a href="往期回顾.html">往期回顾</a></li>
<li><a href="阵容英雄.html">阵容英雄</a></li>
<li><a href="关于.html">关于</a></li>
</ul>
<table width="100%" border="0">
<tbody>
<tr>
<td colspan="5">
<img src="images/6.png" width="357" height="282" align="left" hspace="5" vspace="5">
<p class="a"><b>EDG</b></p>
<!--正文介绍-->
<p class="p"><br>EDWARDGAMING<br>EDWARD GAMING（简称：EDG）电子竞技俱乐部于2013年9月13日正式成立，旗下拥有多个分部，是国内最具实力的综合性电子竞技俱乐部之一。 在英雄联盟职业联赛（LPL）中，EDG共五次获得联赛冠军，是目前唯一一支斩获三连冠的队伍；德玛西亚杯中EDG斩获六次冠军奖杯，有着“六冠王”的美誉；2015年EDG夺得第一届英雄联盟季中冠军赛（MSI）的总冠军；连续五年代表LPL征战LOL全球总决赛。2021赛季，EDG英雄联盟分部组建全新强力阵容，传奇选手明凯Clearlove重回选手阵容，将向英雄联盟新的荣耀发起冲击！</p>
<table width="100%" border="0">
<tbody>
<tr><!--任务图片-->
<td><img src="images/p1.png" width="220" height="220" alt=""/></td>
<td><img src="images/p2.png" width="220" height="220" alt=""/></td>
<td><img src="images/p3.png" width="220" height="220" alt=""/></td>
<td><img src="images/p4.png" width="220" height="220" alt=""/></td>
<td><img src="images/p5.png" width="220" height="220" alt=""/></td>
</tr>
<tr><!--任务介绍-->
<td >Flandre<br>真名：李炫君<br>EDG上单选手</td>
<td>Jiejie<br>真名：赵礼杰<br>EDG打野选手</td>
<td>Scout<br>真名：Lee Ye-chan (이예찬)<br>EDG中单选手</td>
<td>Viper<br>真名：Park Do-hyeon (박도현)<br>EDGAD选手</td>
<td>Meiko<br>真名：田野<br>EDG辅助选手</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</body>
</html>
往期回顾
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
*{
color: #111111;
}
.ui-timeLine>.item {/*文字框文字样式*/
width: 100%;
display: block;
position: relative;
text-align: justify;
word-break: break-all;
padding-left: 50px;
padding-right: 10px;
}
.ui-timeLine .line, .ui-timeLine>.activeLine {/*时间线轴文字框定位*/
position: absolute;
left: 29px;
width: 4px;
height: 100%;
background-color: #eee;
}
.ui-timeLine .dot {/*时间线轴定位*/
z-index: 100;
display: inline-block;
position: absolute;
left: 25px;
top: 0;
padding: 3px;
border: 3px solid #eee;
border-radius: 20px;
background-color: #fff;
box-shadow: 3px 3px 8px #ccc;
}
/*文字框样式设置*/
.ui-timeLine .active {
border: 3px solid rgba(132, 43, 171, .8);
}
.ui-timeLine>.item>.box {
padding: 5px 0;
}
.ui-timeLine>.item .cbox {/*文字框背景设置*/
display: flex;
align-items: center;
position: relative;
padding: 10px;
border-radius: 10px;
box-shadow: 3px 3px 8px #ccc;
background-image: linear-gradient(45deg, rgba(0, 200, 255, 0.4) 0%, rgba(132, 43, 171, 0.4) 100%);
}
.ui-timeLine>.item .cbox>div{
margin:0 10px;
color: #FFFFFF;
}
.imageContent img{/*图片样式*/
width: 200px;height: 200px;
border-radius: 50%;
}
</style>
<link href="导航栏.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul><!--导航栏-->
<li><a href="登录界面.html"><i>登录</i></a></li>
<li><a href="冠军队伍.html">冠军队伍</a></li>
<li><a href="往期回顾.html">往期回顾</a></li>
<li><a href="阵容英雄.html">阵容英雄</a></li>
<li><a href="关于.html">关于</a></li>
</ul>
<div class="ui-timeLine"><!--调用时间线轴-->
<a class="item"><!--调用文字框-->
<div class="line"></div><!--连接两个时间点-->
<div class="dot active"></div><!--时间圆点-->
<div class="box">
<div class="cbox"><!--文字框-->
<div class="imageContent"><!--调用图片样式-->
<img src="images/s1.jpg">
</div>
<div>
<div>S1:漠然无觉</div>
<div>比赛时间：2011.6.18-6.20<br>比赛地点：瑞典延雪平<br>参赛队伍：Fnatic（欧洲）aAa（欧洲）Gamed!de（欧洲）EG（北美）TSM（北美）CLG（北美）Team xan（新加坡）Pacific（菲律宾）<br>比赛结果：来自欧洲的Fnatic战队在淘汰赛最终战胜aAa获得冠军，TSM和EG分获季军和殿军。<br>S1总决赛主题曲——《Numb》</div>
</div>
</div>
</div>
</ a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s2.jpg">
</div>
<div>
<div>S2:银色的飘带</div>
<div>比赛时间：2012.10.5-10.14<br>比赛地点：美国洛杉矶<>br参赛队伍：欧洲:M5/CLG.EU/SK 北美:TSM/DIG/CLG.NA 中国:WE/IG 韩国:NJS/AZF 东南亚:TPA/SAJ<br>比赛结果：TPA战队以3比1击败AZF斩获冠军<br>S2总决赛主题曲——《Silver Scrapes》</div>
</div>
</div>
</div>
</ a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s3.jpg">
</div>
<div>
<div>S3:混沌世界</div>
<div>比赛时间：2013.9.16-10.5<br>比赛地点：美国洛杉矶<br>参赛队伍：欧洲:FNC/LD/GMB 北美:C9/TSM/VL 中国:RYL/OMG 韩国:NJS/SSO/SKT 东南亚:GAB/MSK 国际外卡:GG.EU<br>比赛结果：SKT战队以3比0击败PYL斩获第一次世界冠军<br>S3总决赛主题曲——《Hybrid Worlds》</div>
</div>
</div>
</div>
</ a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s4.jpg">
</div>
<div>
<div>S4:无惧的勇士</div>
<div>比赛时间：半决赛/决赛：2014.10.11-19<br>比赛地点：首尔-半决赛/决赛<br>参赛队伍：欧洲:ALL/FNC/SK北美:TSM/C9/LMQ中国:EDG/SHR/OMG韩国:SSB/SSW/NJWS港澳台:AHQ/TPA国际外卡:DP/KBM<br>比赛结果：皇族战队以1比3落败SSW三星<br>S4总决赛主题曲——《Warriors》</div>
</div>
</div>
</div>
</ a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s5.jpg">
</div>
<div>
<div>S5:决战在即</div>
<div>比赛时间：决赛：2015.10.31<br>比赛地点：柏林（德国）-决赛<br>参赛队伍：欧洲：FNC/H2K/OG 北美：CLG/TSM/C9 中国：LGD/EDG/IG 韩国：SKT/KOO/KT 港澳台：AHQ/FW 国际外卡：PNG/BKT<br>比赛结果：SKT战队拿下第二个世界冠军<br>S5总决赛主题曲——《Worlds Collide》</div>
</div>
</div>
</div>
</ a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s6.jpg">
</div>
<div>
<div>S6:英雄心</div>
<div>比赛时间：决赛：2016.10.29<br>比赛地点：美国洛杉矶-决赛<br>参赛队伍：欧洲:G2/H2K/SPY 北美:TSM/CLG/C9 中国:EDG/RNG/IM 韩国:ROX/SKT/SSG 港澳台:FW/AHQ 国际外卡:INTZ/ANX<br>比赛结果：SSG对SKT的冠军赛铸就SKT三冠霸业<br>S6总决赛主题曲——《Ignite》</div>
</div>
</div>
</div>
</a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s7.jpg">
</div>
<div>
<div>S7:传奇永不熄</div>
<div>比赛时间：决赛：2017.11.4<br>比赛地点：中国北京-决赛<br>参赛队伍：欧洲:G2/MSF/FNC 北美:TSM/IMT/C9 中国:EDG/RNG/WE 韩国:LZ/SKT/SSG 港澳台:FW/AHQ/HKA 东南亚:GAM/YG 土耳其:FB 日本:RPG<br> 拉丁美洲南:KLG 拉丁美洲北:LYN巴西:ONE 独联体:GMB 大洋洲:DW<br>比赛结果：SSG打败SKT取得冠军奖杯<br>S7总决赛主题曲——《Legends Never Die》</div>
</div>
</div>
</div>
</a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s8.jpg">
</div>
<div>
<div>S8:登峰造极境</div>
<div>比赛时间：决赛：2018.11.3<br>比赛地点：韩国仁川-决赛<br>参赛队伍：欧洲:FNC/VIT/G2北美:TL/100T/C9中国:RNG/IG/EDG韩国:KT/AFS/GEN港澳台:FW/MAD/GRX东南亚:ASC土耳其:SUP日本:DFM<br> 拉丁美洲南:KLG拉丁美洲北:INF巴西:KBM独联体:GMB大洋洲:DW越南:PVB<br>比赛结果：LPL赛区战队IG3:0战胜了来自欧洲LCS赛区的FNC战队获得了本次全球总决赛冠军，这是全球总决赛历史上首个由LPL赛区获得的冠军<br>S8总决赛主题曲——《RISE》</div>
</div>
</div>
</div>
</a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/s9.jpg">
</div>
<div>
<div>S9:涅槃</div>
<div>比赛时间：决赛：2019年11月10日<br>比赛地点：巴黎（法国）-决赛<br>参赛队伍：欧洲:G2/FNC/SPY 北美:TL/C9/CG 中国:FPX/RNG/IG 韩国:SKT/GRF/DWG 港澳台:JT/AHQ/HKA 越南:GAM/LK 东南亚:MG<br> 土耳其:RYL 日本:DFM 拉丁美洲:ISG 巴西:FLA 独联体:UOL 大洋洲:MMM<br>比赛结果：2019年11月10日，FPX战队3：0战胜G2战队获得冠军。<br>S9总决赛主题曲——《Phoenix》</div>
</div>
</div>
</div>
</a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/S10.webp">
</div>
<div>
<div>S10:所向无前</div>
<div>比赛时间：决赛：2020年10月31日<br>比赛地点：中国上海-决赛<br>参赛队伍：欧洲:FNC/G2/RGE/MAD/UOL 北美:TS M/TL/FLY 中国:TES/JDG/SN/LGD 韩国:Gen.G/DWG/DRX 港澳台:MCX/PSG 巴西：INTZ 土耳其:SUP 日本:V3<br> 拉丁美洲:R7 大洋洲:LGC<br>比赛结果：DWG战队以3:0打败SN战队<br>S10总决赛主题曲——《Take Over》</div>
</div>
</div>
</div>
</a>
<a class="item">
<div class="line"></div>
<div class="dot active"></div>
<div class="box">
<div class="cbox">
<div class="imageContent">
<img src="images/1.jpg">
</div>
<div>
<div>S11:不破不立</div>
<div>比赛时间：决赛：2021.11.6<br>比赛地点：冰岛雷克雅未克-决赛<br>参赛队伍：欧洲:RGE/MAD/FNC 北美:100T/TL/C9 中国:FPX/EDG/RNG/LNG 韩国:DK/GEN.G/T1/HLE 港澳台:BYG/PSG 墨西哥：INF 大洋洲：PCE 土耳其：GS<br> 日本：DFM 巴西：RED 独联体：UOL<br>比赛结果：EDG逆风翻盘3:2险胜DK<br>S11总决赛主题曲——《不可阻挡》</div>
</div>
</div>
</div>
</a>
</div>
</body>
</html>
阵容英雄
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
ul {
/*列表背景设置*/
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
font-family: 微软雅黑;
font-size: 20px;
color: #000000;
}
li {
/*列表定位*/
float: left;
margin-right: 100px;
}
li a {
/*列表文字样式*/
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
/*鼠标点击样式*/
background-color: #ddd;
}
body {
/*背景图片*/
background-image: url("images/10.jfif");
background-size: cover;
}
.a {
/*表格文字*/
font-family: 方正粗黑宋简体;
}
.b {
/*弹出框文字样式*/
font-family: 微软雅黑;
font-size: 40px;
font-weight: 200px;
}
.c {
/*视频位置定位*/
position: relative;
top: -500px;
float: right;
margin-right: 350px;
}
/* 左边文字导航 */
.left-cheek {
/* border: 1px solid black; */
width: 1200px;
margin-top: 100px;
position: relative;
}
.div-wenzi{
margin: 30px;
}
.div-video{
float: right;
position: absolute;
top: -50px;
left:250px;;
}
</style>
<script type="text/ecmascript">
function openNav1() {
/*打开弹出框*/
document.getElementById("mySidenav1").style.width = "750px";
}
function closeNav1() {
/*关闭弹出框*/
document.getElementById("mySidenav1").style.width = "0"
}
function openNav2() {
document.getElementById("mySidenav2").style.width = "750px";
}
function closeNav2() {
document.getElementById("mySidenav2").style.width = "0"
}
function openNav3() {
document.getElementById("mySidenav3").style.width = "750px";
}
function closeNav3() {
document.getElementById("mySidenav3").style.width = "0"
}
function openNav4() {
document.getElementById("mySidenav4").style.width = "750px";
}
function closeNav4() {
document.getElementById("mySidenav4").style.width = "0"
}
function openNav5() {
document.getElementById("mySidenav5").style.width = "750px";
}
function closeNav5() {
document.getElementById("mySidenav5").style.width = "0"
}
</script>
<link href="侧边栏.css" rel="stylesheet" type="text/css">
</head>
<body>
<ul>
<!--导航栏-->
<li><a href="登录界面.html"><i>登录</i></a></li>
<li><a href="冠军队伍.html">冠军队伍</a></li>
<li><a href="往期回顾.html">往期回顾</a></li>
<li><a href="阵容英雄.html">阵容英雄</a></li>
<li><a href="关于.html">关于</a></li>
</ul>
<div class="left-cheek">
<div class="div-wenzi">
<div id="mySidenav1" class="sidenav">
<!--调用弹出框-->
<a href="javascript:void(0)" class="closebtn" onclick="closeNav1()">×</a>
<!--设置关闭弹出框样式-->
<div class="imageContent">
<a><img src="images/亚索.jpg"><br>    亚索</a>
<a><img src="images/格雷福斯.jpg"><br>   格雷福斯</a>
<a><img src="images/艾瑞莉娅.jpg"><br>   艾瑞莉娅</a>
<a><img src="images/古拉加斯.jpg"><br>   古拉加斯</a>
<a><img src="images/杰斯.jpg"><br>    杰斯</a>
<a><img src="images/格温.jpg"><br>    格温</a>
<a><img src="images/凯南.jpg"><br>    凯南</a>
</div>
</div>
<span style="font-size:50px;cursor:pointer;font-family:方正粗黑宋简体" onclick="openNav1()">上单</span>
<!--设置打开弹出框样式-->
</div>
<div class="div-wenzi">
<div id="mySidenav2" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav2()">×</a>
<div class="imageContent">
<a><img src="images/赵信.jpg"><br>    赵信</a>
<a><img src="images/嘉文.jpg"><br>   嘉文四世</a>
<a><img src="images/奇亚娜.jpg"><br>   奇亚娜</a>
<a><img src="images/李青.jpg"><br>    李青</a>
<a><img src="images/泰隆.jpg"><br>    泰隆</a>
<a><img src="images/佛耶戈.jpg"><br>   佛耶戈</a>
<a><img src="images/特朗德尔.jpg"><br>   特朗德尔</a>
</div>
</div>
<span style="font-size:50px;cursor:pointer;font-family:方正粗黑宋简体" onclick="openNav2()">打野</span>
</div class="div-wenzi">
<div class="div-wenzi">
<div id="mySidenav3" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav3()">×</a>
<div class="imageContent">
<a><img src="images/乐芙兰.jpg"><br>   乐芙兰</a>
<a><img src="images/瑞兹.jpg"><br>   瑞兹</a>
<a><img src="images/马尔扎哈.jpg"><br>   马尔扎哈</a>
<a><img src="images/塞拉斯.jpg"><br>   塞拉斯</a>
<a><img src="images/崔斯特.jpg"><br>   崔斯特</a>
<a><img src="images/奥莉安娜.jpg"><br>   奥莉安娜</a>
<a><img src="images/佐伊.jpg"><br>    佐伊</a>
<a><img src="images/辛德拉.jpg"><br>   辛德拉</a>
</div>
</div>
<span style="font-size:50px;cursor:pointer;font-family:方正粗黑宋简体" onclick="openNav3()">中单</span>
</div>
<div class="div-wenzi">
<div id="mySidenav4" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav4()">×</a>
<div class="imageContent">
<a><img src="images/吉格斯.jpg"><br>   吉格斯</a>
<a><img src="images/烬.jpg"><br>    烬</a>
<a><img src="images/卡莎.jpg"><br>    卡莎</a>
<a><img src="images/厄斐琉斯.jpg"><br>  厄斐琉斯</a>
<a><img src="images/卢锡安.jpg"><br>   卢锡安</a>
</div>
</div>
<span style="font-size:50px;cursor:pointer;font-family:方正粗黑宋简体" onclick="openNav4()">ADC</span>
</div>
<div class="div-wenzi">
<div id="mySidenav5" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav5()">×</a>
<div class="imageContent">
<a><img src="images/洛.jpg"><br>    洛</a>
<a><img src="images/基兰.jpg"><br>    基兰</a>
<a><img src="images/蕾欧娜.jpg"><br>   蕾欧娜</a>
<a><img src="images/布隆.jpg"><br>    布隆</a>
<a><img src="images/娜美.jpg"><br>    娜美</a>
<a><img src="images/璐璐.jpg"><br>    璐璐</a>
</div>
</div>
<span style="font-size:50px;cursor:pointer;font-family:方正粗黑宋简体" onclick="openNav5()">辅助</span>
</div>
<div class="div-video">
<video width="800px" height="500px" controls loop>
<source src="images/视频.mp4" type="video/mp4">
</video>
</div>
</div>
<!-- <table width="100" border="1px">
<tbody>
<tr>
<td>
<table height="450" width="200" border="1px" style="margin-top: 100px">
<tbody>
<tr>
<td width="100">
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</td>
<td>
</tr>
</tbody>
</table>
-->
</body>
</html>
css样式
@charset "utf-8";
/* CSS Document */
body {
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
right: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
float:left;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover, .offcanvas a:focus{
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
.imageContent img{
width: 150px;
height: 150px;
border-radius: 50%;
margin-left: 30px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
@charset "utf-8";
/* CSS Document */
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid #e7e7e7;
background-color: #f3f3f3;
font-family: 微软雅黑;
font-size: 20px;
color: #000000;
}
li {
float: left;
margin-right: 100px;
}
li a {
display: block;
color: #666;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #ddd;
}
li a.active {
color: white;
background-color: #4CAF50;
}
以上图片都是网上寻找的，大家也可以根据自己的喜好添加哦，同时感兴趣也可以加博主的QQ3251312632，大家一起探讨哈！
5287
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
