如果你是一名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;
}
此页面仅供新手参考,当然,只有以上内容,是做不出来最后的效果的,你还需要素材,图片。
如果你需要这些素材,或者源码,可以私聊我。