- 相关推荐
网页设计相对布局中如何实现水平定位？
我做了一个css过渡样式，但是不知道如何将它水平居中对齐。代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
bg{
width:100%;
height:100%;
margin:0px;
}
.main{
height:60%;
top:20%;
position:absolute;
}
.box1{
position: relative;
width: 162px;
height: 100%;
background: #000;
float:right;
margin-left:300px;
-webkit-transition: width 2s ease 0s, margin-left 2s;
-moz-transition: width 2s ease 0s, margin-left 2s;
-ms-transition: width 2s ease 0s, margin-left 2s;
-o-transition: width 2s ease 0s, margin-left 2s;
transition: width 2s ease 0s, margin-left 2s;
}
.box2{
position: relative;
width: 108px;
height: 100%;
background: #999;
float:right;
-webkit-transition: width 2s ease 0s, margin-left 2s;
-moz-transition: width 2s ease 0s, margin-left 2s;
-ms-transition: width 2s ease 0s, margin-left 2s;
-o-transition: width 2s ease 0s, margin-left 2s;
transition: width 2s ease 0s, margin-left 2s;
}
.box3{
position: relative;
width: 54px;
height: 100%;
background: #ccc;
float:right;
-webkit-transition: width 2s ease 0s, margin-left 2s;
-moz-transition: width 2s ease 0s, margin-left 2s;
-ms-transition: width 2s ease 0s, margin-left 2s;
-o-transition: width 2s ease 0s, margin-left 2s;
transition: width 2s ease 0s, margin-left 2s;
}
.box1:hover {
width: 962px;
margin-left:200px;
}
.box3:hover {
width: 854px;
}
.box2:hover {
width: 908px;
}
</style>
</head>
<body>
<div class="main">
<div class="box1">1<div class="box2">1<div class="box3">1</div></div></div>
</div>
</body>
</html>
1
1
1
【网页设计相对布局中如何实现水平定位？】相关文章：
常见的网页布局设计模式07-14
网页设计中如何把握视觉原则07-14
如何评价亚马逊的网页设计？07-14
如何提高网站模板设计水平07-14
职场中白领精英如何对自己职业定位07-03
如何选择网页设计培训机构07-14
网页设计中的规则和禁忌07-12
网页设计中图像的优化技巧07-14
如何进行市场分析，实现精准网站定位？07-14
平面设计师如何提高自己的设计水平？07-11