您的位置：首页 > 其它

用相对定位进行布局。

2015-12-05 22:36 375 查看

布局和固定布局有很多方式，这可能是其中之一

<!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" alt="" 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" alt="" 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>

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

标签：

相关文章推荐

新的分享

章节导航