前端彷英雄联盟官网/个人心得

我半年前学习过前端了，现在已经忘了差不多了。从Head Frist Html开始看书，了解一下Css以及JavaScript;也买了几本书来看。但因为时间问题，也没有认真去打一个项目去巩固一下基础，都是打一百多行的代码来实现一下小Demo。并且也没系统的学习一下前端。随着时间的过去，自己学得后端知识越多，对前端忘得越厉害，时常性去复习一下，也是有必要的。
现在前端也出现了挺多框架来加快后端程序员的开发，，但其中也是换汤不换药，其中的所调用的类以及函数或多或少都有前面技术的影子，并且其中的案例大多数模板化。所以先将之前的技术学好，再拿到这些开源的框架去开发，日后可以修改源代码来满足自己的需求。面对复杂的网页界面以及需求分析也不会感到太大的压力。以各大网站的模板来照着打，更深的理解前端的知识，会更加结构化去解析问题。写一个随笔来记录一下自己遇到的问题以及心得。

外部引用CSS:

我这里建立三个css文件,但我觉得一个文件就够了因为时间原因没有修改

复制链接就可以提取到了。
https://pan.baidu.com/s/1-csytLnDnt2aeCgye7l0_Q
提取码：ph03

首页html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>英雄联盟官方网站</title><link rel="stylesheet" type="text/css" href="css/head.css"><link rel="stylesheet" type="text/css" href="css/mid.css"><link rel="stylesheet" type="text/css" href="css/bottom.css"><link rel="stylesheet" type="text/css" href="css/end.css">
</head>
<body><div id="head"><table id="tablehead"><tr id="headfont1"><td rowspan="2" id="logotd"><div id="lollogo"></div></td><td><a class="font1" href="#">游戏资料</a><p class="font2">GAME INFO</p></td><td><a class="font1" href="#">商城/合作</a><p class="font2">STORE</p></td><td><a class="font1" href="#">用户互动</a><p class="font2">COMMUNITY</p></td><td><a class="font1" href="#">赛事中心</a><p class="font2">EVENTS</p></td><td><a class="font1" href="#">自助系统</a><p class="font2">SYSTEM</p></td><td><div id="find"></div></td><td><div id="phone"></div></td><td width="100px"><div id="pcircle"></div><div id="person"></div></td><td id="headright"><span class="font1">亲爱的召唤师，欢迎<a href="#">登录</a></span><p class="font2">登录查看自己的战队、资产、声望值等</p></td></tr></table><div id="bgtop"><img src="img/bg-top.jpg" width="100%"> </div>
</div>
<div id="toptxt"><table id="toptxttable"><tr><td id="zhzx"><a href="#">综合资讯</a></td><td><a href="#">视频中心</a></td><td><a href="#">赛事中心</a></td><td><a href="#">活动中心</a></td></tr></table>
</div>
<div id="middle">
<div id="midl"><img src="img/img01.jpg"><table id="magictable"><tr><td id="magic"><a href="#">魔法引擎上线</a></td><td><a href="#">总决赛卡片收集</a></td><td><a href="#">13点WE与TSM复仇战</a></td><td><a href="#">制胜法则第四期</a></td><td><a href="#">《绽火-狂澜》</a></td></tr></table>
</div>
<div id="midr"><div id="video"></div><table id="pictable"><img src="./img/video-img.png"><tr><td><div id="pic1"></div>新手推荐</td><td><div id="pic2"></div>宇宙官网</td><td><div id="pic3"></div><p class="biaozi">周边商城</p><div id="pic3_2"></div></td></tr><tr><td><div id="pic4"></div><p class="biaozi">新客户端</p><div id="pic4_2"></div></td><td><div id="pic5"></div><p class="biaozi">峡谷之巅</p><div id="pic5_2"></div></td><td><div id="pic6"></div>CDK兑换</td></tr><tr><td><div id="pic7"></div><p class="biaozi">轮换模式</p><div id="pic7_2"></div></td><td><div id="pic8"></div>游戏资料</td><td><div id="pic9"></div>领奖中心</td></tr><tr><td><div id="pic10"></div>官方微博</td><td><div id="pic11"></div>玩家论坛</td><td><div id="pic12"></div>在线客服</td></tr></table>
</div>
</div>
<div id="btmtxt"><table id="btmtable"><tr><td class="zixun"><a href="#">最新资讯</a></td><td id="zhxw"><a href="#">综合新闻</a></td><td><a href="#">官方公告</a></td><td><a href="#">赛事新闻</a></td><td><a href="#">论坛资讯</a></td><td width="20px"></td><td class="zhoum"><a href="#">周免英雄</a></td><td class="zhoum"><a href="#">最新皮肤</a></td><td class="zhoum"><a href="#">最新英雄</a></td></tr></table>
</div>
<div id="btml"><div><div id="newspic9"><img src="img/pic-news9.jpg" width="80%" height="80%"></div><h2>小组赛收官预告 EDG能否创FNC奇迹</h2><p class="newslittle">当天赛区中，LOL赛区一号种子EDG</p></div><table id="news"><tr><td class="news">新闻</td><td width="600px">小青龙为悟空手办作词作曲</td><td>10/13</td></tr><tr><td class="news">新闻</td><td>总决赛歌曲合集</td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td class="news">新闻</td><td></td><td>10/13</td></tr><tr><td colspan="3" id="newsend"></td></tr></table>
</div>
<div id="btmr"><table id="skin"><tr><td colspan="2"><img src="img/skin01.jpg"></td></tr><tr><td><img src="img/skin02.jpg"></td><td><img src="img/skin03.jpg"></td></tr><tr><td><img src="img/skin04.jpg"></td><td><img src="img/skin05.jpg"></td></tr><tr><td><img src="img/skin06.jpg"></td><td><img src="img/skin07.jpg"></td></tr><tr><td id="time" colspan="2">发布时间2019-6-26</td></tr><tr><td><img src="img/pic-go-mall.jpg"></td><td><img src="img/pic-go-qt.jpg"></td></tr><tr><td colspan="2" id="tip"><div id="tips"></div><p>本游戏适合18岁以上娱乐</p>抵制不良游戏</td></tr></table>
</div>
<div id="tuijian"><table id="tjtable1"><tr><td  class="zixun"><a href="#">最新推荐</a></td><td><a href="#">视频推荐</a></td><td><a href="#">活动推荐</a></td></tr></table><hr id="lasthr" size="3px" color="#C8C8C8"/><table id="tjtable2"><tr><td><img src="img/video1.jpg" width="183px" height="108px"> </td><td><img src="img/video2.jpg"></td><td><img src="img/video3.jpg"></td><td><img src="img/video4.jpg"></td><td><img src="img/video5.jpg"></td><td><img src="img/video6.jpg"></td></tr><tr><td>《s7鬼老爱解说》EDG大战RNG</td><td>《s7鬼老爱解说》EDG大战RNG</td><td>《s7鬼老爱解说》EDG大战RNG</td><td>《s7鬼老爱解说》EDG大战RNG</td><td>《s7鬼老爱解说》EDG大战RNG</td><td>《s7鬼老爱解说》EDG大战RNG</td></tr></table>
</div>
<div id="end"></div>
</body>
</html>

中下部bottom.css

/*中下*/
#btmtxt{clear: both;width: 100%;height: 50px;
}
#btmtable{width: 85%;height: 50px;margin-left: 100px;text-align: center;font-size: 18px;color: gray;
}
#btml{width: 55%;height: 550px;border-top: 2px solid #C0C3C5;margin-left: 5%;float: left;
}
#btml h2{font-size: 28px;
}
#btmr{width: 30%;height: 550px;border-top: 2px solid #C0C3C5;margin-left: 20px;float: left;
}
a:link{color: white;text-decoration: none;
}
a:visited{color: #C0C3C5;
}
a:hover{color: gold;text-decoration: none;
}
a:active{color: darkgoldenrod;
}
#toptxt a:link{font-size: 20px;color: #303030;
}
#toptxt a:visited{color: #C0C3C5;
}
#toptxt a:hover{color: gold;text-decoration: none;
}
#toptxt a:active{color: darkgoldenrod;
}
#btmtxt a:link,#tjtable1 a:link{color: black;text-decoration: none;
}
#btmtxt a:visited,#tjtable1 a:visited{color: #C0C3C5;
}
#btmtxt a:hover,#tjtable1 a:hover{color: gold;text-decoration: none;
}
#btmtxt a:active,#tjtable1 a:active{color: darkgoldenrod;
}
#headright a{color: gold;text-decoration: underline;
}
.zixun a:link{font-size: 26px;color: black;font-weight: bold;text-decoration: none;
}
.newslittle{font-size: 10px;
}
#news{/*width: 100%;*/color: gray;clear: both;border-spacing: 10px;
}
.news{width: 50px;height: 30px;/*color: #303030;*/background: #EBEBEB;text-align: center;
}
#newspic9{margin-top: -10px;float: left;margin-left: 10px;
}
#newsend{height: 30px;width: 100%;background: #EBEBEB;
}
#time{height: 65px;vertical-align: text-top;text-align: right;font-size: 15px;color: #C0C3C5;
}
#tip{height: 65px;vertical-align: text-top;/*text-align: right;*/font-size: 10px;
}
#tip p{font-size: 15px;font-weight: bold;line-height: 0px;
}
#tips{width: 70px;height: 70px;/*border: 1px solid #C0C3C5;*/float: left;margin-right: 20px;background: url("../img/icon.png");background-position: -330px -90px;/*font-family: 华文新魏;*//*font-size: 25px;*//*color: #C0C3C5;*/
}
.zhoum{text-align: left;
}
#tjtable1{width: 30%;color: #C0C3C5;font-size: 16px;margin-left: 2%;
}#tjtable2{width: 100%;height: 100px;font-size: 10px;color: #C0C3C5;
}
.biaozi{float: left;
}

底部end.css

/*底部*/
#tuijian{clear: left;width: 90%;margin: 0 auto;height: 200px;/*border: 1px solid blue;*/position: relative;top: 100px;
}
#end{width: 100%;height: 163px;/*border: 1px solid blue;*/margin-top: 150px;background-image: url("../img/bg-footer.jpg");/*background-size: 100%;*/background-position: -200px;
}

头部head.css

/* 头部*/
#lollogo{width: 200px;height: 100px;position: relative;top:0px;left: 0px;z-index: 2;background-image: url("../img/icon.png");background-position: 0px -30px;margin-left: 90px;
}
#bgtop{position: relative;bottom: 15px;
}
#tablehead{width: 100%;height: 100px;background: black;text-align: center;
}#headright{width: 300px;text-align: left;
}#find{width: 40px;height: 30px;background-image: url("../img/icon.png");background-position: 0px 0px;
}
#phone{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -40px 0px;
}
#pcircle{width: 80px;height: 80px;/*margin: 0 auto;*/background-image: url("../img/icon.png");background-position: 0px 170px;float: right;
}
#person{width: 66px;height: 66px;background-image: url("../img/peron.png");margin-left: 25px;margin-top: 5px;
}
.font1{color: white;
}
.font2{color: gray;font-size: 10px;
}

中部mid.css

/*中部*/
#toptxt{position: relative;top: -15px;left: 0;
}
#toptxttable{width: 40%;height: 50px;text-align: center;margin-left: 80px;/*font-size: 18px;*/color: gray;
}
#zhzx{border-bottom: 2px solid gold;
}
#middle{width: 100%;height: 500px;background-image: url("../img/bg-content-top.jpg");
}
#midl{width: 780px;height: 380px;/*border: 5px solid red;*/margin-top: 40px;float: left;margin-left: 100px;
}
#midr{width:30%;height: 380px;margin-top: 40px;/*border: 5px solid brown;*/margin-left: 20px;float: left;
}#magictable{width: 780px;height: 50px;position: relative;bottom: 10px;text-align: center;font-size: 16px;color: #C0C3C5;background: black;
}
#magictable a{color: #C0C3C5;
}#magictable a:link{color:#C0C3C5;text-decoration: none;
}
#magictable a:visited{color: #C0C3C5;
}
#magictable a:hover{color: gold;text-decoration: none;
}
#magictable a:active{color: darkgoldenrod;
}
#magic a:link{color: gold;
}
#magic a:visited{color: #C0C3C5;
}
#magic a:hover{color: gold;text-decoration: none;
}
#magic a:active{color: darkgoldenrod;
}
#magic{background: #303030;color: gold;
}
#pictable{border-spacing: 7px;/*background: #C0C3C5;*/
}
#pictable td{width: 125px;height: 48px;/*border: 1px solid red;*/background: white;
}
#pic1{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -200px 0px;
}
#pic2{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -559px 0px;
}
#pic3{width: 30px;height: 30px;margin-top: 10px;background-image: url("../img/icon.png");background-position: -590px 0px;
}
#pic3_2{width: 20px;height: 20px;background-image: url("../img/icon.png");background-position: -101px 0px;float: left;
}
#pic4_2{width: 20px;height: 20px;background-image: url("../img/icon.png");background-position: -125px 0px;float: left;
}
#pic5_2{width: 20px;height: 20px;background-image: url("../img/icon.png");background-position: -125px 0px;float: left;
}
#pic7_2{width: 20px;height: 20px;background-image: url("../img/icon.png");background-position: -101px 0px;float: left;
}
#pic4{width: 30px;height: 30px;margin-top: 10px;background-image: url("../img/icon.png");background-position: -380px 0px;
}
#pic5{width: 30px;height: 30px;margin-top: 10px;background-image: url("../img/icon.png");background-position: -650px 0px;
}
#pic6{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -290px 0px;
}
#pic7{width: 30px;height: 30px;margin-top: 10px;background-image: url("../img/icon.png");background-position: -620px 0px;
}
#pic8{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -260px 0px;
}
#pic9{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -469px 0px;
}
#pic10{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -499px 0px;
}
#pic11{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -410px 0px;
}
#pic12{width: 30px;height: 30px;background-image: url("../img/icon.png");background-position: -440px 0px;
}
#pictable div{float: left;
}

到这就结束了,希望小伙伴们多多关注多多提意见,有那些小伙伴需要看那些作品评论在下面我会在里面选取一个最多的来更新。

如果将此网站推送最多的小伙伴,我会随机抽取一到三名随机赠送一个小礼品。电子图书/优盘等等。

前端彷英雄联盟官网/个人心得相关推荐

初学者之《复刻英雄联盟官网之人脸识别登录》②
初学者之<复刻英雄联盟官网之人脸识别登录>② 第3章 Web项目系统设计第4章 Web项目系统实现三.Web项目系统设计在完成一个Web项目的开发过程和设计过程时,首先经历的就是整个 ...
初学者之《复刻英雄联盟官网之人脸识别登录》①
初学者之<复刻英雄联盟官网之人脸识别登录>① 第1章绪论第2章 Web项目需求分析前言英雄联盟是在这个电竞时代被推至至高点的一款MOBA游戏,然而其官网的登录方式在个人认为或许有 ...
Python爬虫之简单爬虫之爬取英雄联盟官网的英雄的皮肤
Python爬虫之简单爬虫之爬取英雄联盟官网的英雄的皮肤文章目录 Python爬虫之简单爬虫之爬取英雄联盟官网的英雄的皮肤背景:LOL这款游戏有着大量的玩家,这个游戏里面人们津津乐道的皮肤,每一款 ...
爬虫实战6：爬取英雄联盟官网五个位置的综合排行榜保存到excel
申明:资料来源于网络及书本,通过理解.实践.整理成学习笔记. 文章目录英雄联盟官网获取一个位置的综合排行榜所有数据(上单为例) 获取所有位置的综合排行榜所有数据英雄联盟官网获取一个位置的综合排 ...
LOL英雄联盟官网高保真原型设计-Axure9
一.英雄联盟官网 https://lol.qq.com/main.shtml 二.原型展示链接 https://w63vz3.axshare.com 三.效果展示图 (游戏版本11.10) 四.原型下 ...
Python爬取英雄联盟官网图片
脚本下载图片预览-草丛三兄弟 #encoding = gbk import re,os,requests,json from selenium import webdriver import ppri ...
Python爬虫之selenium爬取英雄联盟官网英雄皮肤图片下载到本地和保存到数据库
从英雄联盟皮肤网站的网页源代码中获取不到英雄的皮肤地址通过selenium可以轻松获取想要的内容源码展示 from selenium import webdriver from time impo ...
利用python爬取英雄联盟官网英雄皮肤
思路: 1.获取JS源代码 2.获取英雄ID 3.拼接完整路径 4.下载的位置 5.下载 import requests import re import json#获取JS源代码 def downl ...
教你用python爬英雄联盟官网：①掌握爬虫技术；②Python数据可视化
大家好,我是明月十四桥!! 擅长领域:python黑科技.大数据后端研发.数据仓库今日重点: ① 掌握爬虫技术,体会python爬虫流程,可见即可爬: ② 学会使用python数据可视化. 有问 ...
英雄联盟官网首页以及攻略页面制作
应为上一篇文章私信求源码的比较多,我就不一一回复了,毕竟也不是一直看软件有些时候回复不及时,下面我就把源码存放在百度硬盘中了,如果有需要的朋友可以按照下面的链接拉取,文件永久有效链接:https:/ ...

前端彷英雄联盟官网/个人心得

前端彷英雄联盟官网/个人心得相关推荐

最新文章

热门文章