CSS3的神奇盒子布局

最新推荐文章于 2023-08-15 11:24:32 发布

hu_xinxin

最新推荐文章于 2023-08-15 11:24:32 发布

阅读量611

点赞数 1

分类专栏： html_css_javascript 文章标签： css3 布局 box

html_css_javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3好牛逼，能让文字完全居中</title>
		<style type="text/css">
		    * {
		      	margin: 0;
		      	padding: 0;
		    }
			header {
				width: 640px;
				height: 150px;
				background-color:grey;
				margin: 0 auto;
			}
			.test {
				width: 100px;
				height: 150px;
				background-color: red;
				vertical-align: middle;
				
				display: -moz-box;
				display: -webkit-box;
				-moz-box-align: center;
				-webkit-box-align: center;
				-moz-box-pack: center;
				-webkit-box-pack: center;
			}
			.test *{vertical-align:middle;}
			
		</style>
	</head>
	<body>
		<header>
			<div class="test">
				<img src="img/del.png" />
				<span>ggg</span>
			</div>
		</header>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS3好牛逼，盒子布局很强大</title>
		<style type="text/css">
		    * {
		      	margin: 0;
		      	padding: 0;
		    }
			#container {
			    display: -moz-box;
			    display: -webkit-box;
			}
			#left_container , #middle_container , #right_container {
				-moz-box-sizing: border-box;
				-webkit-box-sizing: border-box;
			}
			#left_container , #right_container {
				width: 200px;
				padding: 20px;
				background-color: red;
				text-align: center;
			}
			#middle_container {
				-moz-box-flex: 1;
				-webkit-box-flex: 1;
				padding: 20px;
				background-color:grey;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="left_container">
				<h2>左栏布局</h2>
				<nav>
					<ul>
						<li>超链接</li>
						<li>超链接</li>
						<li>超链接</li>
						<li>超链接</li>
					</ul>
				</nav>
			</div>
			<div id="middle_container">
				<h2>内容二</h2>
				<p>
					实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字实例文字
				</p>
			</div>
			<div id="right_container">
				<h2>右栏布局</h2>
				<nav>
					<ul>
						<li>超链接</li>
						<li>超链接</li>
						<li>超链接</li>
						<li>超链接</li>
					</ul>
				</nav>
			</div>
		</div>
	</body>
</html>

hu_xinxin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3的神奇盒子布局

CSS3好牛逼，能让文字完全居中 * { margin: 0; padding: 0; } header { width: 640px; height: 150px; background-color:grey; margin: 0 auto; } .test { width
复制链接

扫一扫

专栏目录