前端彷英雄联盟官网/个人心得
我半年前学习过前端了，现在已经忘了差不多了。从Head Frist Html开始看书，了解一下Css以及JavaScript;也买了几本书来看。但因为时间问题，也没有认真去打一个项目去巩固一下基础，都是打一百多行的代码来实现一下小Demo。并且也没系统的学习一下前端。随着时间的过去，自己学得后端知识越多，对前端忘得越厉害，时常性去复习一下，也是有必要的。
现在前端也出现了挺多框架来加快后端程序员的开发，，但其中也是换汤不换药，其中的所调用的类以及函数或多或少都有前面技术的影子，并且其中的案例大多数模板化。所以先将之前的技术学好，再拿到这些开源的框架去开发，日后可以修改源代码来满足自己的需求。面对复杂的网页界面以及需求分析也不会感到太大的压力。以各大网站的模板来照着打，更深的理解前端的知识，会更加结构化去解析问题。写一个随笔来记录一下自己遇到的问题以及心得。
外部引用CSS:
我这里建立三个css文件,但我觉得一个文件就够了因为时间原因没有修改
复制链接就可以提取到了。
https://pan.baidu.com/s/1-csytLnDnt2aeCgye7l0_Q
提取码：ph03
头部
中间部分
底部
首页html
英雄联盟官方网站
新手推荐
宇宙官网
周边商城
新客户端
峡谷之巅
CDK兑换
轮换模式
游戏资料
领奖中心
官方微博
玩家论坛
在线客服
小组赛收官预告 EDG能否创FNC奇迹
当天赛区中，LOL赛区一号种子EDG
新闻
小青龙为悟空手办作词作曲
10/13
新闻
总决赛歌曲合集
10/13
新闻
10/13
新闻
10/13
新闻
10/13
新闻
10/13
新闻
10/13
新闻
10/13
新闻
10/13
新闻
10/13
发布时间2019-6-26
本游戏适合18岁以上娱乐
抵制不良游戏
中下部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;
}
到这就结束了,希望小伙伴们多多关注多多提意见,有那些小伙伴需要看那些作品评论在下面我会在里面选取一个最多的来更新。
如果将此网站推送最多的小伙伴,我会随机抽取一到三名随机赠送一个小礼品。电子图书/优盘等等。