宽度固定的三栏布局

最新推荐文章于 2021-06-20 16:21:52 发布

hoho_12

最新推荐文章于 2021-06-20 16:21:52 发布

阅读量539

点赞数

分类专栏：网页设计与制作文章标签： html 布局

本文链接：https://blog.csdn.net/hoho_12/article/details/52130326

版权

网页设计与制作专栏收录该内容

13 篇文章 1 订阅

订阅专栏

效果图

html代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/style.css" /> 
	</head>
	<body>
		<div id="wrapper">
			<header>
				<h1>Fixed-Width Layout</h1> 
			</header>
			<nav>
				<div class="inner">
				<ul>
					<li>link1</li>
					<li>link2</li>
					<li>link3</li>
				</ul>		
				</div>
			</nav>
			<article>
				<div clas="inner">
				A telephone was ringing in the darkness—a tinny, unfamiliar ring.<br />
				He fumbled for the bedside lamp and turned it on.<br />
				Squinting at his surroundings he saw a plush Renaissance bedroom with Louis XVI furniture,
				 hand-frescoed walls, and a colossal mahogany four-poster bed.
				 A telephone was ringing in the darkness—a tinny, unfamiliar ring.<br />
				He fumbled for the bedside lamp and turned it on.<br />
				Squinting at his surroundings he saw a plush Renaissance bedroom with Louis XVI furniture,
				 hand-frescoed walls, and a colossal mahogany four-poster bed.
				 A telephone was ringing in the darkness—a tinny, unfamiliar ring.<br />
				He fumbled for the bedside lamp and turned it on.<br />
				Squinting at his surroundings he saw a plush Renaissance bedroom with Louis XVI furniture,
				 hand-frescoed walls, and a colossal mahogany four-poster bed.
				</div>
			</article>
			<aside>
				<div class="inner">
				<h2>This is aside</h2>
				He fumbled for the bedside lamp and turned it on.<br />
				Squinting at his surroundings he saw a plush Renaissance.
				</div>
			</aside>
			<footer>this is footer</footer>
		</div>
	</body>
</html>

css样式

*{
	margin: 0;
	padding: 0;
}
#wrapper{
	/*overflow: hidden;*/
	width: 960px;
	margin: 0 atuo;
	border: 1px solid;	
}

article{
	box-sizing: border-box;/*第三种方法*/
	background: #ffed53;
	width: 600px;
	float: left;
	padding: 10px;
}
nav{
	box-sizing: border-box;/*第三种方法*/
	width:150px ;
	float: left;
	background: #dcd9c0;
}

nav li{
	list-style-type: none;
}

aside{
	box-sizing: border-box;/*第三种方法*/
	width:210px;
	float: left;
	background: #3f7ccf;
}
header{
	background: #f00;
	text-align: center;
}
footer{
	background: #DCD9C0;
	clear: both;
	text-align: center;
}

/*.inner{	
	padding:10px;	
}*/

笔记：中间article栏增加padding和margin时，会造成右边的aside栏跑到下面，有两种解决办法。

1.给中间的内容增加一个div，改变这儿div的padding和margin

2.给三个块元素增加box-sizing:border-box