当前位置:首页 > WEB开发 > HTML/CSS

第27章 CSS保守布局[上]

优良自学吧提供第27章 CSS保守布局[上],第27章 CSS传统布局[上] index.html <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title>CSS传统布局[上]</ti

第27章 CSS传统布局[上]

index.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS传统布局[上]</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<table border="0">
	<tr>
		<td colspan="2" class="header">header</td>
	</tr>
	<tr>
		<td class="aside">aside</td>
		<td class="section">section</td>
	</tr>
	<tr>
		<td colspan="2" class="footer">footer</td>
	</tr>
</table>

</body>
</html>

 

 

style.css

@charset "utf-8";

body {
	margin: 0;
}

table {
	/*width: 960px;*/
	width: 100%;
	margin: 0 auto;
	/*border-spacing: 0px;*/
	border-collapse: collapse;
}
.header {
	height: 120px;
	background-color: olive;
}
.aside {
	width: 200px;
	height: 500px;
	background-color: purple;
}
.section {
	width: 760px;
	background-color: maroon;
}
.footer {
	height: 120px;
	background-color: gray;
}

 

index2.html

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<title>CSS传统布局[上]</title>
	<link rel="stylesheet" type="text/css" href="style2.css">
</head>
<body>

<header>
	header
</header>

<aside>
	aside
</aside>

<section>
	section
</section>

<footer>
	footer
</footer>

</body>
</html>

 

style2.css

@charset "utf-8";

body {
	margin: 0 auto;
	/*width: 960px;*/
	width: auto;
}

header {
	height: 120px;
	background-color: olive;
}
aside {
	/*width: 200px;*/
	width: 20%;
	/*min-width: 120px;*/
	height: 500px;
	background-color: purple;
	float: left;
}
section {
	/*width: 760px;*/
	width: 80%;
	height: 500px;
	background-color: maroon;
	float: right;
}
footer {
	height: 120px;
	background-color: gray;
	clear: both;
}

 

 

 

 


(本文来自互联网,不代表搜站(http://www.ylzx8.cn/)的观点和立场)
本站所有内容来自互联网,若本站收录的信息无意侵犯了贵司版权,请给我们来信(ylzx8cn@163.com),我们会及时处理和回复,谢谢

最近更新