- 相關推薦
網頁設計相對布局中如何實現水平定位？
我做了一個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