效果图（如下）

*[HTML]: 结构（html）

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>英雄联盟</title>
<link rel="stylesheet" href="../../css/1204/英雄联盟.css">
</head>
<body><div class="box"><div class="top"><h1></h1><ul><li class="l1"><p>专区首页</p>Home</li><li class="l1"><p>新闻中心</p>News</li><li class="l1"><p>视频中心</p>Video</li><li class="l1"><p>原创攻略</p>Picture</li><li class="l1"><p>数据库</p>Database</li><li class="l1"><p>移动新闻</p>te5</li></ul></div><div class="top1"><div class="top1-left"><p class="p1">s9赛季：<span class="c1">9.5版本专题</span>|<span class="c1">LPL五周年专题</span>|<span class="c1">至臻皮肤专题</span></p><p class="p2">节目连载：<span class="c1">主播玩脱了</span>|<span class="c1">顶级主播秀</span>|<span class="c2">每日五杀</span></p></div><div class="top1-center"><p class="pp1">实用工具：<span class="cc1">s8符文模拟器</span>|<span class="cc1">s8符文研究室</span>|<span class="cc1">s8季前赛畅想室</span></p><p class="pp2">热门推荐：<span class="cc2">LOL小游戏</span>|<span class="cc1">专题大全</span>|<span class="cc2">最新皮肤</span></p></div><div class="top1-right"><input type="text" placeholder="此处输入搜索内容" class="sousuo"><p class="pp3">热门搜索：<span class="ccc3">免费领皮肤</span><span class="ccc1">LPL春季赛</span><span class="ccc2">8.7版本</span></p></div></div><div class="left"><div class="left-top"><p class="rm1">热门推荐</p><p class="xia1"></p><p class="rew">最新英雄</p> <div class="maomi"><p class="name1">悠米</p></div><div class="sailasi"><p class="name2">塞拉斯</p></div><div class="nikou"><p class="name3">妮蔻</p></div><div class="lol"><p class="lpl1"><span class="ss1">LPL夏季赛</span><span class="ss2">LPL春季赛</span><span class="ss3">进入专题>></span></p><p class="p123"></p><p class="ff0"><input type="button" value="已结束" class="u1">8/24 17:00<span class="a1">EDG</span><span class="a2"></span>0:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p><p class="ff1"><input type="button" value="已结束" class="u1">8/30 17:00<span class="a1">IG</span><span class="a2"></span>1:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p><p class="ff2"><input type="button" value="未开始" class="u2">1/24 17:00<span class="a1">FPX</span><span class="a2"></span>2:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p><p class="ff3"><input type="button" value="未开始" class="u2">1/24 17:00<span class="a1">SKT</span><span class="a2"></span>3:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p><p class="ff4"><input type="button" value="已结束" class="u1">1/14 17:00<span class="a1">WE</span><span class="a2"></span>1:2<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p><p class="ff5"><input type="button" value="已结束" class="u1">1/04 17:00<span class="a1">G2</span><span class="a2"></span>0:2<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p></div></div></div><div class="right"><ul><li class="sss2">9.16版本全面解读</li><li class="sss1">9.15版本全面解读</li><li class="sss1">9.14版本全面解读</li><li class="sss1">2019洲际赛直播</li><li class="sss1">9.13版本全面解读</li></ul></div></div></body>
</html>

*[HTML]: 样式（CSS)

*{margin: 0;padding: 0;
}
.box{width: 1200px;height: 660px;background-color: whitesmoke;margin:0 auto;
}
.h1,.top,.ul li,.top1{margin:0 auto;
}
h1{background: url(..[外链图片转存失败,源站可能有防盗存下来直接上传/mg-/英雄联盟/lol_logo.png(%E2%80%A6/%E2%80%A6/img/%E8%8B%B1%E9%9B%84%E8%81%94%E7%9B%9F/lol_logo.png)]) no-repeat;width: 170px;height: 60px;float: left;margin-top: 20px;margin-left: 90px;}
.top{width: 1200px;height: 110px;background-color: blue;background: url(../../img/英雄联盟/navi_bg.jpg) no-repeat;
}
ul>.l1{list-style: none;float: left;border-right:1px solid rgb(119, 119, 241);color: rgb(169, 168, 245);text-align: center; margin-top: 30px;height: 30px;padding-left: 30px;padding-right: 30px; font-size: 18px;
}
.l1{border: 0;
}
.top1-left,.top1-center,.top1-right{float: left;
}
.top1{width: 1200px;height: 100px;background-color: rgb(0, 0, 0);margin-top: -1px;  position: relative;
}
.top1 .top1-left .p1,.p2{color: rgb(136, 136, 179);
}
.p1,.p2{padding-top: 20px;margin-left: 50px;font-size: 12px;
}
.c1,.c2,.cc1,.cc2,.ccc1,.ccc2{padding-left: 10px;padding-right: 10px;
}
.c2{color: red;
}
.top1 .top1-center .pp1,.pp2{color: rgb(136, 136, 179);}
.pp1,.pp2{padding-top: 20px;margin-left: 95px;font-size: 12px;
}
.top1-center{position: absolute;right: 395px;top: 0px;
}
.cc2{color: red;
}
input{position: relative;right: -500px;width: 200px;top: 15px;
}
.sousuo{background: url(../../img/英雄联盟/ico.png)no-repeat;background-position: 182px -28px;background-color: rgb(6, 6, 99);border: 1px solid rgb(6, 6, 99);height: 25px;
}
.top1 .top1-right .pp3,.ccc1,.ccc2{color: rgb(136, 136, 179);
}
.pp3{padding-top: 20px;margin-left: 95px;font-size: 12px;position: relative;right: -405px;top: 8px;
}
.ccc3{color: red;
}
.left,.right{float: left;
}
.box .left{width: 310px;height: 422px;background-color: rgb(21, 3, 68);margin-top: 10px;margin-left: 45px;position: relative;
}
.box .right{width: 826px;height: 422px;background-color: rgb(0, 225, 255);margin-top: 10px;margin-left: 10px;border-radius: 8px 8px 8px 8px;background: url(../../img/英雄联盟/120-1ZR01T4080-L.jpg) no-repeat;
}
.left-top{width: 310px;height: 140px;background-color: rgb(17, 3, 77);}
.left>.left-top>.rm1{margin-left: 15px;color: rgb(136, 136, 179) ;font-size: 13px;font-weight: bold;
}
.rm1{width: 73px;background: url(../../img/英雄联盟/ico.png)no-repeat;background-position:55px 13px;padding-top: 10px;
}
.left>.left-top>.xia1{border-bottom: 2px solid rgb(92, 91, 91);width:270px ;margin-top: 10px;margin-left: 15px;
}
.left>.left-top>.rew{width: 12px;height: 65px;background-color: green;color: white;margin-left: 15px;margin-top: 10px;font-size: 12px;
}
.maomi,.sailasi,.nikou{float: left;margin-left: 10px;
}
.maomi{width: 70px;height: 70px;background: green;position:absolute;top: 47px;left: 30px;background:url(../../img/英雄联盟/Yuumi.png) no-repeat;background-size: 70px;
}
.sailasi{width: 70px;height:70px;background: rgb(17, 0, 255);position:absolute;top: 47px;left: 110px;background: url(../../img/英雄联盟/120-1Z304153I20-L.png) no-repeat;background-size: 70px;
}
.nikou{width: 70px;height:70px;background: rgb(255, 0, 157);position:absolute;top: 47px;left: 190px;background: url(../../img/英雄联盟/120-1Z304153G30-L.png) no-repeat;background-size: 70px;
}
.name1,.name2,.name3{color: gainsboro;font-size: 13px;padding-top: 72px; padding-left: 20px;
}
.lpl1{color:rgb(211, 210, 210);padding-top: 30px;font-size: 13px;
}
.ss1,.ss2,.ss3{padding-left: 20px;
}
.p123{border-bottom: 1px solid green;padding-top: 5px;width: 300px;
}
.ss3{font-size: 11px;padding-left: 40px;color: rgb(4, 167, 72);
}
.ss1{display:inline-block;width: 85px;height: 40px;line-height: 40px;background-color: teal;padding-left: 20px;
}
.ff0,.ff1,.ff2,.ff3,.ff4,.ff5{color: gainsboro;font-size: 13px;padding-top: 7px;
}
.u1{width: 50px;height: 20px;background-color: orange;border: 1px solid orange;color: white;position: relative;left: 0px;top: 0px;margin-left: 5px;margin-right: 5px;
}
.u2{width: 50px;height: 20px;background-color:blue;border: 1px solid blue;color: white;position: relative;left: 0px;top: 0px;margin-left: 5px;margin-right: 5px;
}
.a1{padding-left: 10px;padding-right: 10px;
}
.a2{display: inline-block;background: url(../../img/英雄联盟/1483499673-69723s1.png)no-repeat;width: 25px;height: 25px;background-size: 20px;background-position: -1px 5px;
}
.a3{display: inline-block;background: url(../../img/英雄联盟/1514199742-45872s1.png)no-repeat;width: 25px;height: 25px;background-size: 20px;background-position: 5px 5px;
}
.u4{width: 34px;height: 20px;background-color: rgb(0, 0, 0);border: 1px solid green;color:green;position: relative;left: 2px;top: 0px;margin-left: 5px;margin-right: 5px;  font-size: 12px;
}
ul>.sss1{list-style: none;float: left;color: rgb(206, 205, 236);text-align: center; margin-top: 30px;height: 30px;margin-right: 4px; font-size: 13px;background-color: rgba(0, 0, 0, 0.459);width: 160px;height: 50px;line-height: 50px;
}
.sss2{list-style: none;float: left;color: rgb(255, 255, 255);text-align: center; margin-top: 30px;height: 30px;margin-right: 4px; font-size: 13px;background-color: green;width: 160px;height: 50px;text-align: center;margin-left: 5px;line-height: 50px;
}
.sss1,.sss2{position: relative;top: 337px;
}

HTML英雄联盟效果图代码结构 (多多指教，感谢)相关推荐

说一下你对多态的理解?_掌握了多态的特性，写英雄联盟的代码更少啦！
来自公众号:小林coding - 1 - 虚函数和多态 || 01 虚函数在类的定义中,前面有 virtual 关键字的成员函数称为虚函数: virtual 关键字只用在类定义里的函数声明中,写函数 ...
微信登陆的LOL只有一个服务器,英雄联盟开启微信登陆功能网友吐槽：这波操作多此一举...
近日英雄联盟官方发布了一条公告引发网友议论声不断,原来英雄联盟官方将于8月21日8.16版本发布以后,在部分大区开启微信登陆功能测试,相信在科技越来越发达的今天,我们很多人在出门时只需要带上一部手机就 ...
定制电竞比分网LOL英雄联盟数据API接口调用代码
定制电竞比分网LOL英雄联盟数据API接口调用代码 GET /api/result/lol 说明该接口为LOL英雄联盟API接口,主要用来拉取比赛结果数据当每一局比赛结束时,破晓字节电竞数据API ...
HTML5期末大作业：游戏网页设计——英雄联盟6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计
HTML5期末大作业:游戏网页设计--英雄联盟6页(代码质量好) 学生DW网页设计作业源码 web课程设计网页规划与设计 HTML+CSS+JavaScript(毕业设计) 常见网页设计作业题材有个 ...
使用python选择结构和循环实现英雄联盟登录和注册
使用选择结构和循环实现英雄联盟登录和注册在"英雄商城首页"选择相对应的选项进入其他页面,选择2,进入休闲小游戏,打印"各种休闲小游戏的提示" 运行代码如下: ...
简易爬虫--50行代码获取英雄联盟全英雄皮肤
50行代码搞定英雄联盟LOL全英雄皮肤下载 # 下载英雄联盟全英雄皮肤 import os import requestsdef downloadPic(heroIds, titles, names, ...
互联网晚报 | 11月7日星期日 | EDG夺得《英雄联盟》S11总冠军；拼多多推出“超拼夜”系列；VMware与戴尔完成分拆...
‍ ‍今日看点 ✦ 公安部刑侦局联合腾讯发起首个"1107全民反诈日",提升全民反诈防骗意识 ✦ 拼多多11.11加码百亿补贴力度,联合央视.湖南卫视推出"超拼夜&quo ...
python游戏辅助lol_Python爬虫实战，60行代码爬取英雄联盟全英雄全皮肤，找寻曾今那些被删除的绝版皮肤...
学了一周多的爬虫课后终于按捺不住了,小编决定自己手动编写爬虫程序,刚好LJ在鼓励学员分享成果,优秀作品有奖励,就把自己用Python编程爬取各大游戏高清壁纸的过程整理了出来进行投稿,与大家一起分享. ...
DIV布局——仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:仿英雄联盟网站设计--仿英雄联盟LOL首页(11页) 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码文章目录 HTML5期末大作业:仿英雄联盟网站设计- ...

HTML英雄联盟效果图代码结构 (多多指教，感谢)

效果图（如下）

*[HTML]: 结构（html）

*[HTML]: 样式（CSS)

HTML英雄联盟效果图代码结构 (多多指教，感谢)相关推荐

最新文章

热门文章

HTML英雄联盟 效果图代码结构 (多多指教，感谢)

效果图（如下）

*[HTML]: 结构（html）

*[HTML]: 样式（CSS)

HTML英雄联盟 效果图代码结构 (多多指教，感谢)相关推荐

最新文章

热门文章

HTML英雄联盟效果图代码结构 (多多指教，感谢)

HTML英雄联盟效果图代码结构 (多多指教，感谢)相关推荐