静态页面——王者

最新推荐文章于 2022-12-28 14:23:28 发布

gjklj

最新推荐文章于 2022-12-28 14:23:28 发布

阅读量524

点赞数 1

文章标签： html css

本文链接：https://blog.csdn.net/gjklj/article/details/106865211

版权

页面效果

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/5.25.css.css">
   
</head>
<body>
    <header>
        <div class="hd1">
            <div class="h_left">
                <div class="bg1"></div>
                <h2>内容中心</h2>
            </div>
            <div class="h_right">
                <div class="bg2"></div>
                <h2>更多</h2>
            </div>
        </div>
        <div class="hd2">
            <a href="">精品栏目</a>
            <span>|</span>
            <a href="">赛事精品</a>
            <span>|</span>
            <a href="">英雄攻略</a>
        </div>
        <div class="hd3">
            <button>最新</button>
            <button>王者克制论</button>
            <button>王者视角</button>
            <button>峡谷情报局</button>
            <button>国服观影路</button>
            <button>百星王者带你飞</button>
            <button>寒夜教练视角</button>
            <button>棋高一招</button>
        </div>
        
        
    </header>
    <div class="tro">
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img06.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>6.3万</span>
                        </div>
                        <span>2020-05-23</span>
                    </div>
                </a>
               
            </div>
            <span class="sp">【棋高一招2】第五期 扶桑三远法刺，重庆QG.大牛教你宫本武藏人</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img08.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>483.5万</span>
                        </div>
                        <span>2020-05-20</span>
                    </div>
                </a>
                
            </div>
            <span class="sp">【王者克制论】摇身一变，坦刺无敌？李九教你完美克制白起</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img01.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>508.6万</span>
                        </div>
                        <span>2020-05-20</span>
                    </div>
                </a>
                
            </div>
            <span class="sp">【百星王者带你飞】第136期：“坦刺”代表！抗压霸王白起！</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img03.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>108.0万</span>
                        </div>
                        <span>2020-05-16</span>
                    </div>
                
                </a>
                
            </div>
            <span class="sp">【棋高一招2】第四期 九蜀战士哪家强，KSSC.叶凡称霸王</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img07.jpg" style="width: 230px;" height="140px">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>12.5万</span>
                        </div>
                        <span>2020-05-14</span>
                    </div>
                </a>
                
            </div>
            <span class="sp">【王者克制论】裂魂来袭，炮轰四方太无敌？李九完美克制黄忠</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img04.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>67.6万</span>
                        </div>
                        <span>2020-05-12</span>
                    </div>
                </a>
                
            </div>
            <span class="sp">【王者炸麦了】强强对决 冲刺季后赛</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img02.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>535.8万</span>
                        </div>
                        <span>2020-05-11</span>
                    </div>
                </a>
               
            </div>
            <span class="sp">【百星王者带你飞】第134期 鬼都怕的男人，一勾超人钟馗</span>
        </div>
        <div class="box">
            <div class="tu">
                <a href=""><img src="images/lx/img05.jpg">
                    <div class="sj">
                        <div class="sj_left">
                            <div class="bg"></div>
                            <span>105.6万</span>
                        </div>
                        <span>2020-05-09</span>
                    </div>
                </a>
               
            </div>
            <span class="sp">【棋高一招2】第三期 新版攻辅神射，TES.阿虾教你登顶出神入化之</span>
        </div>
    </div>
    <div class="fix">
        <a href="" ><img src="images/lx/cc-arrow-circle-left.png"></a>
        <a href="" ><img src="images/lx/cc-arrow-circle-right.png"></a>

    </div>
</body>
</html>

CSS

body,p,h2{
    margin: 0;
}
*{
    font-family: 微软雅黑;
}
header{
    width: 980px;
    overflow: hidden;
    margin: auto;
}
header .hd1{
    width: 980px;
    overflow: hidden;
}
.h_left{
    float: left;
}
.h_right{
    float: right;
    margin-top: 5px;
}
.h_left .bg1{
    width: 23px;
    height: 23px;
    float: left;
    background-image:url(../images/lx/icon.png);
    background-repeat: no-repeat;
}
.h_left h2{
    float: left;
    padding: 0;
    font-size: 100%;
    line-height: 23px;
    margin-left: 10px;
}
.h_right .bg2{
    width: 14px;
    height:14px;
    float: left;
    background-image: url(../images/lx/more.png);
    background-repeat: no-repeat;
}
.h_right h2{
    font-size: 100%;
    float: left;
    font-weight: normal;
    padding: 0;
    line-height: 14px;
    margin-left: 10px;
}
 header .hd2{
    width: 980px;
    height: 38px;
    margin: auto;
    background-color: #f1f0ee;
    margin-top: 20px;
}
.hd2 a{
    float: left;
    color:#777777;
    text-decoration: none;
    display: block;
    width: 323px;
    text-align: center;
    line-height: 38px;
}
.hd2 a:nth-child(1){
    border-bottom: 2px solid #efb336;
    color: #444444;
}
.hd2 span{
    color: #444444;
    line-height: 38px;
    float: left;
}
header .hd3{
    width: 980px;
    overflow: hidden;
    margin-top: 15px;
}
.hd3 button{
   float: left;
   border: none;
   border-radius: 10px;
   margin-right: 10px;
   color: #444444; 
   font-size: 16px;
   text-align: center;
   line-height: 16px;
}
.hd3 button:nth-child(1){
    background-color: #efb336;
    color: white;
}
.tro{
    width: 980px;
    overflow: hidden;
    margin: auto;
    margin-top: 10px;
}
.tro .box{
    width: 230px;
    overflow: hidden;
    float: left;
    margin-right: 20px;
    margin-bottom: 40px;
}
.tro .box:nth-child(4),.tro .box:nth-last-child(1){
    margin-right: 0;
}
.box .tu{
    width: 230px;
    overflow: hidden;
}
.box span{
    color: #444444;
    font-size: 14px;
}
.tu a{
    display: block;
    width: 230px;
    height: 140px;
    position: relative;
}
.tu a .sj{
    width: 230px;
    height: 25px;
    position: absolute;
    bottom: 0;
    background-color: rgba(0, 0,0,0.6);
}
.sj .sj_left{
    width: 100px;
    height: 25px;
    margin-left: 10px;
    float: left;
}
.sj span{
    float: right;
    font-size: 12px;
    color: white;
    margin-right: 10px;
    line-height: 25px;
}
.sj_left .bg{
    width: 12px;
    height: 12px;
    float: left;
    background-image: url(../images/lx/icon2.png);
    background-repeat: no-repeat;
    padding-left: 12px;
    margin-top: 6px;
}
.sj_left span{
    float: left;
    line-height: 25px;
}
.fix{
    position: fixed;
    width: 70px;
    height: 32px;
    bottom: 20px;
    left: 48%;
}
.fix a{
    display: block;
    width: 32px;
    height: 32px;
    float: left;
}

gjklj

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
静态页面——王者

页面效果HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet"
复制链接

扫一扫