目录
布局
完成一个网页首先要有大致的布局
内容
顶部导航栏
主要是通过一个一级列表和一个二级列表来实现
鼠标移入一级列表时，二级列表开始显示。
<div class="top">
<ul class="topline" >
<li class="topline1"><a href="#"><img src="https://game.gtimg.cn/images/lol/v3/logo-public.png"></a></li>
<li class="toplines"><a href="#">游戏资料</a>
<ul class="topline0">
<li>
<a href="#">游戏下载</a>
</li>
<li>
<a href="#">资料库</a>
</li>
<li><a href="#">海克斯宇宙</a> </li>
</ul></li>
<li class="toplines"><a href="#">商城/合作</a>
<ul class="topline0">
<li>
<a href="#">道具城</a>
</li>
<li>
<a href="#">电竞网吧</a>
</li>
<li><a href="#">电竞小说</a> </li>
</ul></li>
<li class="toplines"><a href="#">社区活动</a>
<ul class="topline0">
<li>
<a href="#">视频中心</a>
</li>
<li>
<a href="#">官方微博</a>
</li>
<li><a href="#">官方微信</a> </li>
</ul></li>
<li class="toplines"><a href="#">赛事官网</a>
<ul class="topline0">
<li>
<a href="#">职业联赛</a>
</li>
<li>
<a href="#">全明星赛</a>
</li>
<li><a href="#">全球总决赛</a> </li>
</ul></li>
<li class="toplines"><a href="#">自助系统</a>
<ul class="topline0">
<li>
<a href="#">秩序殿堂</a>
</li>
<li>
<a href="#">峡谷之巅</a>
</li>
<li><a href="#">账号注销</a> </li>
</ul></li>
<li class="topline8"><img src="图二.png " width="24" height="30">
<ul class="topline0">
<img src="掌盟.png" height="163" width="163"></li></ul>
</ul></div>
左边
<div class="light">
<div class="container">
<div class="photo">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220126/946a3e327cc94bed9da68658b24a4752.jpeg" >
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220121/fe393cc34e80975b1e9b0d727c71568c.jpeg">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220127/bc8196a94554cf229af6eadc5fe4e035.jpeg">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220123/41c6cd6147cb57d9d09f2604c6ee1870.jpeg">
<img src="https://ossweb-img.qq.com/upload/adw/image/977/20220119/a34ef22ed040cdcdd995d09d941f71d1.jpeg">
</div></div>
<div class="light-list">
<div class="list1" >虎虎生威</div>
<div class="list1" style="background-color:#f7f6f6;margin-top:7px;border-bottom-color: #cea861;border-bottom-style: solid" >青花瓷系列皮肤</div>
<div class="list1">Lpl春季赛</div>
<div class="list1">2022金虎贺岁</div>
<div class="list1">官方微博送福利</div></div>
<div class="east">
<div class="east1" >热门活动</div>
<div class="east0" style="margin-left: 70px;border-bottom-color: #0da0b4;padding-right: 30px">正在进行</div>
<div class="east0"style="padding-left: 40px">商城特惠</div>
<div class="east0">长期活动</div>
<div class="east2"><a href="#"> 更多</a></div></div>
<div class="huodong"><a href="#"><img src="活动一.png" width="185" height="250" style="margin-left: 10px"></a></div>
<div class="huodong"><a href="#"><img src="活动二.png" width="185" height="250"></a></div>
<div class="huodong"><a href="#"><img src="活动三.png" width="185" height="250"></a></div>
<div class="huodong"><a href="#"><img src="活动4.png" width="185" height="250" style="margin-right: 0px" ></a></div>
<div>
<div style="margin-top: 50px;font-size: 20px;
border-left-style:solid ;
border-left-color: #1da6ba;
padding-left: 10px;
float: left;">FANART创作馆</div>
<div>
<div class="tupian" style="clear: both;float: left">
<img src="阿狸.png" style="float: left">
<img src="剪头发.png" style="float: left">
<img src="https://shp.qpic.cn/cms_pic/2680029253/d585e691fefa784af1fe16c3ee741417/258">
<img src="https://shp.qpic.cn/cms_pic/2461163838/2d5155336e7405a6e62abd98a850a808/258" style="float: right;">
<img src="https://shp.qpic.cn/cms_pic/2451053586/70a3eb3dad21cf7fc0edf3935c43ca80/258" style="float: left;margin-top: 20px">
<img src="https://shp.qpic.cn/cms_pic/2460155447/7f1c6f5d81d4e12e72028e9da58f2c45/258" style="float: left;margin-top: 20px">
<img src="https://shp.qpic.cn/cms_pic/2560610887/7510f9710eeca70c1a5fefb5f45651f2/258" style="float: left;margin-top: 20px">
<img src="https://shp.qpic.cn/cms_pic/2490765977/b33737e56eb45ddaa26695facd2b9f8b/258" style="float: left;margin-top: 20px"></div>
</div>
</div></div>
右边
<div class="right">
<!-- 对某一部分上色加重-->
<div class="right-heng" style="color:#0da0b4;border-bottom-style: solid;border-bottom-width:4px;
border-bottom-color: #0da0b4;padding-bottom: 2px ">综合</div>
<div class="right-heng">公告</div>
<div class="right-heng">赛事</div>
<div class="right-heng">攻略</div>
<div class="right-heng">社区</div>
<div class="right-line1">英雄联盟官方微博送福利啦!让红包飞起来!</div>
<div class="right-lines"><div class="tuxing" >公告</div>
<a href="#"> 开发者：双倍关注双人作战</a></div>
<div class="right-lines"><div class="tuxing" >公告</div>
<a href="#">虎虎生威 一起联盟！双端联动活动预告</a></div>
<div class="right-lines"><div class="tuxing" >新闻</div>
<a href="#">1月26日，来虎牙参与双人solo，赢青花瓷皮肤基金!</a></div>
<div class="right-lines"><div class="tuxing" >新闻</div>
<a href="#">全民K歌x英雄联盟 邀你共唱《青花瓷》</a></div>
<div class="right-lines"><div class="tuxing" >视频</div>
<a href="#">【云顶之弈】新年短片：金灯送福</a></div>
<div class="right-lines"><div class="tuxing" >视频</div>
<a href="#">电竞春晚超级周预热：年夜饭</a></div>
<div class="right-fang">
阅读<a href="#">更多资讯</a>
</div>
<div class="user"><div style="float: left"><img src="下载游戏.png" style="width:300px;height: 160px;"></div>
<div class="user1"><div><img src="新手必备.png " style="height: 77px;width: available"></div>
<div><img src="领取中心.png" style="height: 77px;width: available"></div></div>
<div style=" clear: both;float: left">
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">在线客服</a></div>
<div class="gongneng"style="float:left"><a href="#" style="color: #0f0f0f">秩序殿堂 </a></div>
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">峡谷之巅</a></div>
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">游戏资料</a></div></div>
<div style="clear: both;float: left">
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">云顶之弈</a></div>
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">攻略中心</a></div>
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">联盟宇宙</a></div>
<div class="gongneng" style="float:left"><a href="#" style="color: #0f0f0f">微信绑定</a></div>
</div>
</div>
<div class="shangfu"><img src="蒙多.png" style="margin-top: 100px;width:230px;height: 400px;">
<img src="黎明.png" style="margin-top: 100px;width:230px;height: 400px"></div>
轮播图
首先是要有一个照片容器，照片容器之上有一个展示的容器，展示的容器大小设计为你想看到的大小，将其余隐藏。而照片的大小则是所有照片的大小，在设定一个渐变时间，再通过一个@keyframes switch设定变化的速度。
体会
做成的网页确实与目标差距过大，很多细节上的处理是及其不到位的，很多东西跟想象的不太一样，只能说菜刚刚开始，希望往后有所进步。
