8---页面浮动设计

1.让div块左右居中:

Eg:

<html>
<head>
<meta name="my" content="david">
<style>
#one {
width:300px;
height:600px; 
background:red;
margin:0 auto; //设置左右居中,只有适合w3c标准才可以用。
}
</style>
</head>
<body>
<div id="one">
</div>
</body>
</html>


2.设置两个,三个或浮动:

Eg:

<html>
<head>
<meta name="my" content="david">
<style>
body {
text-align:center;
}
#one {
width:500px;
height:400px; 
background:red;
margin:0 auto; //设置左右居中
text-align:right;
}

#one_1 {
float:left;
width:150px;
height:400px; 
background:green;
margin-left:10px;

}
#one_2 {
float:left;
width:150px;
height:400px; 
background:green;
margin-left:10px;
}
#one_3 {
float:left;
width:150px;
height:400px; 
background:green;
margin-left:10px;
}
</style>
</head>
<body>
<div id="one">
<div id="one_1">
</div>
<div id="one_2">
</div>
<div id="one_3">
</div>
</div>
</body>
</html>


3.设置多个滑块浮动:

Eg:

<html>
<head>
<meta name="my" content="david">
<style>
body {
text-align:center;
}
#one {
width:500px;
height:400px; 
background:red;
margin:0 auto; //设置左右居中
text-align:right;
}

#one_1 {
float:left;
width:150px;
height:400px; 
background:green;
margin-left:10px;

}
#one_2 {
float:left;
width:150px;
height:400px; 
background:green;
margin-left:10px;
}
#one_3 {
float:left;
width:150px;
height:400px; 
background:green;
margin-left:10px;
}
#box {
float:left;
width:200px;
height:150px;
background:blue;
margin-left:10px;
margin-bottom:10px;
}
</style>
</head>
<body>
<div id="one">
<div id="one_1">
</div>
<div id="one_2">
</div>
<div id="one_3">
</div>
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</body>
</html>


你可能感兴趣的:(8---页面浮动设计)