第一个网页

作者: 触发真爷们儿效果 | 来源:发表于2017-01-31 20:04 被阅读0次

一个简易server
WWW的历史
寒假Second
第一个网页
第一个网页
Python实战计划初战
《HTML》
我的第一个网页？
第一个静态网页
第一个网页制作

<!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="">![](img/logo.png)</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="">![](img/1.jpg)![](img/5.jpg)</a></li>
        <li class="fenglei"><a href="">![](img/6.jpg)![](img/4.jpg)</a></li>
        <li class="fenglei"><a href="">![](img/3.jpg)![](img/7.jpg)![](img/2.jpg)</a></li>
    </ul>
    </div>
    <div class="later">
        <div class="act">
            ![](img/8.jpg)
            <dl class="href">
            <dt >英雄贺新春
                <dd>集章换积分 领免费永久皮肤<a href="">
                        <div class="link">去看看</div>
                    </a></dd>
            </dt>
            </dl>
        </div>
        <div class="act">
        ![](img/9.jpg)
        <dl class="href">
            <dt >暴走萝莉的新春灯笼
                <dd>珍稀守卫限时销售，还赠新春灯笼<a href="">
                        <div class="link">去看看</div>
                    </a></dd>
            </dt>
            </dl>
        </div>
        <div class="act">
        ![](img/10.jpg)
            <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="">![](img/111.jpg)![](img/11.jpg)</a></li>
        <li class="video"><p class="dd">小苍神探</p><a href="">![](img/121.jpg)![](img/12.jpg)</a></li>
        <li class="video"><p class="dd">JY老师解说</p><a href="">![](img/131.jpg)![](img/13.jpg)</a></li>
    </ul>
    <ul class="shiping">
        <li class="video"><p class="dd">小智解说</p><a href="">![](img/141.jpg)![](img/14.jpg)</a></li>
        <li class="video"><p class="dd">笑笑七号</p><a href="">![](img/151.jpg)![](img/15.jpg)</a></li>
        <li class="video"><p class="dd">若风解说</p><a href="">![](img/161.jpg)![](img/16.jpg)</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="">
                ![](img/footlogo.png)
                
            </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