第七次作业

第七次作业：

代码：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>作业</title>
	<style type="text/css">
       .aaa {
			width: 300px;
			height: 500px;
			background-color: skyblue;
			border: 1px solid #696969;
			border-radius: 3%;
			text-align: center;
		}

		.aaa h3 {

			line-height: 500px;


		}


		.bbb {
			width: 300px;
			height: 500px;
			background-color: skyblue;
			border: 1px solid #696969;
			border-radius: 3%;
			text-align: center;
			display:table-cell;
			vertical-align: middle;

		}

       .ccc {

			width: 300px;
			height: 500px;
			background-color: skyblue;
			border: 1px solid #696969;
			border-radius: 3%;
			display:table-cell;
			vertical-align: middle;

		}
       .ccc .child {
       	    width: 100px;
			height: 100px;
			background-color: yellow;
			margin: auto;
       }

       .box {

       	    width: 300px;
			height: 500px;
			background-color: skyblue;
			text-align: center;
			display:table-cell;
			vertical-align: bottom;
			       

       }

       .box li {
       	list-style: none;
       	display: inline;
       }

       .box ul {
       	padding: 0px;
        /*line-height: 500px;*/
       }


	</style>
</head>
<body>
	
	<div class="aaa">

     <h3>单行居中</h3>
		
	</div>

	<hr>

	<div class="bbb">

     <h3>多行文本居中</h3>
     <a href="">多行文本居中</a>
		
	</div>

	<hr>

	<div class="ccc">

     <div class="child">    	
     </div>

	</div>

	<hr>

	<div class="box">
		<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>
		</ul>
		
	</div>


	
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

手抄：

D3Y0RG3K@`_)]I)GL7MTEU4.png

~CO3N20)(DDKKM$TR5{(C3S.png

实例

相关文章