实例
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>作业</title>
<style type="text/css">
.a1{
width: 300px;
height: 300px;
background-color: blue;
text-align: center;
line-height: 300px;
}
.a2{
width: 300px;
height: 300px;
background-color: red;
text-align: center;
display: table-cell;vertical-align: middle;
}
.a3
{
width: 300px;
height: 300px;
background-color: blue;
display:table-cell;
vertical-align: middle;
}
.a31
{
width: 200px;
height: 200px;
background-color: red;
margin:auto;
}
.a4
{
width: 200px;
height: 200px;
background-color: red;
text-align: center;
display: table-cell;
vertical-align: bottom;
}
.a4 li{
list-style: none;
display:inline;
}
.a4 ul{
padding: 0px;
}
</style>
</head>
<body>
<!--单行对其 -->
<div class="a1">
<p style="color: red">这里是内容</p>
</div>
<!-- 多行对其 -->
<div class="a2">
<p style="color: blue">这里是第一行</p>
<p style="color: blue">这里是第二行</p>
</div>
<!-- 块元素内的子元素对其 -->
<div class="a3">
<div class="a31">
</div>
</div>
<!-- 不定宽元素对其 -->
<div class="a4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
