魔兽世界首页静态界面

最新推荐文章于 2021-03-01 11:16:54 发布

V________

最新推荐文章于 2021-03-01 11:16:54 发布

阅读量472

点赞数

分类专栏： web前端文章标签： css html5

本文链接：https://blog.csdn.net/V________/article/details/109467453

版权

web前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

魔兽世界首页静态界面

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/index.css">
    <title>魔兽</title>
</head>

<body>
    <!-- 主体图片区域 -->
    <main>
        <!-- 头部导航 -->
        <header>
            <ul>
                <li><a href="#">进入官网</a></li>
                <li><a href="#">账号注册</a></li>
                <li><a href="#">充值管理</a></li>
            </ul>
            <ul>
                <li><a href="#">游戏下载</a></li>
                <li><a href="#">客服中心</a></li>
                <li><a href="#">官方论坛</a></li>
            </ul>
            <img src="./IMG/logo.png" alt="魔兽世界">
        </header>
        <!-- 按钮 -->
        <div>
            <div>
                <p>了解详情</p>
            </div>
            <div>
                <p>客户端下载</p>
            </div>
        </div>
        <!-- 图片区域 -->
        <div>
            <figure>
                <p>"暗影国度"前瞻</p>
                <img src="./IMG/new1.png" alt="">
            </figure>
            <figure>
                <p>前夕信息汇总</p>
                <img src="./IMG/new2.png" alt="">
            </figure>
            <figure>
                <p>"彼岸之地"动画短片</p>
                <img src="./IMG/new3.png" alt="">
            </figure>
            <figure>
                <p>购买游戏时间</p>
                <img src="./IMG/new4.png" alt="">
            </figure>
        </div>
    </main>
    <!-- 底部区域 -->
    <footer>
        <div>
            <!-- 第一行 -->
            <div>
                <!-- 左边 -->
                <div>
                    <p><i></i>在线客服</p>
                    <p><i></i>反馈</p>
                    <p><i></i>加入我们</p>
                </div>
                <!-- 右边 -->
                <div>
                    <p>合作品牌：<i></i><em>+</em></p>
                </div>
            </div>
            <!-- 第二行 -->
            <div>
                <!-- 左边 -->
                <div>
                    <img src="./IMG/logo_blizzard.png" alt="blizzard">
                    <img src="./IMG/logo_ne.png" alt="网易">
                </div>
                <!-- 右边 -->
                <div>
                    <p>隐私&nbsp;&nbsp;|&nbsp;&nbsp;法律条款&nbsp;&nbsp;|&nbsp;&nbsp;API</p>
                    <p>©2020 暴雪娱乐有限公司版权所有 由上海网之易网络科技发展有限公司运营 著作权侵权 | 新出审字[2014]1451号</p>
                    <p>文网进字[2014]0116号 | 沪网文号〔2017〕9633-727号 | 增值电信业务经营许可证编号：沪B2－20080012 | 沪ICP备：沪B2－20080012</p>
                    <p>互联网违法和不良信息举报电话：0571-28090163 沪公网安备 31011502022167号 | 上海市网络游戏行业自律公约</p>
                    <p>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        <i></i>
                        &nbsp;|&nbsp;&nbsp;适龄提示：适合13岁及以上使用 家长监护工程 | 网上有害信息专区</p>
                </div>
            </div>
            <p>积极健康的游戏心态是健康游戏的开端，本游戏故事情节设置紧凑，请您合理控制游戏时间，避免沉溺游戏影响生活，注意自我保护，防范网络陷阱。
                健康游戏忠告：抵制不良游戏，拒绝盗版游戏。注意自我保护，谨防受骗上当。适度游戏益脑，沉迷游戏伤身。合理安排时间，享受健康生活。</p>
        </div>
    </footer>
</body>

</html>

::selection {
    color: white;
    background-color: #fe57a1;
}
main {
    width: 100%;
    background-image: url(../IMG/wowloading.jpg);
    background-position: center top;
    background-size: cover;
    overflow: hidden;
    font-size: 0px;
    padding: 45px 0 120px;
}
main>header {
    width: 1200px;
    border-top: 2px solid #412e23;
    border-bottom: 2px solid #412e23;
    margin: 0 auto;
    margin-top: 45px;
    display: flex;
    justify-content: space-between;
    background-color: #251711;
    position: relative;
}
main>header>ul{
    display: flex;
}
main>header>ul a{
    display: inline-block;
    color: #f9b801;
    font-size: 16px;
    text-decoration: none;
    padding: 28px 48px;
    border-left: 2px solid #412e23;
}
main>header>ul a:hover {
    font-weight: bold;
    color: white;
}
main>header ul>li:nth-last-child(1)>a {
    border-right: 2px solid #412e23;
}
main>header>img {
    height: 125px;
    position: absolute;
    top: -30px;
    left: 443px;
}
main>div:nth-of-type(1) {
    width: 690px;
    height: 85px;
    margin: 0 auto;
    margin-top: 495px;
    display: flex;
    justify-content: space-between;
}
main>div:nth-of-type(1)>div {
    height: 100px;
    width: 100%;
    background-image: url(../IMG/btn.png);
}
main>div:nth-of-type(1)>div>p {
    color: black;
    font-weight: bold;
    font-size: 28px;
    text-align: center;
    margin-top: 34px;
}
main>div:nth-of-type(1)>div:hover {
    transform: scale(1.05);
}
main>div:nth-of-type(2) {
    width: 1200px;
    margin: 0 auto;
    margin-top: 65px;
    display: flex;
    justify-content: space-between;
}
main>div:nth-of-type(2)>figure {
    border: 2px solid #3e2b22;
    box-sizing: border-box;
}
main>div:nth-of-type(2)>figure:hover {
    transform: scale(1.05);
}
main>div:nth-of-type(2) p {
    height: 50px;
    line-height: 50px;
    text-align: center;
    color: #f9b801;
    font-size: 20px;
    font-weight: bold;
    background-color: black;
    border-bottom: 2px solid #3e2b22;
}
footer {
    background-color: black;
    color: #4b4e4d;
    font-size: 14px;
    padding: 55px 0 30px;
    border-top: 2px solid #3e2b22;
}
footer>div {
    width: 1000px;
    height: auto;
    margin: 0 auto;
}
footer>div>div:nth-child(1) {
    color: white;
    display: flex;
    justify-content: space-between;
}
footer>div>div:nth-child(1)>div:nth-child(1) {
    width: 295px;
    display: flex;
    justify-content: space-between;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p i{
    display: inline-block;
    height: 18px;
    width: 18px;
    background-image: url(../IMG/f-business.png);
    margin-right: 10px;
    vertical-align: -4px;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p:nth-child(1)>i {
    background-position: -6px -7px;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p:nth-child(2)>i {
    background-position: -36px -7px;
}
footer>div>div:nth-child(1)>div:nth-child(1)>p:nth-child(3)>i {
    background-position: -64px -7px;
}
footer>div>div:nth-child(1)>div:nth-child(2)>p i {
    margin: 0 10px;
    display: inline-block;
    width: 92px;
    height: 18px;
    background-image: url(../IMG/business-logo.png);
    background-position: -352px -2px;
    vertical-align: -2px;
}
footer>div>div:nth-child(1)>div:nth-child(2)>p>em {
    font-style: normal;
    color: #f9b801;
    font-size: 18px;
}
footer>div>div:nth-child(1)>div:nth-child(2) {
    width: 200px;
    display: flex;
    justify-content: space-between;
}
footer>div>div:nth-child(2) {
    padding: 75px 0 35px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #4b4e4d;
}
footer>div>div:nth-child(2)>div:nth-child(1) {
    width: 365px;
    display: flex;
    justify-content: space-between;
}
footer>div>div:nth-child(2)>div:nth-child(1)>img:nth-child(1) {
    width: 150px;
}
footer>div>div:nth-child(2)>div:nth-child(1)>img:nth-child(2) {
    width: 190px;
    height: 40px;
    margin-top: 53px;
}
footer>div>div:nth-child(2)>div:nth-child(2) {
    width: 570px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:not(:nth-child(1)) {
    font-size: 12px;
    line-height: 1.7;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-child(1) {
    color: white;
    margin-bottom: 10px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1) {
    margin-top: 10px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1) i {
    height: 30px;
    width: 27px;
    display: inline-block;
    background-size: cover;
    margin-right: 2px;
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(1) {
    background-image: url(../IMG/1.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(2) {
    background-image: url(../IMG/2.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(3) {
    background-image: url(../IMG/3.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(4) {
    background-image: url(../IMG/4.png);
}
footer>div>div:nth-child(2)>div:nth-child(2)>p:nth-last-child(1)>i:nth-child(5) {
    background-image: url(../IMG/5.png);
}
footer>div>p {
    width: 810px;
    margin: 0 auto;
    font-size: 12px;
    text-align: center;
    margin-top: 15px;
    line-height: 2;
}