静态页面——王者

页面效果

HTML

    
    
    
    
   


    

        

            

                

                
内容中心
            
            

                

                
更多
            
        
        

            精品栏目
            |
            赛事精品
            |
            英雄攻略
        
        

            最新
            王者克制论
            王者视角
            峡谷情报局
            国服观影路
            百星王者带你飞
            寒夜教练视角
            棋高一招
        
        
        
    
    

        

            

                
                    

                        

                            

                            6.3万
                        
                        2020-05-23
                    
                
               
            
            【棋高一招2】第五期 扶桑三远法刺，重庆QG.大牛教你宫本武藏人
        
        

            

                
                    

                        

                            

                            483.5万
                        
                        2020-05-20
                    
                
                
            
            【王者克制论】摇身一变，坦刺无敌？李九教你完美克制白起
        
        

            

                
                    

                        

                            

                            508.6万
                        
                        2020-05-20
                    
                
                
            
            【百星王者带你飞】第136期：“坦刺”代表！抗压霸王白起！
        
        

            

                
                    

                        

                            

                            108.0万
                        
                        2020-05-16
                    
                
                
                
            
            【棋高一招2】第四期 九蜀战士哪家强，KSSC.叶凡称霸王
        
        

            

                
                    

                        

                            

                            12.5万
                        
                        2020-05-14
                    
                
                
            
            【王者克制论】裂魂来袭，炮轰四方太无敌？李九完美克制黄忠
        
        

            

                
                    

                        

                            

                            67.6万
                        
                        2020-05-12
                    
                
                
            
            【王者炸麦了】强强对决 冲刺季后赛
        
        

            

                
                    

                        

                            

                            535.8万
                        
                        2020-05-11
                    
                
               
            
            【百星王者带你飞】第134期 鬼都怕的男人，一勾超人钟馗
        
        

            

                
                    

                        

                            

                            105.6万
                        
                        2020-05-09
                    
                
               
            
            【棋高一招2】第三期 新版攻辅神射，TES.阿虾教你登顶出神入化之
        
    
    

        
        

    

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