作者分享了自己学习前端的经历，提到虽然已忘记大部分前端知识，但认识到打好基础的重要性。文中通过创建HTML页面，使用多个CSS文件进行样式布局，展示了英雄联盟官方网站的头部、中间和底部设计。作者强调了理解前端基础知识对掌握框架的意义，并表示会逐步完善和修改代码以适应需求。随笔还包含了外部引用CSS的示例以及部分代码片段。
我半年前学习过前端了，现在已经忘了差不多了。从Head Frist Html开始看书，了解一下Css以及JavaScript;也买了几本书来看。但因为时间问题，也没有认真去打一个项目去巩固一下基础，都是打一百多行的代码来实现一下小Demo。并且也没系统的学习一下前端。随着时间的过去，自己学得后端知识越多，对前端忘得越厉害，时常性去复习一下，也是有必要的。
现在前端也出现了挺多框架来加快后端程序员的开发，，但其中也是换汤不换药，其中的所调用的类以及函数或多或少都有前面技术的影子，并且其中的案例大多数模板化。所以先将之前的技术学好，再拿到这些开源的框架去开发，日后可以修改源代码来满足自己的需求。面对复杂的网页界面以及需求分析也不会感到太大的压力。以各大网站的模板来照着打，更深的理解前端的知识，会更加结构化去解析问题。写一个随笔来记录一下自己遇到的问题以及心得。
外部引用CSS:
<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">
我这里建立三个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;
}
到这就结束了,希望小伙伴们多多关注多多提意见,有那些小伙伴需要看那些作品评论在下面我会在里面选取一个最多的来更新。
如果将此网站推送最多的小伙伴,我会随机抽取一到三名随机赠送一个小礼品。电子图书/优盘等等。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
