码前课-前端必修课-CSS入门学习(6)

590 05-11

八、页面布局

1.简介

常见页面布局：

表格布局
div布局

2.表格布局

2.1 简介

不适用于复杂布局，仅用于简单、有规则的结构

定位相对准确，与浏览器基本无关，适用于简单分隔

2.2 用法

table常用样式的属性

border在表格外围设置边框
border-spacing设置单元格之间的距离（相当于table标签中的cellspacing属性，即间距）
border-collapse表格中相邻边框是否合并，取值：seprate、collapse

th/td常用样式属性：

border为单元格设置边框
padding设置单元格的内边距（相当于table标签中的cellpadding属性，边距）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.hello{
			width: 80%;
			border:1px solid #ccc;
			border-spacing:0;
			border-collapse:collapse;
		}
		.hello th,.hello td{
			border:1px solid #ccc;
			padding:5px;
		}
	</style>
</head>
<body>
	 <!-- table>(thead>tr>th{th$}*4)+tbody>(tr>td{td$}*4)*6 -->
	 <table>
	 	<thead>
	 		<tr>
	 			<th>th1</th>
	 			<th>th2</th>
	 			<th>th3</th>
	 			<th>th4</th>
	 		</tr>
	 	</thead>
	 	<tbody>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 		<tr>
	 			<td>td1</td>
	 			<td>td2</td>
	 			<td>td3</td>
	 			<td>td4</td>
	 		</tr>
	 	</tbody>
	 </table>
</body>
</html>

示例：

表格布局.png

3.div布局

定位绝对精确，使用灵活，适合于复杂的布局方式

3.1 简单布局

两种形式：

1-1-1布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/style1.css">
</head>
<body>
	<div id="container">
		<header class="header">
			header
		</header>
		<article class="main">
			main
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

示例：

简单布局1.png

1-2/ 3-1布局

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	 <link rel="stylesheet" href="css/style2.css"> 
</head>
<body>
	<div id="container">
		<header class="header">
			herder
		</header>
		<article class="wrapper">
			<section>
				main
			</section>
			<aside>
				right aside
			</aside>
		</article>
		<footer class="footer">
			footer
		</footer>
	</div>
</body>
</html>

示例：

简单布局2.png

3.2 圣杯布局

页面结构，两边的边栏宽度固定，中间主体在一定范围内可自适应，并且主体优先被加载

一般防止页面缩放影响浏览，都会为页面设置一个最小宽度

<!DOCTYPE html>
<html lang="en"> 
<head>
	<meta charset="UTF-8"> 
	<title>Document</title> 
	<link rel="stylesheet" href="css/style4.css"> 
</head> 
<body>
	<div id="container">
		<header class="header"> 
            header 
        </header> 
		<article class="wrapper"> 
			<section class="main">
				main
			</section>
			<aside class="left"> 
				left
			</aside>  
			<aside class="right"> 
				right
			</aside> 
		</article>
		<footer class="footer"> 
            footer 
        </footer>  
    </div>
</body> 
</html>

示例：

双飞翼布局.png

3.3 双飞翼布局

源自淘宝的UED(用户体验设计)团队

双飞翼布局和圣杯布局要实现的效果是相同的，只是思路不同

圣杯布局和双飞翼布局的区别

双飞翼布局比圣杯布局多创建一个div

双飞翼布局不用设置内边距和相对定位，也不用设置偏移量

双飞翼布局使用的margin,圣杯布局使用的是padding

实际开发中建议使用CSS3中新增的flex弹性盒子布局，更简间

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>Document</title> 
    <link rel="stylesheet" href="css/style5.css">
</head>
<body>
    <div id="container">
        <header class="header">
            header 
        </header> 
        <article class="wrapper">
            <section class="main">
                <div class="main-wrapper">
                    main 
                </div> 
            </section>
            <aside class="left">
                left aside
            </aside>
            <aside class="right">
                right aside 
            </aside>
        </article>
        <footer class="footer">
            footer 
        </footer> 
    </div>
    </body>
</html>

示例：

双飞翼布局.png
附件：https://share.weiyun.com/6GKjzjpt

学完还行练？点这里。

标签： CSS