- 相關(guān)推薦
網(wǎng)頁設(shè)計相對布局中如何實現(xiàn)水平定位？
我做了一個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
【網(wǎng)頁設(shè)計相對布局中如何實現(xiàn)水平定位？】相關(guān)文章：
職場中白領(lǐng)精英如何對自己職業(yè)定位07-03
如何選擇網(wǎng)頁設(shè)計培訓(xùn)機(jī)構(gòu)07-14
網(wǎng)頁設(shè)計中的規(guī)則和禁忌07-12
網(wǎng)頁設(shè)計中圖像的優(yōu)化技巧07-14