博客列表 >3月23日作业

3月23日作业

kaclod的博客
kaclod的博客原创
2018年03月24日 16:47:13604浏览

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>day0323作业</title>
	<style type="text/css">
	/*单行文本在块元素中的左右,垂直居中对齐*/
		.box1 {
			width:200px;
			height:200px;
			text-align:center;
			background-color:yellow;
			line-height:200px;
		}

		/*多行文本在父元素是块元素情况下的上下,垂直对齐方式*/
		.box2 {
			width:200px;
			height:200px;
			background-color:red;
			text-align:center;
			display:table-cell;
			vertical-align:middle;

		}
		/*子元素是块元素,父元素也块元素,如何左右,上下居中,左右使用margin:auto,上下使用display:table-cell,vartical-align:middle;*/

		.box3 {
			width:200px;
			height:200px;
			background-color:green;
			display: table-cell;
			vertical-align:middle;
		}

		.box3 .child {
			width: 100px;
			height: 100px;
			background-color: #F4FF0A;
			margin: auto;  /*水平居中*/
		}

		.box4 {
			width:200px;
			height:200px;
			background-color:pink;
			text-align:center;
			display:table-cell;
			vertical-align: bottom;

		}
		.box4 ul {
			margin:0;
			padding:0;
		}
		
		.box4 li {
			list-style: none;
			display:inline;
		}


	</style>
</head>
<body>
	<div class="box1">
		<a href="">java学习网站</a>

	</div>
	<hr><br>

	<div class="box2">
		<span>聚客中文网</span>
		<span>www.gicater.com</span>
	</div>
	<hr><br>


	<div class="box3">
		<div class="child"></div>
	</div>
	<hr><br>

	<div class="box4">
		<ul class="child1">
			<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>	

运行实例 »

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

IMG_0038.JPGIMG_0039.JPG

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议