第一个网页
2017-01-31 本文已影响0人
触发真爷们儿效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LOLer</title>
<link rel="stylesheet" href="css/shouye.css">
<link rel="stylesheet" href="css/base.css">
</head>
<body>
<div class="bg"><embed src="img/hbg.webm" autostart="true" loop="false" hidden="true">
<div class="logo"><a href=""></a></div>
<div class="h-nav">
<ul class="ul">
<li class="h-btn"><a class="font-header"href="">首页</a></li>
<li class="h-btn"><a class="font-header"href="">视频中心</a></li>
<li class="h-btn"><a class="font-header"href="">游戏资料</a></li>
<li class="h-btn"><a class="font-header"href="">商城</a></li>
<li class="h-btn"><a class="font-header"href="">赛事中心</a></li>
<li class="h-btn"><a class="font-header"href="">相关公告</a></li>
<li class="h-btn"><a class="font-header"href="">个人中心</a></li>
<li class="submit">亲爱的召唤师欢迎您<a href="" class="per-sub">登录</a></li>
</ul>
</div>
</div>
<dl class="sec1"><dt >此剑之势，愈斩愈烈。
<dd id="secE">This blade never gets any lighter.</dd>
</dt></dl>
<div class="center">
<ul class="between">
<li class="fenglei"><a href=""></a></li>
<li class="fenglei"><a href=""></a></li>
<li class="fenglei"><a href=""></a></li>
</ul>
</div>
<div class="later">
<div class="act">
<dl class="href">
<dt >英雄贺新春
<dd>集章换积分 领免费永久皮肤<a href="">
<div class="link">去看看</div>
</a></dd>
</dt>
</dl>
</div>
<div class="act">
<dl class="href">
<dt >暴走萝莉的新春灯笼
<dd>珍稀守卫限时销售，还赠新春灯笼<a href="">
<div class="link">去看看</div>
</a></dd>
</dt>
</dl>
</div>
<div class="act">
<dl class="href">
<dt >雄鸡限定 限时半价
<dd>9950点券<a href="">
<div class="link">去看看</div>
</a></dd>
</dt>
</dl>
</div>
<div class="touming "></div>
</div>
<dl class="sec2">
<dt>且随疾风前行，身后亦须留心。
<dd class="sece">Follow the wind,but watch your back.</dd>
</dt>
</dl>
<ul class="shiping">
<li class="video"><p class="dd">MISS解说</p><a href=""></a></li>
<li class="video"><p class="dd">小苍神探</p><a href=""></a></li>
<li class="video"><p class="dd">JY老师解说</p><a href=""></a></li>
</ul>
<ul class="shiping">
<li class="video"><p class="dd">小智解说</p><a href=""></a></li>
<li class="video"><p class="dd">笑笑七号</p><a href=""></a></li>
<li class="video"><p class="dd">若风解说</p><a href=""></a></li>
</ul>
<div class="footer">
<h1 class="list">关于我们<a href="">
<h2>网站介绍</h2>
<h2>网站荣誉</h2>
<h2>招贤纳士</h2>
<h2>联系我们</h2>
</a></h1>
<h1 class="list">商城服务<a href="">
<h2>营销战略</h2>
<h2>商家登录</h2>
</a></h1>
<h1 class="list">合作伙伴<a href="">
<h2>CIA</h2>
<h2>电信99区的你说坑人就是我</h2>
<h2>电信233区的你好胸呀</h2>
<h2>八坡扛把子</h2>
</a></h1>
<h1 class="list">新手上路<a href="">
<h2>游戏玩法</h2>
<h2>背景介绍</h2>
</a></h1>
<h1 class="list">关注我们<a href="">
</a>
</h1>
</div>
</body>
</html>
@charset"UTF-8";
body{
width: 1440px;
margin:0 250px;
}
.bg{
width: 1440px;
height: 600px;
position: relative;
}
.bg embed{
width: 1440px;
height: 600px;
}
.logo{
width: 220px;
height:111px;
float: left;
overflow: hidden;
display: inline-block;
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}
.h-nav{
width: 1300px;
height: 71px;
position: absolute;
top: 0px;
padding: 0 0 0 220px;
}
.ul{
height:71px;
}
.h-btn{
float: left;
}
.submit{
color: white;
}
.per-sub{
color: red;
text-decoration: none;
line-height: 71px;
}
.font-header{
color: yellow;
font-size: 30px;
line-height: 71px;
font-family: "微软雅黑";
text-decoration:none;
margin: 0 12.5px;
}
.sec1{
width: 1520px;
line-height: 100px;
text-align: center;
font-size: 28px;
font-family:"宋体";
color: white;
}
#secE{
font-size: 30px;
color: white;
}
.between{
padding-bottom: 60px;
}
.center{
width: 1000px;
margin: 0 auto;
}
.fenglei{
position: relative;
}
.tu{
position: absolute;
left: 220px;
}
.later{
position: relative;
}
.act{
position: relative;
}
.touming{
background: black;
width: 1440px;
height: 1810px;
position: absolute;
top: 0px;
opacity: 0.65;
}
.href{
width: 1440px;
height: 300px;
display: inline-block;
position: absolute;
top: 300px;
color: white;
z-index: 1;
text-align: center;
}
.act{
display: inline-block;
}
dt{
font-size:70px;
}
.link{
width: 200px;
height: 64px;
border: solid white 1px;
position: absolute;
top: 120px;
left: 620px;
font-size: 40px;
line-height: 64px;
color: white;
}
.sec2{
width: 1520px;
line-height: 100px;
text-align: center;
font-size: 28px;
font-family:"宋体";
padding-top 60px;
color: white;
padding:50px 0;
}
.sece{
font-size: 30px;
color: white;
}
.shiping{
width: 1000px;
margin: 0 auto;
}
.video{
display: inline-block;
width: 320px;
height: 430px;
background: yellow;
position: relative;
}
.touxiang{
position: absolute;
top:250px;
left: 0px;
z-index: 1;
border-radius:135px;
}
.dd{
text-align: center;
position: absolute;
top: 330px;
left: 160px;
color: black;
font-size: 30px;
}
.footer{
width: 1220px;
height: 300px;
background:#333;
position: relative;
padding: 42px 0px 42px 220px;
}
.list{
float: left;
color: white;
margin-right:80px;
margin-bottom: 62px;
}
a{
text-decoration: none;
}
h2{
color:#696767;
line-height: 27px;
font-size: 13px;
}
网盘链接：链接：http://pan.baidu.com/s/1kU7ySJH 密码：npr9
