CSS布局及实例仿LOL主页

最新推荐文章于 2022-05-24 12:09:27 发布

凡尘堕世

最新推荐文章于 2022-05-24 12:09:27 发布

阅读量618

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/weixin_46073353/article/details/111274872

版权

浮动概述

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

浮动前：
在这里插入图片描述浮动后

清除浮动

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

浮动引发的特殊效果

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;
}

凡尘堕世

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
CSS布局及实例仿LOL主页

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

扫一扫