您的位置：首页 > Web前端 > CSS

CSS+html:魔兽世界网页仿制

2015-08-04 23:17 666 查看

魔兽世界网页仿制

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<title>魔兽世界</title>

<style type="text/css">

body {

margin: 0px;

padding: 0px;

}

#p1 {

position: absolute;

background-image: url("menu_bg%5B1%5D.png");

height: 60px;

width: 979px;

top: 52px;

left: 192px;

}

#p3 {

list-style-type: none;

}

#p5 {

width: 1392px;

height: 251px;

background-image: url("wrapper_midbg%5B1%5D.jpg");

}

#p6 {

margin-top: -128px;

margin-left: 286px;

}

#p7 {

margin-left: 229px;

margin-top: 34px;

}

#p8 {

margin-left: 14px;

margin-top: 61px;

}

#p9 {

height: 60px;

margin-top: -66px;

margin-left: 521px;

}

#p10 {

background-color: black;

height: 169px;

border: 1px solid;

width: 1392px;

}

#p11 {

background-image: url("wow54%5B1%5D.jpg");

width: 1392px;

height: 540px;

}

#p3 li {

display: inline;

padding-left: 10px;

}

#p3 li a {

color: #ffc91d;

}

#p3 li a:hover {

color: red;

}

#p4 li {

display: inline;

}

#p4 li a {

text-decoration: none;

color: #ffc91d;

}

#p4 li a:hover {

color: red;

}

#p0 {

position: absolute;

left: 536px;

top: 36px;

}

</style>

</head>

<body>

<div>

<div id="p11">

<div id="p1">

<ul id="p3">

<li ><a href="#">进入官网</a></li>

<li><a href="#">账号注册</a></li>

<li><a href="#">充值管理</a></li>

<div style="float: right; padding-right: 45px">

<li><a href="#">游戏下载</a></li>

<li><a href="#">客服中心</a></li>

<li><a href="#">官方论坛</a></li>

</div>

</ul>

</div><img src="logo%5B1%5D.png" id="p0"> </div>

</div>

</div>

</div>

<div id="p5">

<img src="wrapper_midbg%5B1%5D.jpg" width="1394px" />

<div id="p6">

<img src="small_b1%5B1%5D.jpg" style="width: 215px" height="120px"/>

<img src="small_b2%5B1%5D.jpg" style="width: 215px" height="120px"/>

<img src="small_b3%5B1%5D.jpg" style="width: 215px" height="120px"/>

<img src="small_b4%5B1%5D.jpg" style="width: 215px" height="120px"/>

</div>

</div>

<div id="p10">

<img src="blizz_wow%5B1%5D.png" id="p7"/>

<img src="flogo_netease%5B1%5D.gif" id="p8"/>

<div id="p9">

<span style="color: #5D2809">©2012 暴雪娱乐股份有限公司版权所有由上海网之易网络科技发展有限公司运营 <a href="#" style="color: #5D2809">著作权侵权</a> 文网进字[2012]033号</span><br/>

<span style="color: #5D2809"><a href="#" style="color: #5D2809">沪网文[2011]0682-074</a> <a href="#" style="color: #5D2809">增值电信业务经营许可证编号：沪B2 - 20080012</a> <a href="#" style="color: #5D2809">法律文件</a> 新出审字： [2012]712号</span><br/>

<span><a href="#" style="color: #5D2809">文化部网络游戏举报与联系邮箱：wlyxjb@gmail.com</a> <a href="#" style="color: #5D2809">《互联网文化管理暂行规定》</a></span>

<img src="police%5B1%5D.gif"/>

<img src="zx110%5B1%5D.gif"/>

<img src="sgs_icon%5B1%5D.gif"/>

<img src="icon20120516%5B1%5D.gif"/>

</div>

</div>

</div>

</body>

</html>

效果截图：

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航