实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>元素对齐方式</title>
</head>
<body>
<!-- 案例1 -->
<!-- <style>
.box1 {
width: 200px;
height: 200px;
background-color: #ffff0a;
text-align: center;
}
.box1 a {
line-height: 200px;
}
</style>
<div class="box1">
<a href="">php中文网</a>
</div>
<hr> -->
<!-- 案例2 -->
<!-- <style type="text/css" media="screen">
.box1{
width:300px;
height:300px;
background:#ffff0a;
text-align:center;
display:table-cell; /* 转化成单元格 */
vertical-align:middle; 水平居中
}
</style>
<div class="box1">
<<a href="">php中文网</a>
<a href="">www.php.cn</a>
</div> -->
<!-- 案例3 -->
<!-- <style type="text/css" media="screen">
.box3{
width:400px;
height:400px;
background:#f30;
display:table-cell;
vertical-align:middle;
}
.sun{
width:100px;
height:100px;
background:blue;
margin:0 auto;
</style>
<div class="box3">
<div class="sun"></div>
</div> -->
<!-- 案例4 -->
<style type="text/css" media="screen">
.box4{
width:200px;
height:200px;
background:#f30;
display:table-cell;
vertical-align:bottom; /* top/middle/bottom */
text-align:center;
}
.box4 ul{
}
.box4 li{
display:inline;
}
ul,li{
list-style:none;
padding:0;
margin:0;
}
</style>
<div class="box4">
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
<li><a href="">4</a></li>
<li><a href="">5</a></li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style>
body {
}
.box {
width: 600px;
height: 600px;
position: relative;
}
.box1 {
width: 200px;
height: 200px;
background-color: #f30;
position: absolute;
top:0;
left: 200px;
}
.box2 {
width: 200px;
height: 200px;
background-color:blue;
position: absolute;
top:200px;
left:0;
}
.box3 {
width: 200px;
height: 200px;
background-color:#666;
position: absolute;
top: 200px;
left: 400px;
}
.box4 {
width: 200px;
height: 200px;
background-color: lightgrey;
position: absolute;
top: 400px;
left: 200px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例