CSS布局及实例仿LOL主页

浮动概述

如果将元素设置为浮动之后那么它将具备以下几个特点：1.浮动元素会被排除在文档流之外，（脱离文档流）元素是不占有之前的页面空间，其他元素会上前补位2.浮动元素会停靠在父元素的左边或右边，或者停留在其他已经浮动的元素的边上3.浮动元素只会在当前行内浮动。4.浮动元素拥有浮动功能之后依然还存在于父级元素中，只是飘起来了。5.浮动处理----让多个块元素合成一排。

浮动前：
浮动后

清除浮动

清除浮动并不是说把某一个元素的浮动效果清除掉
而是取消上面元素给自己带来的影响
clear  leftright

浮动引发的特殊效果

1.父元素的宽度显示不是所有已浮动元素最后一个元素将被强制换行（卡主）
2.元素一旦浮动起来之后宽度就会变成自适应（非人为制定的情况下）
3.元素一旦浮动起来那么将会变成块级元素，尤其对行级元素影响最大
4.文本和行内元素会进行文字环绕的方式进行排列

浮动元素对父级元素带来的影响

由于浮动元素脱离文档流的所以会导致元素不占有父级元素的空间，那么他会给父级元素带来影响
解决方案1.直接给父级设置高度弊端：必须要知道父级元素的准确高度2.父级浮动弊端：对后续元素有影响，父级的margin 0 auto 失效3.为父级父元素添加  overflow:hidden或者auto弊端： 元素一旦溢出就出被跟着影藏4.在父级元素里面追加一个空元素  并设置为 clear：both

定位

relative: 与 static 相似，区别是 position 属性等于 relative 的元素还可以（通过应用
float 属性等)从文档的正常显示顺序里脱离出来。absolute: 可以将设置的元素摆放到容纳它的“容器”的任何位置，这个容器要么是文档本身，要么是一个有着 fixed 或 absolute 属性的父元素。这个元素在原始标记里出现的位置与它的显示位置无关，因为它的显示位置由 top、left、right 和 bottom 等属性决定，可以用像素或百分比作为单位设置这些属性的值。fixed生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定

仿制

目标图

制作思路

做好盒子以后，头部先一个img，然后ulli，通过左浮动完成首部导航，给外面盒子设置相对定位，内部部件设置绝对定位，完成父相子绝。

           <div class="top-nav"><div class="nav-logo"></div><ul><li><span class="title">游戏资料</span><span class="subtitlr">GAME INFO</span></li><li><span class="title">商城/合作</span><span class="subtitlr">STORE</span></li><li><span class="title">用户互动</span><span class="subtitlr">COMMUNITY</span></li><li><span class="title">赛事中心</span><span class="subtitlr">EVENTS</span></li><li><span class="title">自助系统</span><span class="subtitlr">SYSTEM</span></li></ul><div class="search"></div><div class="phone"></div><div class="zhs"><img src="./素材/person.png" alt="" class="person"></div><div class="dl"><span class="s1">亲爱的召唤师，欢迎 <a href="#">登录</a></span><span class="s2">登录后查看自己的战绩、资产、声望值等</span></div><div class="p1"></div></div>

2.设置大盒子嵌套小盒子，测量好距离，四个div通过display:inline-block并在一排，字体通过align:center水平居中，line-height等高实现垂直居中，通过border-bottom单的设置底部边框

<div class="mid-top-nav"><div class="zh">综合资讯</div><div class="sp">视频中心</div><div class="ss">赛事中心</div><div class="hd">活动中心</div></div><div class="mid-top-mid"><div class="x-left"><img src="./素材/img01.jpg" alt="" class="jla"><div class="x-left-nav"><span class="" id="mf">魔法引擎上线</span><span class="">总决赛卡片收集</span><span class="">13点WE与TSM复仇战</span><span class="">致胜法则第四期</span><span class="">《绽火·狂澜》</span></div></div>

3.通过table实现3*4的盒子布局，通过定位确定图标位置

<div class="x-right"><img src="./素材/video-img.png" alt="" class="load"><table class="list1"><tr><td><div class="i11"></div>新手推荐</td><td><div class="i12"></div>宇宙官网</td><td><div class="i13"></div>周边商城<div id="i51"></div></td></tr><tr><td><div class="i21"></div>新客户端<div id="i52"></div></td><td><div class="i22"></div>峡谷之巅<div id="i53"></div></td><td><div class="i23"></div>CDK兑换</td></tr><tr><td><div class="i31"></div>轮换模式<div id="i54"></div></td><td><div class="i32"></div>游戏资料</td><td><div class="i33"></div>领奖中心</td></tr><tr><td><div class="i41"></div>官方微博</td><td><div class="i42"></div>玩家论坛</td><td><div class="i43"></div>在线客服</td></tr></table></div>

4.确定好大盒子宽高之后通过ulli实现列表样式，给li设好样式之后通过左右浮动布置好位置，在通过内外间距微微调整

<div class="m-left"><div class="mid-left-nav"><span id="zxzx">最新资讯</span><span class="zhxw">综合新闻</span><span class="">官方公告</span><span class="">赛事新闻</span><span class="">论坛资讯</span></div><div class="list2"><div class="new1"><img src="./素材/pic-news9.jpg" alt="" class="bgi"><div class="n-text"><h1>小组赛收官预告 EDG能否创FNC奇迹</h1><p>当天比赛中，LPL赛区一号种子EDG与总决赛霸主SKT所在的A组，将决出最后两个晋级名额。而在八强席位全部确定后，还将进行淘汰赛对阵的抽签仪式</p></div></div><ul class="n-list"><li><span class="n-b">新闻</span><a href="#">小青龙为悟空手办作词作曲发布新歌</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">总决赛歌曲合辑 萧敬腾领头献唱</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">2017全球总决赛半决赛售票重启公告</a><spa class="rq"n>10/13</span></li><li><span class="n-b">新闻</span><a href="#">萧敬腾演唱总决赛歌曲 《爱的大未来》</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">微你独享，悟空头像已发放</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">全球总决赛中文歌曲《Change Your Mid》发布</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">/开发者：任务系统更新</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">10月13日免费英雄更新公告</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">龙珠晋级在望IMT与GAM力争8强</a><span class="rq">10/13</span></li><li><span class="n-b">新闻</span><a href="#">英雄更新：痛苦之拥 伊芙琳</a><span class="rq">10/13</span></li></ul><div class="more1"><a href="#" id="a1">最新资讯</a></div></div><div class=""></div></div>

6设置好盒子大小，调整好图片大小，自动规划好位置

<div class="m-right"><div class="m-right-nav"><span>周免英雄</span><span id="pf">最新皮肤</span><span>最新英雄</span></div><div class="r-mid"><a href=""><img src="./素材/skin01.jpg" alt=""></a><a href=""><img src="./素材/skin02.jpg" alt=""></a><a href=""><img src="./素材/skin03.jpg" alt=""></a><a href=""><img src="./素材/skin04.jpg" alt=""></a><a href=""><img src="./素材/skin05.jpg" alt=""></a><a href=""><img src="./素材/skin06.jpg" alt=""></a><a href=""><img src="./素材/skin07.jpg" alt=""></a></div><span id="mftm">免费时间：2017-10-13至2017-10-20</span><br><br><br><div><a href=""><img src="./素材/pic-go-qt.jpg" alt=""></a><a href=""><img src="./素材/pic-go-mall.jpg" alt=""></a></div><div class="tips"><div class="t-img"></div><h5>本游戏适合18岁（含）以上玩家娱乐</h5><table><tr><td>抵制不良游戏</td><td>拒绝盗版游戏</td><td>注意自我保护</td><td>谨防受骗上当</td></tr><tr><td>适度游戏益脑</td><td>沉迷游戏伤身</td><td>合理安排时间</td><td>享受健康生活</td></tr></table></div></div>

 <div class="mid-bottom"><div class="mb-nav"><span id="span1">最新推荐</span><span id="span2">视频推荐</span><span id="span3">活动推荐</span></div><div class="body"><ul><li><a href="#"><img src="./素材/video1.jpg" alt=""></a><span>《S7鬼佬爱解说》：RNG暴打SSG，外国解说惨遭打脸！</span></li><li><a href="#"><img src="./素材/video2.jpg" alt=""></a><span>7.20版本老司机：寡妇制作者重做上线！</span></li><li><a href="#"><img src="./素材/video3.jpg" alt=""></a><span>《S7鬼佬爱解说》：入围赛WE称霸，惊艳外国解说</span></li><li><a href="#"><img src="./素材/video4.jpg" alt=""></a><span>《S7鬼佬爱解说》：外国解说称赞Uzi奇迹蜕变！</span></li><li><a href="#"><img src="./素材/video5.jpg" alt=""></a><span>神级瑞文面对四人毅然反打！所有觉得他疯了！</span></li><li><a href="#"><img src="./素材/video6.jpg" alt=""></a><span>北美第一见血封喉劫，极限操作秒五杀</span></li></ul></div><div class="more2"><a href="#" id="a1">最新资讯</a></div></div><div class="bottom"><div class="text5"><span class="t1">腾讯互娱娱乐|广告服务|腾讯游戏招聘|腾讯游戏客服|游戏活动|游戏地图|商务合作|腾讯网|网站导航</span><br><span class="t1">腾讯公司版权所有</span><br><span class="t2">COPYRIGHT © 1998 - 2017 TENCENT.ALL RIGHTS RESERVED</span><br><span class="t2">© 2012 Riot Game,Inc.ALL RIGHTS RESERVED</span><br><span class="t2">文网进字[2011] 004号 & IBSN 978-7-89989-154-2</span><span class="t1">|新出证明（粤）字010号|粤文网【2017】 6138-1456号</span></div></div>

完成效果

css代码部分

*{margin: 0;padding: 0;
}
.box{width: 1423px;height: 2283px;background-color: #fafafa;margin: 0 auto;
}
.top{width: 1423px;height: 440px;position: relative;
}
.top-nav{width: 1423px;height: 90px;background-color: #0b0b0b;
}
.top-nav ul{float: left;margin-left: 280px;width: 600px;height: 90px;
}
.top-nav ul li{float: left;list-style: none;width: 100px;height: 90px;text-align: center;margin-left: 18px;
}
.title{display: block;font-size: 18px;color: white;margin-top: 25px;
}
.subtitlr{display: block;font-size: 11px;color: #aeaeae;
}
.nav-logo{width: 190px;height: 100px;background-image: url(../素材/icon.png);background-position: 0px -30px;position: absolute;left: 95px;z-index: 10;
}
.p1{width: 1423px;height: 350px;background-image: url(../素材/bg-top.jpg);background-position: -250PX 0px;position: absolute;top: 90px;
}
.search{width: 40px;height: 40px;background-image: url(../素材/icon.png);background-position: 2px 10px;position: absolute;top: 20px;left: 890px;
}
.phone{width: 40px;height: 40px;background-image: url(../素材/icon.png);background-position: -38px 10px;position: absolute;top: 20px;left: 940px;
}
.zhs{width: 80px;height: 80px;background-image: url(../素材/icon.png);background-position: 0px -170px;position: absolute;top: 10px;left: 995px;z-index: 100;
}
.person{width: 40px;height: 40px;position: absolute;left: 18px;top: 15px;
}
.s1{display: block;font-size: 16px;color: white;margin-top: 25px;
}
.s2{display: block;font-size: 11px;color: #aeaeae;margin-top: 5px;
}
.s1 a{color: #dfb257;
}
.dl{position: absolute;top: 0px;left: 1090px;
}
.mid-top{width: 1240px;height: 550px;margin: 0 auto;
}
.mid-top-nav{width: 1423px;height: 60px;
}
.mid-top-nav div{width: 110px;height: 60px;font-size: 18px;display: inline-block;text-align: center;line-height: 60px;margin-right: 28px;
}
.zh{font-weight: 500;border-bottom: 2px solid currentColor;color:  #d1ab57;box-sizing: border-box;
}
.mid-top-mid{width: 1423px;height: 490px;position: relative;
}
.x-left{width: 820px;height: 400px;box-sizing: border-box;position: absolute;
}
.jla{width: 820px;height: 350px;
}
.x-left span{width: 164px;height: 50px;box-sizing: border-box;background-color: black;float: left;color: white;font-size: 14px;text-align: center;line-height: 50px;
}
.x-left-nav{width: 820px;height: 50px;margin-top: -4px;
}
#mf{background-color: #303030;color: #dd9739;
}
.x-right{width: 400px;height: 400px;position: absolute;left: 840px;
}
.load{width: 400px;height: 150px;
}
.list1{width: 400px;height: 250px;
}
.list1 td{width: 130px;height: 55px;background-color: #fff;line-height: 55px;position: relative;text-align: center;
}
.list1 div{width: 30px;height: 30px;display: inline-block;
}
.i11{background-image: url(../素材/icon.png);background-position: -200px 0;position: absolute;top: 15px;left: 5px;
}
.i12{background-image: url(../素材/icon.png);background-position: -560px 0;position: absolute;top: 15px;left: 5px;
}
.i13{background-image: url(../素材/icon.png);background-position: -590px 0;position: absolute;top: 15px;left: 5px;
}
.i21{background-image: url(../素材/icon.png);background-position: -380px 0;position: absolute;top: 15px;left: 5px;
}
.i22{background-image: url(../素材/icon.png);background-position: -650px 0;position: absolute;top: 15px;left: 5px;
}
.i23{background-image: url(../素材/icon.png);background-position: -290px 0;position: absolute;top: 15px;left: 5px;
}
.i31{background-image: url(../素材/icon.png);background-position: -620px 0;position: absolute;top: 15px;left: 5px;
}
.i32{background-image: url(../素材/icon.png);background-position: -260px 0;position: absolute;top: 15px;left: 5px;
}
.i33{background-image: url(../素材/icon.png);background-position: -470px 0;position: absolute;top: 15px;left: 5px;
}
.i41{background-image: url(../素材/icon.png);background-position: -500px 0;position: absolute;top: 15px;left: 5px;
}
.i42{background-image: url(../素材/icon.png);background-position: -410px 0;position: absolute;top: 15px;left: 5px;
}
.i43{background-image: url(../素材/icon.png);background-position: -440px 0;position: absolute;top: 15px;left: 5px;
}
#i51{width: 20px;height: 20px;background-image: url(../素材/icon.png);position: absolute;top: 0px;left: 100px;background-position: -105px 5px;
}
#i52{width: 20px;height: 20px;background-image: url(../素材/icon.png);position: absolute;top: 0px;left: 100px;background-position: -125px 5px;
}
#i53{width: 20px;height: 20px;background-image: url(../素材/icon.png);position: absolute;top: 0px;left: 100px;background-position: -125px 5px;
}
#i54{width: 20px;height: 20px;background-image: url(../素材/icon.png);position: absolute;top: 0px;left: 100px;background-position: -105px 5px;
}
.mid-mid{width: 1240px;height: 750px;margin: 0 auto;position: relative;
}
.mid-left{width: 820px;height: 750px;position: absolute;
}
.mid-left-nav{width: 820px;height: 50px;
}
.mid-left-nav span{width: 164px;height: 50px;box-sizing: border-box;background-color: #fafafa;float: left;color: blacks;font-size: 18px;text-align: center;line-height: 50px;border-bottom: 2px solid #c8c8c8;
}
#zxzx{font-weight: 500;font-size: 24px;
}
.zhxw{font-weight: 900;color: #d1ab57;border-color: currentColor;
}
.new1{width: 820px;height: 140px;position: relative;
}
.bgi{width: 200px;height: 124px;position: absolute;top: 10px;left: 0px;
}
.n-text{width: 610px;height: 124px;position: absolute;left: 200px;top: 0px;
}
.n-text p{font-size: 14px;color: gray;margin-left: 10px;display: block;position: absolute;top: 60px;left: 20px;
}
.list2{width: 820px;height: 670px;
}
.new1 h1{margin-left: 10px;position: absolute;top: 10px;left: 20px;font-size: 35px;
}
.n-b{width: 70px;height: 34px;background-color: #ebebeb;font-size: 14px;text-align: center;display: inline-block;line-height: 34px;color: #7a7a7a;margin: 0 10px 0 0;
}
.n-list li{list-style: none;width: 820px;height: 34px;margin-top: 10px;
}
.rq{color: #bababa;float: right;line-height: 34px;
}
.n-list a{text-decoration: none;color: #7a7a7a;line-height: 34px;margin-left: 10px;
}
.more1{width: 820px;height: 45px;background-color: #ebebeb;color: #7a7a7a;line-height: 45px;font-size: 18px;text-align: center;margin-top: 15px;
}
#a1{text-decoration: none;color: #d4b369;
}
.m-right{width: 400px;height: 750px;position: absolute;top: 0px;left: 840px;
}
.m-right-nav{width: 400px;height: 50px;
}
.m-right-nav span{width: 133px;height: 50px;text-align: center;line-height: 50px;border-bottom: 2px solid #c8c8c8;box-sizing: border-box;font-size: 18px;display: block;float: left;
}
#pf{font-weight: 900;color: #d1ab57;border-color: currentColor;
}
#mftm{float: right;color: #9f9f9f;font-size: 16px;
}
.tips{width: 400px;height: 80px;position: relative;top: 10px;
}
.t-img{width: 80px;height: 80px;background-image: url(../素材/icon.png);background-position: -330px -80px;position: absolute;
}
.tips h5{position: absolute;top: 15px;left: 80px;
}
.tips table{position: absolute;color: #9f9f9f;font-size: 12px;top: 30px;left: 80px;
}
.mid-bottom{width: 1240px;height: 290px;margin: 0 auto;
}
.more2{width: 1240px;height: 45px;background-color: #ebebeb;color: #7a7a7a;line-height: 45px;font-size: 18px;text-align: center;
}
.body{width: 1240px;height: 190px;
}
.mid-bottom ul{list-style: none;width: 1240;height: 190px;display: inline-block;
}
.mid-bottom ul li{width: 188px;height: 190px;float: left;margin-top: 10px;margin-right: 15px;
}
.mid-bottom ul li img{width: 188px;height: 110px;
}
.mid-bottom ul li span{font-size: 14px;color: #a599b2;display: block;
}
.mb-nav{width: 1240px;height: 55px;position: relative;border-bottom: 2px solid #c8c8c8;box-sizing: border-box;
}
.mb-nav span{width: 164px;height: 55px;box-sizing: border-box;background-color: #fafafa;float: left;color: blacks;font-size: 18px;text-align: center;line-height: 55px;border-bottom: 2px solid #c8c8c8;
}
#span1{font-weight: 500;font-size: 24px;
}
#span2{font-weight: 900;color: #d1ab57;border-color: currentColor;border-bottom: 2px solid;
}
.bottom{width: 1423px;height: 160px;background-image: url(../素材/bg-footer.jpg);background-position: -250px 0;margin-top: 93px;position: relative;
}
.text5{position: absolute;top: 25px;left: 500px;
}
.t1{color: #388185;font-size: 12px;
}
.t2{color: #999999;font-size: 12px;
}

CSS布局及实例仿LOL主页相关推荐

超级漂亮的几款清新、常用的网页CSS布局配色实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xht ...
3.实战HTML+CSS布局（实例入门篇）
转自:https://www.cnblogs.com/hmyprograming/archive/2012/03/23/2414373.html 学习这篇入门教程我们假定你已经具有了一定的HTML基础 ...
html5图片列表纵向,div css图片列表实例布局案例ul li布局
DIV CSS布局图文列表布局案例 ul li图文列表使用div css ul li布局图文列表小局部案例,学习图文列表布局实际案例. div+css图文布局案例图本案例在DIVCSS5模板基础上 ...
DIV+CSS布局基本流程及实例介绍
都说用DIV+CSS布局来设计网站便于优化,容易被收录,那么你对DIV+CSS布局的用法是否了解?CSS布局是网页html通过DIV标签+CSS样式表代码开发制作的(html)网页的统称.DIV+CS ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼
文章转自:http://www.cnblogs.com/honoka/p/5161836.html 今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽 ...
CSS 布局实例系列（三）如何实现一个左右宽度固定，中间自适应的三列布局——也聊聊双飞翼...
今天聊聊一个经典的布局实例: 实现一个三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化可能很多朋友已经笑了,这玩意儿通过双飞翼布局就能轻松实现.不过,还请容我在双飞 ...
php div 实现上中下布局,上中下结构DIV CSS布局实例
实例布局之上中下结构DIV CSS布局上中下结构为常见布局结构,一般普通(企业网站)网页我们可以大致分为上(头部).中(内容区).下(底部版权)组成.而这其实是由最简单上下结构CSS布局演变而成,只 ...
div+css布局实例淘宝分析(三)(1)
在第二节我们分析了淘宝网页的导航条代码,这次我们来分析淘宝网页的主要内容块,由于内容比较多,所以我准备分开小块来分析,对于刚入门学DIV,CSS 布局的朋友来说,不知道从那里下手,我以为从分析优秀网站 ...
html制作搜狗主页,自学htmlcss之仿搜狗主页(示例代码)
自学至今有25天左右,到目前为止html和css基础知识学的差不多了. 目前正在仿做静态页面之搜狗首页这个原模仿网站首页下面的这是目前为止我做的效果今天从中午开始正式开始写,写到晚上9点,只完成 ...