用html+css做出一个地下城游戏网站页面,新人练手推荐,带源码

4 篇文章 2 订阅
3 篇文章 0 订阅

如果你是一名DNF爱好者,恰好你又想学习做网站,那这个例子绝对是你不可错过的练习。

先上页面效果截图:

在这里插入图片描述

页面代码如下:

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/img.css">
    <link rel="stylesheet" href="./css/divweizhi.css">
</head>

<body bgcolor="#000">
    <div class="div-zon">
        <img class="img1" src="./images/bg.png" alt="">
        <div class="div-top">
            <img class="img2" src="./images/navbj.png" alt="">
            <div class="img4 tr1">
                <tr class="trjianju">
                    <a href="">主页</a>
                    <a href="">日志</a>
                    <a href="">音乐</a>
                    <a href="">留言</a>
                    <a href="">更多</a>
                </tr>
            </div>
            <div class="img4 tr2">
                <tr class="trjianju">
                    <a href="">主页</a>
                    <a href="">日志</a>
                    <a href="">音乐</a>
                    <a href="">留言</a>
                    <a href="">更多</a>
                </tr>
            </div>
            <div>
                <img class="img3" src="./images/logo.png" alt="">
                <img class="img4 touwoyip" src="./images/vote-button.png" alt="">
                <img class="img4 guijians" src="./images/vote.png" alt="">
                <img class="img4 vote1" src="./images/vote1.jpg" alt="">
                <img class="img4 vote2" src="./images/vote2.jpg" alt="">
                <img class="img4 vote3" src="./images/vote3.jpg" alt="">
                <img class="img4 vote4" src="./images/vote4.jpg" alt="">
                <img class="img4 vote5" src="./images/vote5.jpg" alt="">
            </div>
            <div>
                <!-- dnf简介 -->
                <div>
                    <img class="abs-tatle img4" src="./images/abstract-title.png" alt="">
                    <img class="img4 abs-lefe" src="./images/abstract-left.png" alt="">
                    <div class="abs-div img4">
                        <p>
                            阿拉德大陆的文明之光闪耀之前,世界是一个无边的宇宙,孕育着各种形态的生命。这些生命分散在各种虚空异界和地下城堡里,用它们的勤劳和智慧,创建着世界的繁荣。生存在完美大陆阿拉德的人类和精灵,也属于各种形态的生命之一。他们用诸神赋予的智慧,创造了被众多异界生命钦羡的阿拉德文明。相传,连接阿拉德大陆和其他虚空异界的天空之城,就是天族和魔族为方便往来阿拉德大陆而建造的... ...
                        </p>
                    </div>
                </div>
                <!-- 空间志 -->
                <div class="img4">
                    <img class="spc-log" src="./images/space-log.png" alt="">
                    <img class="website" src="./images/website.jpg" alt="">
                    <img class="spc-log-bj" src="./images/space-log-bj.jpg" alt="">
                    <div class="spc-log-bj-div img4">
                        <!-- 1 -->
                        <div class="kjz-div-img ">
                            <img src="./images/space-log-icon1.jpg " alt="">
                            <div class="kjz-div-wenzi-div img4">
                                <th>
                                    <font class="kjz-div-th1">[情感天地]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th2">[顶]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">20岁女人和30岁男人的景点对话</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">评论(
                                        <th>
                                            <font style="color: #E07819;">3</font>
                                        </th>)</font>
                                </th>
                            </div>
                        </div>
                        <!-- 2 -->
                        <div class="kjz-div-img2 ">
                            <img src="./images/space-log-icon2.png " alt="">
                            <div class="kjz-div-wenzi-div img4">
                                <th>
                                    <font class="kjz-div-th1">[情感天地]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th2">[顶]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">20岁女人和30岁男人的景点对话</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">评论(
                                        <th>
                                            <font style="color: #E07819;">3</font>
                                        </th>)</font>
                                </th>
                            </div>
                        </div>
                        <!-- 3 -->
                        <div class="kjz-div-img3 ">
                            <img src="./images/space-log-icon2.png " alt="">
                            <div class="kjz-div-wenzi-div img4">
                                <th>
                                    <font class="kjz-div-th1">[情感天地]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th2">[顶]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">20岁女人和30岁男人的景点对话</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">评论(
                                        <th>
                                            <font style="color: #E07819;">3</font>
                                        </th>)</font>
                                </th>
                            </div>
                        </div>
                        <!-- 4 -->
                        <div class="kjz-div-img4 ">
                            <img src="./images/space-log-icon2.png " alt="">
                            <div class="kjz-div-wenzi-div img4">
                                <th>
                                    <font class="kjz-div-th1">[情感天地]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th2">[顶]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">20岁女人和30岁男人的景点对话</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">评论(
                                        <th>
                                            <font style="color: #E07819;">3</font>
                                        </th>
                                        <th>
                                            <font class="kjz-div-th3">)</font>
                                        </th>
                            </div>
                        </div>
                        <!-- 5 -->
                        <div class="kjz-div-img5 ">
                            <img src="./images/space-log-icon2.png " alt="">
                            <div class="kjz-div-wenzi-div img4">
                                <th>
                                    <font class="kjz-div-th1">[情感天地]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th2">[顶]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">20岁女人和30岁男人的景点对话</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">评论(
                                        <th>
                                            <font style="color: #E07819;">3</font>
                                        </th>
                                        <th>
                                            <font class="kjz-div-th3">)</font>
                                        </th>
                            </div>
                        </div>
                        <!-- 6 -->
                        <div class="kjz-div-img6 ">
                            <img src="./images/space-log-icon2.png " alt="">
                            <div class="kjz-div-wenzi-div img4">
                                <th>
                                    <font class="kjz-div-th1">[情感天地]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th2">[顶]</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">20岁女人和30岁男人的景点对话</font>
                                </th>
                                <th>
                                    <font class="kjz-div-th3">评论(
                                        <th>
                                            <font style="color: #E07819;">3</font>
                                        </th>
                                        <th>
                                            <font class="kjz-div-th3">)</font>
                                        </th>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 我不是一个人 -->
                <div class="a-single-div img4">
                    <img src="./images/combat-title.png" alt="">
                    <div class="a-single-div-div1">
                        <img class="a-single-img1" src="./images/combat1.jpg" alt="">
                        <img class="a-single-img2" src="./images/combat2.jpg" alt="">
                        <img class="a-single-img3" src="./images/combat3.jpg" alt="">
                        <img class="a-single-img4" src="./images/combat4.jpg" alt="">
                        <img class="a-single-img5" src="./images/combat5.jpg" alt="">
                    </div>
                    <div class="a-single-div-div2 thcolor">
                        <table>
                            <tr>
                                <th class="combat1-word">
                                    <p>名称:永恒の炫</p>
                                    <p style="margin-left: -10px;">职业:鬼剑士</p>
                                    <p style="margin-left: -30px;">等级:56</p>
                                </th>
                                <th class="combat2-word">
                                    <p>名称:永恒の炫</p>
                                    <p style="margin-left: -10px;">职业:鬼剑士</p>
                                    <p style="margin-left: -30px;">等级:56</p>
                                </th>
                                <th class="combat3-word">
                                    <p>名称:永恒の炫</p>
                                    <p style="margin-left: -10px;">职业:鬼剑士</p>
                                    <p style="margin-left: -30px;">等级:56</p>
                                </th>
                                <th class="combat4-word">
                                    <p>名称:永恒の炫</p>
                                    <p style="margin-left: -10px;">职业:鬼剑士</p>
                                    <p style="margin-left: -30px;">等级:56</p>
                                </th>
                                <th class="combat5-word">
                                    <p>名称:永恒の炫</p>
                                    <p style="margin-left: -10px;">职业:鬼剑士</p>
                                    <p style="margin-left: -30px;">等级:56</p>
                                </th>
                            </tr>
                        </table>
                    </div>
                </div>
                <!-- 个人资料 -->
                <div class="personal-data img4" style="border: 0;">
                    <img src="./images/personal-title.png" alt="">

                    <div class="personal-data-div" style="border: 0;">
                        <div class="personal-data-zhong">
                            <p>
                                昵称:轻实训 QQ:12345678 <br>空间名称:轻实训非黄钻演示空间 <br>空间地址:12345678qq.com <br>兴趣爱好:看书、写字
                            </p>
                            <img src="images/personal-bj.png" alt="">
                        </div>
                       
                    </div>
 						<div >
                          <div class="dibu" style="margin-left: 27px;">  <img  src="images/footer-1.png" alt="" > </div>
                          <div class="dibu">  <img  src="images/footer-2.png" alt=""> </div>
                           <div class="dibu"> <img  src="images/footer-3.png" alt=""> </div>
                            <div class="dibu"><img  src="images/footer-4.png" alt=""> </div>
                        </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

divweizhi.css内容如下:

.div-zon
{
    height: 1400px;
    width: 1003px;
    margin: auto;
    position:relative;
}
.div-tou
{
    margin-top: 3.7cm;
}
.trzon
{
    text-shadow: #B50449 2px 2px 5px;
}
.a-single-div
{
    /* position: 776px 10px 0 0; */
    margin-top: 830px;
    margin-left: 110px;
    width: 750px;
    height: 239px;
}
.a-single-div-div1
{
    /* position: 776px 10px 0 0; */
    margin-top: 110px;
    margin-left: 0px;
    width: 750px;
    height: 75px;
}
.a-single-div-div2
{
    /* position: 776px 10px 0 0; */
    /* margin-top: 110px; */
    margin-left: 0px;
    width: 750px;
    height: 50px;
}
.a-single-div-div2 p
{
    font-size: 10px;
    margin: 2px 0 0 0;
    
}
.personal-data
{
    border: 1px solid #B50449;
    margin-top: 1101px;
    margin-left: 100px;
    width: 750px;
    height: 240px;
}
.personal-data-div
{
    border: 1px solid #04b53f;
    margin-top: 67px;
    width: 750px;
    height: 90px;
}
.personal-data-div img
{
        margin-left: 6px;
    margin-top: -22px;
}
.personal-data-div th
{
    font-size: 10px;
    font-weight:normal;
    color: black;
    margin-left: 83px;
    margin-top: -6px;
}
.dibu{
	
	    width: 110px;
    	height: 53px;
    	float: left;
    	margin-left: 19px;
}

img.css内容如下:


.img1 {
    position: absolute;
    z-index: 1;
}
.img2 {
    position: absolute;
    z-index: 2;
    height: 58px;
    width: 726px;
    margin: auto;
    margin-top: 3.2cm;
    margin-left: 130px;
}
.img3 {
    position: absolute;
    z-index: 3;
    margin-top: 1.8cm;
    margin-left: 10.7cm;
}
.img4 {
    position: absolute;
    z-index: 4;
    ;
}
.img4 img {
    position: absolute;
    z-index: 4;
    ;
}
.img4 th {
    position: absolute;
    z-index: 4;
    ;
}
.touwoyip {
    margin-top: 180px;
    margin-left: 630px;
}
.tr1 {
    margin-top: 138px;
    margin-left: 170px;
}
.tr2 {
    margin-top: 138px;
    margin-left: 600px;
}
.tr1 a {
    margin: 0 8px 0 8px;
    text-shadow: #B50449 3px 3px 2px;
    color: #FFFF00;
    text-decoration: none;
    font-size: 10px;
}
.tr2 a {
    margin: 0 8px 0 8px;
    text-shadow: #B50449 3px 3px 2px;
    color: #FFFF00;
    text-decoration: none;
    font-size: 10px;
}
.guijians {
    margin-top: 263px;
}
.vote1 {
    margin-top: 255px;
    margin-left: 510px;
}
.vote2 {
    margin-top: 255px;
    margin-left: 578px;
}
.vote3 {
    margin-top: 255px;
    margin-left: 646px;
}
.vote4 {
    margin-top: 255px;
    margin-left: 714px;
}
.vote5 {
    margin-top: 255px;
    margin-left: 782px;
}
.abs-tatle {
    margin-top: 615px;
    margin-left: 150px;
}
.abs-lefe {
    margin-top: 650px;
    margin-left: 150px;
}
.abs-div {
    margin-top: 650px;
    margin-left: 240px;
    border: 1px #B50449;
    height: 148px;
    width: 262px;
}
.abs-div p {
    display: inline;
    width: 200px;
    font-size: 10px;
    margin: 5px 0 5px 0;
}
.spc-log {
    margin-top: 585px;
    margin-left: 500px;
}
.website {
    margin-top: 590px;
    margin-left: 659px;
}
.spc-log-bj {
    margin-top: 640px;
    margin-left: 502px;
}
.spc-log-bj-div {
    margin-top: 640px;
    margin-left: 502px;
    height: 150px;
    width: 340px;
}
.kjz-div-img {
    margin-top: 15px;
    margin-left: 13px;
    /* height: 122px;
    width: 300px; */
}
.kjz-div-img2 {
    margin-top: 40px;
    margin-left: 13px;
    /* height: 122px;
    width: 300px; */
}
.kjz-div-img3 {
    margin-top: 65px;
    margin-left: 13px;
    /* height: 122px;
    width: 300px; */
}
.kjz-div-img4 {
    margin-top: 90px;
    margin-left: 13px;
    /* height: 122px;
    width: 300px; */
}
.kjz-div-img5 {
    margin-top: 115px;
    margin-left: 13px;
    /* height: 122px;
    width: 300px; */
}
.kjz-div-img6 {
    margin-top: 140px;
    margin-left: 13px;
    /* height: 122px;
    width: 300px; */
}
.kjz-div-wenzi-div {
    margin-top: -8px;
    margin-left: 10px;
}
.kjz-div-wenzi-div font {
    font-size: 10px;
    margin: -1px 0 -1px 0;
}
.kjz-div-th1 {
    color: #FE3981;
}
.kjz-div-th2 {
    color: #FF0000;
}
.kjz-div-th3 {
    color: #929292;
}
.a-single-img1 {
    margin-left: 66px;
}
.a-single-img2 {
    margin-left: 201px;
}
.a-single-img3 {
    margin-left: 336px;
}
.a-single-img4 {
    margin-left: 471px;
}
.a-single-img5 {
    margin-left: 606px;
}
.combat1-word {
    margin-left: 65px;
}
.combat1-word font {
    margin-left: 65px;
}
.combat2-word {
    margin-left: 199px;
}
.combat3-word {
    margin-left: 334px;
}
.combat4-word {
    margin-left: 469px;
}
.combat5-word {
    margin-left: 605px;
}
.thcolor p {
    font-weight: normal;
    color: #000000;
}
.personal-data-div-th1 {
    margin-top: 10px;
}
.personal-data-zhong p {
    float: left;
    width: 162px;
    height: 50px;
    font-size: 10px;
    color: black;
    margin-left: 80px;
}
.personal-data-zhong img {
    float: left;
}
.personal-data-xia img {
    float: left;
    width: 100px;
}

此页面仅供新手参考,当然,只有以上内容,是做不出来最后的效果的,你还需要素材,图片。

如果你需要这些素材,或者源码,可以私聊我。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

掉色的熊猫

大爷,赏点吧。

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值