CSS布局及实例仿LOL主页
浮动概述
如果将元素设置为浮动之后那么它将具备以下几个特点： 1.浮动元素会被排除在文档流之外，（脱离文档流）元素是不占有之前的页面空间，其他元素会上前补位 2.浮动元素会停靠在父元素的左边或右边，或者停留在其他已经浮动的元素的边上 3.浮动元素只会在当前行内浮动。 4.浮动元素拥有浮动功能之后依然还存在于父级元素中，只是飘起来了。 5.浮动处理----让多个块元素合成一排。 123456
浮动前：
浮动后
清除浮动
清除浮动并不是说把某一个元素的浮动效果清除掉 而是取消上面元素给自己带来的影响 clear left right 12345
浮动引发的特殊效果
1.父元素的宽度显示不是所有已浮动元素最后一个元素将被强制换行（卡主） 2.元素一旦浮动起来之后宽度就会变成自适应（非人为制定的情况下） 3.元素一旦浮动起来那么将会变成块级元素，尤其对行级元素影响最大 4.文本和行内元素会进行文字环绕的方式进行排列 1234
浮动元素对父级元素带来的影响
由于浮动元素脱离文档流的所以会导致元素不占有父级元素的空间，那么他会给父级元素带来影响 解决方案 1.直接给父级设置高度 弊端：必须要知道父级元素的准确高度 2.父级浮动 弊端：对后续元素有影响，父级的margin 0 auto 失效 3.为父级父元素添加 overflow:hidden或者auto 弊端： 元素一旦溢出就出被跟着影藏 4.在父级元素里面追加一个空元素 并设置为 clear：both 123456789
定位
relative: 与 static 相似，区别是 position 属性等于 relative 的元素还可以（通过应用 float 属性等)从文档的正常显示顺序里脱离出来。 absolute: 可以将设置的元素摆放到容纳它的“容器”的任何位置，这个容器要么是文档本身，要么是 一个有着 fixed 或 absolute 属性的父元素。这个元素在原始标记里出现的位置与它的显示位置无 关，因为它的显示位置由 top、left、right 和 bottom 等属性决定，可以用像素或百分比作为 单位设置这些属性的值。 fixed生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以 及 "bottom" 属性进行规定 1234567891011
仿制
目标图
制作思路
做好盒子以后，头部先一个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> 123456789101112131415
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>
12345678910111213141516173.通过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>
123456789101112131415161718192021222324254.确定好大盒子宽高之后通过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>
12345678910111213141516171819202122232425262728293031326设置好盒子大小，调整好图片大小，自动规划好位置
<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>
12345678910111213141516171819202122232425262728293031323334353637383940<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>
12345678910111213141516171819202122232425262728完成效果
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; }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588相关知识
大学生网页设计制作作业实例代码 (全网最全,建议收藏) HTML+CSS+JS
html、css基础（大型网站登录、主页）——项目小结
HTML + CSS = 静态的网站效果没有你做不到，只有你想不到！！！
使用HTML制作静态宠物网站——蓝色版爱宠之家(HTML+CSS)
动物主题网页设计（小白必看）
HTML学生个人网站作业设计：宠物网站设计——萌宠有家(5页) HTML+CSS 简单DIV布局宠物介绍网页模板代码 DW学生个人网站制作成品下载
制作一个简单HTML宠物猫网页（HTML+CSS）
Web课程设计：宠物网站设计——萌宠有家(5页) HTML+CSS 简单DIV布局宠物介绍网页模板代码
基于HTML5、DIV与CSS的宠物狗个性化服务网站前端设计与实现
HTML做一个简单漂亮的宠物网页（纯html代码）
网址: CSS布局及实例仿LOL主页 https://m.mcbbbk.com/newsview425911.html
| 上一篇: 市场调查与宠物训练服务市场考核试 |
下一篇: 豆瓣哥训狗笔记小组 |
