HTML英雄联盟 效果图&代码结构 (多多指教,感谢)

效果图(如下)

在这里插入图片描述

*[HTML]: 结构(html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>英雄联盟</title>
<link rel="stylesheet" href="../../css/1204/英雄联盟.css">
</head>
<body>
    <div class="box">
    <div class="top">
        <h1></h1>
        <ul>
            <li class="l1"><p>专区首页</p>Home</li>
            <li class="l1"><p>新闻中心</p>News</li>
            <li class="l1"><p>视频中心</p>Video</li>
            <li class="l1"><p>原创攻略</p>Picture</li>
            <li class="l1"><p>数据库</p>Database</li>
            <li class="l1"><p>移动新闻</p>te5</li>
        </ul>
    </div>
    <div class="top1">
       <div class="top1-left">
           <p class="p1">s9赛季:<span class="c1">9.5版本专题</span>|<span class="c1">LPL五周年专题</span>|<span class="c1">至臻皮肤专题</span></p>
           <p class="p2">节目连载:<span class="c1">主播玩脱了</span>|<span class="c1">顶级主播秀</span>|<span class="c2">每日五杀</span></p>
       </div>
       <div class="top1-center">
            <p class="pp1">实用工具:<span class="cc1">s8符文模拟器</span>|<span class="cc1">s8符文研究室</span>|<span class="cc1">s8季前赛畅想室</span></p>
            <p class="pp2">热门推荐:<span class="cc2">LOL小游戏</span>|<span class="cc1">专题大全</span>|<span class="cc2">最新皮肤</span></p>
       </div>
       <div class="top1-right">
           <input type="text" placeholder="此处输入搜索内容" class="sousuo">
           <p class="pp3">热门搜索:<span class="ccc3">免费领皮肤</span><span class="ccc1">LPL春季赛</span><span class="ccc2">8.7版本</span></p>
    </div>
    </div>
    <div class="left">
        <div class="left-top">
            <p class="rm1">热门推荐</p>
            <p class="xia1"></p>
            <p class="rew">最新英雄</p> 
            <div class="maomi">
                <p class="name1">悠米</p>
            </div>
            <div class="sailasi">
                <p class="name2">塞拉斯</p>
            </div>
            <div class="nikou">
                <p class="name3">妮蔻</p>
            </div>
            <div class="lol">
                <p class="lpl1"><span class="ss1">LPL夏季赛</span><span class="ss2">LPL春季赛</span><span class="ss3">进入专题>></span></p>
                <p class="p123"></p>
                <p class="ff0"><input type="button" value="已结束" class="u1">8/24 17:00<span class="a1">EDG</span><span class="a2"></span>0:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p>
                <p class="ff1"><input type="button" value="已结束" class="u1">8/30 17:00<span class="a1">IG</span><span class="a2"></span>1:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p>
                <p class="ff2"><input type="button" value="未开始" class="u2">1/24 17:00<span class="a1">FPX</span><span class="a2"></span>2:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p>
                <p class="ff3"><input type="button" value="未开始" class="u2">1/24 17:00<span class="a1">SKT</span><span class="a2"></span>3:3<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p>
                <p class="ff4"><input type="button" value="已结束" class="u1">1/14 17:00<span class="a1">WE</span><span class="a2"></span>1:2<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p>
                <p class="ff5"><input type="button" value="已结束" class="u1">1/04 17:00<span class="a1">G2</span><span class="a2"></span>0:2<span class="a3"></span>BLG<input type="button" value="视频" class="u4"></p>
                  
           </div>
        </div>
    </div>
    <div class="right">
        <ul>
            <li class="sss2">9.16版本全面解读</li>
            <li class="sss1">9.15版本全面解读</li>
            <li class="sss1">9.14版本全面解读</li>
            <li class="sss1">2019洲际赛直播</li>
            <li class="sss1">9.13版本全面解读</li>
        </ul>
    </div>


    </div>

</body>
</html>

*[HTML]: 样式(CSS)

*{
    margin: 0;
    padding: 0;
}
.box{
    width: 1200px;
    height: 660px;
    background-color: whitesmoke;
    margin:0 auto;
}
.h1,.top,.ul li,.top1{
    margin:0 auto;
}
h1{
    background: url(..[外链图片转存失败,源站可能有防盗存下来直接上传/mg-/英雄联盟/lol_logo.png(%E2%80%A6/%E2%80%A6/img/%E8%8B%B1%E9%9B%84%E8%81%94%E7%9B%9F/lol_logo.png)]) no-repeat;
    width: 170px;
    height: 60px;
    float: left;
    margin-top: 20px;
    margin-left: 90px;
    
}
.top{
    width: 1200px;
    height: 110px;
    background-color: blue;
    background: url(../../img/英雄联盟/navi_bg.jpg) no-repeat;
}
ul>.l1{
    list-style: none;
    float: left;
    border-right:1px solid rgb(119, 119, 241);
    color: rgb(169, 168, 245);
    text-align: center; 
    margin-top: 30px;
    height: 30px;
    padding-left: 30px;
    padding-right: 30px; 
    font-size: 18px;
}
.l1{
    border: 0;
}
.top1-left,.top1-center,.top1-right{
    float: left;
}
.top1{
    width: 1200px;
    height: 100px;
    background-color: rgb(0, 0, 0);
    margin-top: -1px;  
    position: relative;  
}
.top1 .top1-left .p1,.p2{
    color: rgb(136, 136, 179);
}
.p1,.p2{
    padding-top: 20px;
    margin-left: 50px;
    font-size: 12px;
}
.c1,.c2,.cc1,.cc2,.ccc1,.ccc2{
    padding-left: 10px;
    padding-right: 10px;
}
.c2{
    color: red;
}
.top1 .top1-center .pp1,.pp2{
    color: rgb(136, 136, 179);
   
    
}
.pp1,.pp2{
    padding-top: 20px;
    margin-left: 95px;
    font-size: 12px;
}
.top1-center{
    position: absolute;
    right: 395px;
    top: 0px;
}
.cc2{
    color: red;
}
input{
    position: relative;
    right: -500px;
    width: 200px;
    top: 15px;
}
.sousuo{
    background: url(../../img/英雄联盟/ico.png)no-repeat;
    background-position: 182px -28px;
    background-color: rgb(6, 6, 99);
    border: 1px solid rgb(6, 6, 99);
    height: 25px;
}
.top1 .top1-right .pp3,.ccc1,.ccc2{
    color: rgb(136, 136, 179);
}
.pp3{
    padding-top: 20px;
    margin-left: 95px;
    font-size: 12px;
    position: relative;
    right: -405px;
    top: 8px;
}
.ccc3{
    color: red;
}
.left,.right{
    float: left;
}
.box .left{
    width: 310px;
    height: 422px;
    background-color: rgb(21, 3, 68);
    margin-top: 10px;
    margin-left: 45px;
    position: relative;
}
.box .right{
    width: 826px;
    height: 422px;
    background-color: rgb(0, 225, 255);
    margin-top: 10px;
    margin-left: 10px;
    border-radius: 8px 8px 8px 8px;
    background: url(../../img/英雄联盟/120-1ZR01T4080-L.jpg) no-repeat;
}
.left-top{
    width: 310px;
    height: 140px;
    background-color: rgb(17, 3, 77);
    
    
}
.left>.left-top>.rm1{
    margin-left: 15px;
    color: rgb(136, 136, 179) ;
    font-size: 13px;
    font-weight: bold;
}
.rm1{
    width: 73px;
    background: url(../../img/英雄联盟/ico.png)no-repeat;
    background-position:55px 13px;
    padding-top: 10px;
}
.left>.left-top>.xia1{
    border-bottom: 2px solid rgb(92, 91, 91);
    width:270px ;
    margin-top: 10px;
    margin-left: 15px;
}
.left>.left-top>.rew{
    width: 12px;
    height: 65px;
    background-color: green;
    color: white;
    
    margin-left: 15px;
    margin-top: 10px;
    font-size: 12px;
}
.maomi,.sailasi,.nikou{
    float: left;
    margin-left: 10px; 
}
.maomi{
    width: 70px;
    height: 70px;
    background: green;
    position:absolute;
    top: 47px;
    left: 30px;
    background:url(../../img/英雄联盟/Yuumi.png) no-repeat;
    background-size: 70px;
}
.sailasi{
    width: 70px;
    height:70px;
    background: rgb(17, 0, 255);
    position:absolute;
    top: 47px;
    left: 110px;
    background: url(../../img/英雄联盟/120-1Z304153I20-L.png) no-repeat;
    background-size: 70px;
}
.nikou{
    width: 70px;
    height:70px;
    background: rgb(255, 0, 157);
    position:absolute;
    top: 47px;
    left: 190px;
    background: url(../../img/英雄联盟/120-1Z304153G30-L.png) no-repeat;
    background-size: 70px;
}
.name1,.name2,.name3{
    color: gainsboro;
    font-size: 13px;
    padding-top: 72px; 
    padding-left: 20px;   
}
.lpl1{
    color:rgb(211, 210, 210);
    padding-top: 30px;
    font-size: 13px;
}
.ss1,.ss2,.ss3{
padding-left: 20px;
}
.p123{
    border-bottom: 1px solid green;
    padding-top: 5px;
    width: 300px;
}
.ss3{
    font-size: 11px;
    padding-left: 40px;
    color: rgb(4, 167, 72);
}
.ss1{
    display:inline-block;
    width: 85px;
    height: 40px;
    line-height: 40px;
    background-color: teal;
    padding-left: 20px;
}
.ff0,.ff1,.ff2,.ff3,.ff4,.ff5{
    color: gainsboro;
    font-size: 13px;
    padding-top: 7px;
}
.u1{
    width: 50px;
    height: 20px;
    background-color: orange;
    border: 1px solid orange;
    color: white;
    position: relative;
    left: 0px;
    top: 0px;
    margin-left: 5px;
    margin-right: 5px;   
}
.u2{
    width: 50px;
    height: 20px;
    background-color:blue;
    border: 1px solid blue;
    color: white;
    position: relative;
    left: 0px;
    top: 0px;
    margin-left: 5px;
    margin-right: 5px;   
}
.a1{
    padding-left: 10px;
    padding-right: 10px;
}
.a2{
    display: inline-block;
    background: url(../../img/英雄联盟/1483499673-69723s1.png)no-repeat;
    width: 25px;
    height: 25px;
    background-size: 20px;
    background-position: -1px 5px;
}
.a3{
    display: inline-block;
    background: url(../../img/英雄联盟/1514199742-45872s1.png)no-repeat;
    width: 25px;
    height: 25px;
    background-size: 20px;
    background-position: 5px 5px;
}
.u4{
    width: 34px;
    height: 20px;
    background-color: rgb(0, 0, 0);
    border: 1px solid green;
    color:green;
    position: relative;
    left: 2px;
    top: 0px;
    margin-left: 5px;
    margin-right: 5px;  
    font-size: 12px; 
}
ul>.sss1{
    list-style: none;
    float: left;
    color: rgb(206, 205, 236);
    text-align: center; 
    margin-top: 30px;
    height: 30px;
    margin-right: 4px; 
    font-size: 13px;
    background-color: rgba(0, 0, 0, 0.459);
    width: 160px;
    height: 50px;
    line-height: 50px;
}
.sss2{
    list-style: none;
    float: left;
    color: rgb(255, 255, 255);
    text-align: center; 
    margin-top: 30px;
    height: 30px;
    margin-right: 4px; 
    font-size: 13px;
    background-color: green;
    width: 160px;
    height: 50px;
    text-align: center;
    margin-left: 5px;
    line-height: 50px;
}
.sss1,.sss2{
    position: relative;
    top: 337px;
}
©️2022 CSDN 皮肤主题:游动-白 设计师:我叫白小胖 返回首页

打赏作者

Theladder666

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值