学者谷

位置:首页 > 行业范文 > 设计

网页设计相对布局中如何实现水平定位?

设计1.26W
网页设计相对布局中如何实现水平定位?
我做了一个css过渡样式,但是不知道如何将它水平居中对齐。代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title>Untitled Document</title><style>bg{width:100%;height:100%;margin:0px;}{height:60%;top:20%;position:absolute;}1{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;}2{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;}3{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;}1:hover {width: 962px;margin-left:200px;}3:hover {width: 854px;}2: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>
标签:网页 布局