前言
一、练习目标
示例：熟悉基本的页面布局，灵活使用浮动布局定位布局为网站搭设框架，充分理解结构样式分离的页面布局思想，该练习可作为HTML+CSS课程期末考核作业。
二、最终效果图
1.
三、主要代码
下面展示一些 HTML 代码片段。
// An highlighted block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>英雄联盟</title>
<link rel="stylesheet" href="lol.css">
</head>
<body>
<div class="father">
<div class="ftop">
<div class="ttop">
<div class="logo"></div>
<div class="tab">
<ul>
<li>
<div class="t">游戏资料</div>
<div class="d">GAME INFO</div>
</li>
<li>
<div class="t">商城/合作</div>
<div class="d">STORE</div>
</li>
<li>
<div class="t">用户互动</div>
<div class="d">COMMUNITY</div>
</li>
<li>
<div class="t">赛事中心</div>
<div class="d"> EVENT</div>
</li>
<li>
<div class="t">自主系统</div>
<div class="d">SYSTEM</div>
</li>
</ul>
<div class="big"></div>
<div class="rad"> </div>
<div class="yuan"></div>
<div class="ren"></div>
<div class="login">
<div class="shang">亲爱的召唤师，百里半欢迎   <a href="">登录</a> </div>
<div class="xia">登陆后查看自己的战绩、资产、声望值等</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div class="itop">
<div class="box">
<div class="edition">当前游戏版本:</div>
<div class="version">Ver 7.19</div>
<div class="details">
<div style="clear: both;"></div>
<div>版本详情</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="conlist">
<div class="inforbox">
<ul>
<li class="gold">百里半综合资讯</li>
<li>百里半视频中心</li>
<li>百里半赛事中心</li>
<li>百里半活动中心</li>
</ul>
</div>
</div>
<div style="clear: both;">
</div>
<div class="content">
<div class="spon">
<div class="jorick"></div>
<div class="down">
<div class="opt">
<ul>
<li>
<div class="fu">
<div class="new"></div>
<div>新手推荐</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="uni"></div>
<div>宇宙官网</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="shop"></div>
<div>周边商城</div>
<div class="sym"></div>
</div>
</li>
<li>
<div class="fu">
<div class="client"></div>
<div>新客户端</div>
<div class="cli2"></div>
</div>
</li>
<li>
<div class="fu">
<div class="super"></div>
<div>峡谷之巅</div>
<div class="sup2"></div>
</div>
</li>
<li>
<div class="fu">
<div class="cdk"></div>
<div>CDK兑换</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="exc"></div>
<div>轮换模式</div>
<div class="exc2"></div>
</div>
</li>
<li>
<div class="fu">
<div class="gin"></div>
<div>游戏资料</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="pri"></div>
<div>领奖中心</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="web"></div>
<div>官方微博</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="disc"></div>
<div>玩家论坛</div>
<div></div>
</div>
</li>
<li>
<div class="fu">
<div class="serv"></div>
<div>在线客服</div>
<div></div>
</div>
</li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
<div class="activity">
<div class="fav">
<ul>
<li>
<div class="magic">魔法引擎上线</div>
<div class="spec"></div>
</li>
<li>总决赛卡片收集</li>
<li>13点WE与TES复仇战</li>
<li>制胜法则第四期</li>
<li>《绽火·狂澜》</li>
</ul>
<div style="clear: both;"></div>
</div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="emph">
<div class="emleft">
<div class="ltite">
<ul>
<li class="large">最新资讯</li>
<li class="col">综合新闻</li>
<li>官方公告</li>
<li>赛季新闻</li>
<li>论坛资讯</li>
<li class="frame"></li>
</ul>
<div style="clear: both;"></div>
</div>
<div class="edg">
<div class="rice"></div>
<div class="team">
<div class="fb">小组赛收官预告 EDG能否创FNC奇迹</div>
<div class="fs">当天比赛中，LPL赛区一号种子EDG与总决赛霸主SKT所在的A组，将决出最后两个晋级名额。而在八强席位全部确定以后，还将进行淘汰赛对阵的抽签仪式</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="noti">
<ul>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">小青龙为悟空手办作词作曲发布新歌</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">总决赛歌曲合辑 萧敬腾领头献唱</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">2017全球总决赛半决赛售票重启公告</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">萧敬腾演唱总决赛歌曲《爱的大未来》</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">唯你独享，悟空头像现已发放</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">全球总决赛中文歌曲《Chang your mind》发布</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">开发者：任务系统更新</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">10月13日免费英雄更换公告</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">龙珠晋级在望 IMT与GAM力争8强</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
<li>
<div class="ves">
<div class="newbox">新闻</div>
<div class="mat">英雄更新：痛苦之拥 伊芙琳</div>
<div class="data">10/13</div>
<div style="clear: both;"></div>
</div>
</li>
</ul>
</div>
<div class="more">
<span class="bl">阅读更多</span>
<span class="go">最新资讯</span>
</div>
</div>
<div class="emright">
<div class="free">
<div>周免英雄</div>
<div>最新皮肤</div>
<div>最新英雄</div>
<div style="clear: both;" class="point"></div>
</div>
<div class="skin">
<div class="top">
<img src="./img/skin01.jpg" alt="">
</div>
<div class="mid">
<ul class="bot">
<li><img src="./img/skin02.jpg" alt=""><div class="dd">skt</div></li>
<li><img src="./img/skin04.jpg" alt=""><div class="dd">edg</div></li>
<li><img src="./img/skin06.jpg" alt=""><div class="dd">fpx</div></li>
<li><img src="./img/skin07.jpg" alt=""><div class="dd">ig</div></li>
<li><img src="./img/skin03.jpg" alt=""><div class="dd">grf</div></li>
<li><img src="./img/skin05.jpg" alt=""><div class="dd">blg</div></li>
<div style="clear: both;"></div>
</ul>
</div>
</div>
<div class="time">免费时间：2017-10-13支2017-10-20</div>
<div class="inv">
<div class="mall">
<img src="./img/pic-go-mall.jpg" alt="">
</div>
<div class="qt">
<img src="./img/pic-go-qt.jpg" alt="">
</div>
<div style="clear: both;"></div>
</div>
<div class="pro">
<div class="hint">
</div>
<div class="must">
<div class="adult">本游戏适合18岁（含）以上玩家娱乐</div>
<div class="man">抵制不良游戏 拒绝盗版游戏 注意自我保护 谨防受骗上当 适度游戏益脑 沉迷游戏伤身 合理安排时间 享受健康生活</div>
</div>
<div style="clear: both;"></div>
</div>
</div>
<div style="clear: both;"></div>
</div>
<div class="bottom">
<div class="boti">
<ul>
<li class="bold">最新推荐</li>
<li class="lrg">视频推荐</li>
<li>活动推荐</li>
</ul>
<div class="bian"></div>
</div>
<div style="clear: both;"></div>
<div class="vid">
<ul>
<li>
<div class="vids">
<div class="vi viss" ><img src="./img/video1.jpg" alt=""></div>
<div class="co">《S7鬼佬爱解说》：RNG暴打SSG,外国解说惨遭打脸</div>
<div class="abs"><div>08:49</div></div>
</div>
</li>
<li>
<div class="vids">
<div class="vi"><img src="./img/video2.jpg" alt=""></div>
<div class="co">7.20版本老司机：寡妇制造者重做上线</div>
<div class="abs"><div>04:54</div></div>
</div>
</li>
<li>
<div class="vids">
<div class="vi"><img src="./img/video3.jpg" alt=""></div>
<div class="co">《S7鬼佬爱解说》：入围赛WE称霸，惊艳外国解说</div>
<div class="abs"><div>02:52</div></div>
</div>
</li>
<li>
<div class="vids">
<div class="vi"><img src="./img/video4.jpg" alt=""></div>
<div class="co">《S7鬼佬爱解说》：外国解说称赞UZI奇迹蜕变！</div>
<div class="abs"><div> 10:07</div></div>
</div>
</li>
<li>
<div class="vids">
<div class="vi"><img src="./img/video5.jpg" alt=""></div>
<div class="co">神级瑞文面对对面四人毅然反打！所有人觉得她疯了！</div>
<div class="abs"><div> 02:52</div></div>
</div>
</li>
<li>
<div class="vids">
<div class="vi"><img src="./img/video6.jpg" alt=""></div>
<div class="co">北美第一见血封喉劫，极限操作秒5杀</div>
<div class="abs"><div>06:17</div></div>
</div>
</li>
</ul>
<div style="clear: both;"></div>
</div>
<div class="more more2">
<span class="bl2">阅读更多</span>
<span class="go">最新资讯</span>
</div>
</div>
<div class="foot"><img src="./img/bg-footer.jpg" alt=""></div>
</div>
</body>
</html> ;
下面展示一些 css代码片段。
// An highlighted block
*{
margin: 0px;
padding: 0px;
}
html,body{
width: 100%;
height: 100%;
}
.father{
width: 1920px;
height: 2280px;
/* border: 1px solid black; */
}
.ftop{
height: 440px;
width: 100%;
/* border: 1px solid black; */
}
.ttop{
height: 90px;
width: 100%;
background-color: black;
/* border: 1px solid black; */
}
.itop{
height: 350px;
width: 100%;
/* border: 1px solid black; */
}
.logo{
background-image: url(./img/icon.png);
width: 192px;
height: 99px;
background-position: 0px -32px;
float: left;
margin-left: 34px;
}
.tab ul{
float: left;
}
.tab{
height: 100%;
widows: 562px;
margin-left: 149px;
margin-top: 14px;
position: relative;
}
.tab ul{
list-style: none;
}
.tab li{
float: left;
}
.tab li div{
width: 80px;
height: 40px;
text-align: center;
line-height: 40px;
color: white;
margin-left: 53px;
}
.tab li .d{
font-size: 5px;
color: grey;
margin-top: -10px;
}
.tab .big{
width: 51px;
height: 41px;
background-image: url(img/icon.png);
background-position: 10px 10px;
position: absolute;
left: 744px;
top: 0px;
}
.tab .rad{
width: 45px;
height: 41px;
background-image: url(img/icon.png);
background-position: -34px 8px;
position: absolute;
left: 802px;
top: 0px;
}
.tab .yuan{
width: 84px;
height: 72px;
background-image: url(img/icon.png);
background-position: 1px -164px;
position: absolute;
left: 870px;
top: -7px ;
}
.tab .ren{
width: 32px;
height: 38px;
background-image: url(img/peron.png);
background-position: -18px -14px;
position: absolute;
background-color: transparent;
left: 892px;
top: 11px;
}
.tab .login{
width: 298px;
height: 50px;
position: absolute;
left: 960px;
top: -17px;
}
.tab .login div{
color: white;
text-align: left;
line-height: 50px;
margin-top: 11px;
}
.tab .login .xia{
margin-top: -26px;
font-size: 5px;
}
.tab .login .shang a{
color: gold;
}
.itop{
background-image: url(img/bg-top.jpg);
margin-top: -3px;
/* position: relative; */
}
.itop .box{
width: 357px;
height: 40px;
margin-left: 1560px;
margin-top: 289px ;
position: relative;
position: absolute;
}
.itop .box div{
float: left;
text-align: center;
line-height: 40px;
}
.edition{
color: gray;
font-size: 5px;
margin-left: 141px;
margin-top: -1px;
}
.version{
color: gold;
font-size: 7px;
margin-left: -8px;
}
.details{
border: 2px solid rgb(229, 223, 206);
color: gold;
width: 67px;
height: 26px;
font-size: 7px;
margin-top: 10px;
position: absolute;
left: 273px;
top: -6px;
background-color: transparent;
opacity: 0.7;
}
.details div{
position: absolute;
left: 10px;
top: -7px;
}
.conlist{
width: 100%;
height: 42px;
position: relative;
}
.conlist .inforbox{
position: absolute;
top: -1px;
left: 213px;
}
.conlist ul li{
list-style: none;
float: left;
margin-left: 117px;
margin-top: 4px;
}
.gold{
width: 112px;
height: 31px;
border-bottom: 4px solid gold;
color: gold;
}
.content{
width: 1920px;
height: 600px;
background-image: url(img/bg-content-top.jpg);
margin-top: -11px;
}
.spon{
width: 1190px; ;
height: 375px;
/* border: 1px solid red; */
float: left;
margin: 35px 0px 0px 333px;
}
.jorick{
width: 781px;
height: 314px;
/* border: 1px solid red; */
background-image: url(./img/img01.jpg);
background-repeat: no-repeat;
float: left;
}
.down{
width: 400px;
height: 375px;
/* border: 1px solid red; */
float: left;
margin-left: 5px;
}
.activity{
width:781px;
height: 57px;
/* border: 1px solid blue; */
margin-top: -61px;
position: relative;
background-color: black;
}
.activity .fav{
position: absolute;
left: 0px;
top: 0px;
}
.activity li{
list-style: none;
float: left;
margin-left: 39px;
margin-top: 16px;
color:white;
}
.magic{
height: 57px;
width: 99px;
color: gold;
}
.spec{
position: absolute;
left: -1px;
top: -2px;
width: 160px;
height: 59px;
background-color: grey;
opacity: 0.3;
}
.down{
background-image: url(img/video-img.png);
background-repeat: no-repeat;
}
.opt{
/* border: 1px solid green; */
width: 100%;
height: 225px;
margin-top: 148px;
margin-left: 0px;
}
.opt li{
list-style: none;
}
.opt li .fu{
float: left;
height: 49px;
width: 129px;
margin-top: 4px;
margin-left: 4px;
background-color: white;
text-align: center;
line-height: 49px;
position: relative;
}
.fu .new{
width: 36px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 494px 0px;
left: 0px;
top: 8px;
}
.fu .uni{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 825px 0px;
left: 0px;
top: 8px;
}
.fu .shop{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 795px 0px;
left: 0px;
top: 8px;
}
.fu .sym{
width: 30px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 594px 8px;
left: 94px;
top: -3px;
}
.fu .client{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 1004px 0px;
left: 0px;
top: 8px;
}
.fu .cli2{
width: 30px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 571px 8px;
left: 94px;
top: -3px;
}
.fu .super{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 736px 0px;
left: 0px;
top: 8px;
}
.fu .sup2{
width: 30px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 571px 8px;
left: 94px;
top: -3px;
}
.fu .cdk{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 403px 0px;
left: 0px;
top: 8px;
}
.fu .exc{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 1455px 0px;
left: 0px;
top: 8px;
}
.fu .exc2{
width: 30px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 594px 8px;
left: 94px;
top: -3px;
}
.fu .gin{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 1125px 0px;
left: 0px;
top: 8px;
}
.fu .pri{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 917px 0px;
left: 0px;
top: 8px;
}
.fu .web{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 886px 0px;
left: 0px;
top: 8px;
}
.fu .disc{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 976px 0px;
left: 0px;
top: 8px;
}
.fu .serv{
width: 32px;
height: 30px;
background-image: url(img/icon.png);
position: absolute;
background-position: 1638px 0px;
left: 0px;
top: 8px;
}
.emph{
width: 1190px;
height: 575px;
/* border: 1px solid red; */
margin-left: 330px;
margin-top: -112px;
}
.emph .emleft{
width: 656px;
height: 100%;
/* border: 1px solid green; */
float: left;
}
.emph .emright{
width: 530px;
height: 100%;
/* border: 1px solid blue; */
float: right;
position: relative;
}
.emleft .ltite{
width: 98%;
height:33px;
border-bottom: 3px solid gray;
position: relative;
}
.emph .emleft li{
list-style: none;
float: left;
margin-left: 57px;
margin-top: 4px;
color: gray;
}
.emph .emleft .large{
color: black;
font-size: 20px;
margin-top: 2px;
font-weight: 900;
}
.emph .emleft .col{
color: gold;
}
.frame{
width: 114px;
height: 20px;
position: absolute;
border-bottom: 4px solid gold;
left: 114px;
top: 8px;
}
.edg{
width: 98%;
height: 126px;
/* border: 1px solid tomato; */
}
.edg .rice{
width: 200px;
height: 124px;
/* border: 1px solid pink; */
background-image: url(img/pic-news9.jpg);
float: left;
}
.edg .team{
float: left;
margin: 4px 0px 0px 11px;
width: 427px;
height: 119px;
/* border: 1px solid fuchsia; */
}
.fb{
font-size: 26px;
font-weight: 500;
}
.fs{
font-size: 10px;
color: gray;
}
.noti{
width: 98%;
height: 366px;
/* border: 1px solid rosybrown; */
}
.noti li{
list-style: none;
}
.noti .ves{
/* border: 1px solid blue; */
width: 636px;
height: 30px;
margin-left: -54px;
}
.newbox{
width: 56px;
height: 30px;
margin-left: 0px;
background-color: gray;
opacity: 0.7;
color: black;
text-align: center;
line-height: 30px;
float: left;
}
.mat{
margin-left: 71px;
}
.data{
margin-left: 598px;
margin-top: -9px;
font-size: 10px;
}
.more{
width: 639px;
height: 38px;
margin-left: 4px;
margin-top: 0px;
/* border: 1px solid darkcyan; */
background-color: darkgray;
}
.more .bl{
margin-left: 251px;
margin-top: 0px;
line-height: 38px ;
}
.more .go{
color: gold;
}
.emright .free{
width: 100%;
height: 33px;
border-bottom: 3px solid gray;
}
.emright .free div{
float: left;
margin-left: 87px;
text-align: center;
line-height: 33px;
color: gray;
}
.emright .free .point{
position: absolute;
border-bottom: 4px solid gold;
width: 122px;
height: 30px;
left: 121px;
top: 2px;
}
.skin{
width: 400px;
/* border: 1px solid red; */
margin: auto;
margin-top: 3px;
}
.bot{
list-style: none;
margin-left: -2px;
width: 100%;
}
.mid .bot li{
float: left;
margin-left: 5px;
position: relative;
}
.dd{
width: 195px;
height: 70px;
background-color:rgba(0, 0, 0, 0.2);
position: absolute;
left: 0px;
top: 0px;
color: gold;
text-align: center;
line-height: 70px;
display: none;
}
.mid .bot li:hover .dd{
display: block;
}
.time{
margin-left: 192px;
color: gray;
}
.inv{
height: 73px;
width: 100%;
}
.inv .mall{
float: left;
margin-left: 69px;
}
.inv .qt{
float: left;
margin-left: 6px;
}
.pro .hint{
/* border: 1px solid red; */
width: 73px;
height: 73px;
background-image: url(./img/icon.png);
background-position: -328px -87px;
position: absolute;
left: 67px;
top: 515px;
}
.pro .must{
width: 314px;
height: 73px;
/* border: 1px solid red; */
position: absolute;
left: 146px;
top: 515px;
}
.must{
color: black;
font-size: 15px;
}
.man{
color: gray;
font-size: 5px;
}
.bottom{
/* width: 1190px; */
width: 100%;
/* height:220px ; */
/* border: 1px solid red; */
margin: 47px 0px 0px 331px;
position: relative;
}
.bottom .boti{
width: 61%;
height: 35px;
border-bottom: 3px solid gray;
margin-left: 0px;
margin-top: 0px;
}
.boti li {
list-style: none;
float: left;
margin-left: 53px;
margin-top: 6px;
}
.boti .bold{
font-size: 20px;
font-weight: 900;
}
.boti .lrg{
color: gold;
}
.bian{
border-bottom: 4px solid gold;
width: 100px;
height: 36px;
position: absolute;
left: 165px;
top: -1px;
}
.vid{
width: 100%;
/* height: 124px; */
/* border: 1px solid gray; */
margin-left: 0px;
margin-top: 8px;
}
.vid li{
list-style: none;
float: left;
margin-left: 0px;
margin-top: 0px;
}
.vid .co{
font-size: 5px;
}
.vids{
width: 190px;
height: 100px;
margin-left: 5px;
position: relative;
}
.viss{
overflow: hidden;
width:182px ;
height: 108px;
}
.abs{
width: 182px;
height: 20px;
background-color: black;
position: absolute;
left: 0px;
top: 87px;
opacity: 0.5;
}
.abs div{
color: white;
margin-left: 138px;
}
.more2{
margin-left: 0px;
margin-top: 47px;
width: 1167px;
}
.bl2{
margin-left: 509px;
line-height: 38px;
}
.foot{
margin-top: 67px;
}
433
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
