标签：
布局和固定布局有很多方式，这可能是其中之一
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*----------------------------------------------------------------------------第一块*/
.div0
{
border: 1px solid red;
width: 1425px;
}
.div1-1
{
background:url("body_bg_baked_1280px%5B1%5D.jpg");
height: 976px;
background-repeat:no-repeat;
}
.div1-2
{
width: 509px;
height: 35px;
border-radius:0px 0px 10px 5px;
background-color:#272c2d ;
float: left;
position: relative;
top: -976px;
left: 702px;
}
.div1-31
{
position: relative;
top: -25px;
left: 10px;
}
.div1-3
{
background-color: #181b1b;
width: 35px;
height: 35px;
position: relative;
top: -976px;
left: 702px;
border-radius:0px 0px 0px 5px;
}
.li1-4
{
float: left;
list-style: none;
border-right-style:solid ;
border-right-color: #35383a;
color: #878e94;
padding: 6px 0;
}
.div1-41
{
float: left;
position: relative;
top: -1025px;
left:700px;
}
.li1-41
{
list-style: none;
float: left;
border-radius:0px 0px 0px 5px;
float: left;
position: relative;
top: -1035px;
left: 700px;
}
dt
{
display: none;
}
dl
{
width: 105px;
}
dl:hover dt
{
display: block;
}
.dd1-41, .dd1-42
{
color: #00baf9;
background-color: #262929;
}
.dt1-41,.dt1-42
{
color: #fafffb;
background-color: #262929;
text-decoration: none;
}
.dt1-41
{
border-radius:0px 0px 10px 0px;
width: 45px;
background-color: #00709f;
text-decoration: none;
}
.a-1
{
color: #00baf9;
text-decoration: none;
}
.text
{
border-radius:6px;
width: 360px;
height: 36px;
}
.div1-51,.div1-52
{
float: left;
}
.div1-52
{
position: relative;
top: 0px;
left: -30px;
}
.div1-5
{
float: left;
position: relative;
top: -950px;
left: 320px;
}
.li1-62
{
float: left;
text-decoration: none;
list-style: none;
color: #b0860b;
padding: 0 10px;
position: relative;
}
.a-63
{
text-decoration: none;
color: #b0860b;
text-align: center;
}
.li1-62
{
padding: 0 20px;
margin: 10px;
}
.div1-6
{
float: left;
position: relative;
left: -395px;
top: -900px;
}
.li1-62:hover
{
margin: 0px 10px;
}
/*-------------------------------------------------------------------------------------------------------*/
</style>
</head>
<body>
<div class="div0">
<!------------------------------------------------------------------------------------------------第一块-->
<div class="div1-1">
</div>
<div class="div1-2">
</div>
<div class="div1-3">
<img src="battletag%5B1%5D.png" class="div1-31"/>
</div>
<div class="div1-41">
<ul>
<li class="li1-4">
<a href="" class="a-1">登录</a>或<a href="" class="a-1">注册一个战网通行证</a>
</li>
<li class="li1-4">
<a href="" class="a-1">战网通行证</a>
</li>
</ul>
</div>
<div class="div1-42">
<ul>
<li class="li1-41">
<dl>
<dd class="dd1-41"><a href="" class="a-1">在线客服</a></dd>
<dt class="dd1-42"><a href="" class="a-1">在线</a></dt>
<dt class="dd1-42"><a href="" class="a-1">客服</a></dt>
<dt class="dd1-42"><a href="" class="a-1">在线</a></dt>
</dl>
</li>
</ul>
<ul>
<li class="li1-41">
<dl>
<dd class="dt1-41">
<a href="" class="dt1-41">浏览</a>
</dd>
<dt class="dt1-42"><a href="" class="dt1-42">浏览一</a></dt>
<dt class="dt1-42"><a href="" class="dt1-42">浏览而</a></dt>
<dt class="dt1-42"><a href="" class="dt1-42">浏览三</a></dt>
</dl>
</li>
</ul>
</div>
<!-------------------------------------------------------------------------------------搜索框-->
<div class="div1-5">
<div class="div1-51">
<input type="text" class="text"/>
</div>
<div class="div1-52">
<img src="mag_glass%5B1%5D.png" class="img1"/>
</div>
</div>
<!----------------------------------------------------------------------------------------------->
<div class="div1-6">
<ul>
<li class="li1-62"><a href="" class="a-63">主页</a></li>
<li class="li1-62"><a href="" class="a-63">游戏指南</a></li>
<li class="li1-62"><a href="" class="a-63">社区</a></li>
<li class="li1-62"><a href="" class="a-63">媒体</a></li>
<li class="li1-62"><a href="" class="a-63">论坛</a></li>
<li class="li1-62"><a href="" class="a-63">服务</a></li>
</ul>
</div>
<!-------------------------------------------------------------------------------------------------->
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/f-24/p/5022469.html
