静态页面——王者"/>
静态页面——王者
页面效果
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;
}
更多推荐
静态页面——王者
发布评论