页面布局
在实际工作，页面布局有以下几种：
-
table 布局
-
div+css布局
-
弹性布局
-
网格布局
table布局（了解）
这种布局方式早期经常使用，大概在 2000 看开始就基本上不使用这种布局方式了。因为它解析性能差。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>table 布局</title> </head> <body> <table width="100%"> <tr bgcolor="#cccccc"> <td height="60" align="center">顶部内容</td> </tr> <tr> <td align="center"> <form action="" method="post"> <table width="300"> <tr bgcolor="#CCCCCC"> <th colspan="2">用户注册</th> </tr> <tr bgcolor="#E6E6E6"> <td width="30%" align="right">用户名</td> <td width="70%"><input type="text" name="username"></td> </tr> <tr bgcolor="#E6E6E6"> <td align="right">密码</td> <td><input type="password" name="password"></td> </tr> <tr bgcolor="#E6E6E6"> <td align="right">性别</td> <td><input type="radio" name="gender" checked value="男"> 男 <input type="radio" name="gender" value="女"> 女</td> </tr> <tr bgcolor="#E6E6E6"> <td align="right">爱好</td> <td><input type="checkbox" name="hobby" value="写作"> 写作 <input type="checkbox" name="hobby" value="听音乐"> 听音乐 <input type="checkbox" name="hobby" value="体育"> 体育</td> </tr> <tr bgcolor="#E6E6E6"> <td align="right">省份</td> <td> <select name="province"> <option value="陕西省">陕西省</option> </select> </td> </tr> <tr bgcolor="#E6E6E6"> <td align="right">自我介绍</td> <td><textarea name="intro" cols="25" rows="5"></textarea> </td> </tr> <tr bgcolor="#CCCCCC"> <td colspan="2" align="center"> <input type="submit" value="提交"> <input type="reset" value="重置"> </td> </tr> </table> </form> </td> </tr> <tr bgcolor="#cccccc"> <td align="center" height="30">底部</td> </tr> </table> </body> </html>
DIV+CSS布局
盒子模型
div是一个标准块标签，而HTML的块标签都存在了 margin, padding, border 等属性，我们就可以通过这些内边距、边框、外边距来控制不同的标签的布局和存放位置，这个就是我们经常说的盒子模型。
自从 1996 年 CSS1 的推出，W3C 组织就建议把所有网页上的对象都放在一个盒子(box)中，我们可以通过控制盒子属性，来操作页面。
盒模型主要定义四个区域：内容(content)、内边距(padding)、边界(border)和外边距(margin)，如图5-1所示。
示例案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS布局</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 0 auto;
border: 1px solid #cccccc;
}
.row {
width: 300px;
background: #E6E6E6;
margin: 1px 0;
}
.label {
display: inline-block;
width: 30%;
background: #E6E6E6;
text-align: right;
}
/*
.row:nth-child(1) {
width: 30%;
text-align: right;
background: red;
}
.row:nth-child(2) {
width: 60%;
text-align: left;
background: #317FE5;
}
.row:nth-child(2) input[type="text"] {
width: 10px;
border: 1px solid #0000ff;
}*/
</style>
</head>
<body>
<div class="box">
<h3>用户注册</h3>
<form action="" method="post">
<div class="row">
<label class="label" for="username">用户名</label>
<input type="text" id="username" name="username">
</div>
<div class="row">
<label class="label" for="password">密码</label>
<input type="password" id="password" name="password">
</div>
<div class="row">
<label class="label">性别</label>
<input type="radio" name="gender" id="man" checked value="男"> <label for="man">男</label>
<input type="radio" name="gender" id="feman" value="女"> <label for="feman">女</label>
</div>
<div class="row">
<label class="label">爱你</label>
<input type="checkbox" name="hobby" id="writer" value="写作"> <label for="writer">写作</label>
<input type="checkbox" name="hobby" id="music" value="听音乐"> <label for="music">听音乐</label>
</div>
<div class="row">
<label class="label" for="province">省份</label>
<select name="province" id="province">
<option value="陕西省">陕西省</option>
</select>
</div>
<div class="row">
<label class="label" for="intro">自我介绍</label>
<textarea name="intro" id="intro" cols="25" rows="5"></textarea>
</div>
<div class="row">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
</div>
</body>
</html>
DIV+CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS布局</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.box {
width: 300px;
margin: 0 auto;
border: 1px solid #cccccc;
}
.row {
width: 100%;
margin: 1px 0;
background: #E6E6E6;
}
.row .label {
width: 30%;
display: inline-block; /* 使用 display 属性可以把一个内联元素变为块元素 */
text-align: right;
}
.row1 {
height: 82px;
margin-bottom: 1px;
}
.intro {
width: 30%;
height: 82px;
text-align: right;
float: left;
line-height: 82px;
}
.content {
width: 70%;
float: right;
}
div.title {
height: 25px;
text-align: center;
background: #CCCCCC;
}
.footer {
background: #CCCCCC;
height: 25px;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="title">用户注册</div>
<form action="" method="post">
<div class="row">
<label class="label" for="username">用户名</label>
<input type="text" id="username" name="username">
</div>
<div class="row">
<label class="label" for="password">密码</label>
<input type="password" id="password" name="password">
</div>
<div class="row">
<label class="label">性别</label>
<input type="radio" name="gender" id="man" checked value="男"> <label for="man">男</label>
<input type="radio" name="gender" id="feman" value="女"> <label for="feman">女</label>
</div>
<div class="row">
<label class="label">爱你</label>
<input type="checkbox" name="hobby" id="writer" value="写作"> <label for="writer">写作</label>
<input type="checkbox" name="hobby" id="music" value="听音乐"> <label for="music">听音乐</label>
</div>
<div class="row">
<label class="label" for="province">省份</label>
<select name="province" id="province">
<option value="陕西省">陕西省</option>
</select>
</div>
<div class="row row1">
<div class="intro">自我介绍</div>
<div class="content"><textarea name="intro" id="intro" cols="25" rows="5"></textarea></div>
</div>
<div class="footer">
<input type="submit" value="提交">
<input type="reset" value="重置">
</div>
</form>
</div>
</body>
</html>
弹性布局
弹性布局是 CSS3 中出现一种布局方式，它的作用是更加方便快捷来进行页面布局。但它只能对一维元素进行布局，如果是多维元素就不能胜任。
要想使用弹性布局，我们就需要使用 display: flex; 来开启弹性布局。
引入案例：
1）不使用弹性布局，而是使用 DIV+CSS
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>使用DIV+CSS实现导航菜单</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .container { width: 900px; height: 60px; margin: 0 auto; } ul { width: 100%; height: 100%; } ul li { list-style: none; width: 100px; height: 100%; background: #2A3C5C; float: left; text-align: center; /* 水平居中 */ line-height: 60px; /* 垂直居中 */ color: white; font-weight: 500; } ul li:hover { background: #8B0000; cursor: pointer; /* 将鼠标变为手 */ } </style> </head> <body> <div class="container"> <ul> <li>游戏1</li> <li>游戏2</li> <li>游戏3</li> <li>游戏4</li> <li>游戏5</li> <li>游戏6</li> <li>游戏7</li> <li>游戏8</li> <li>游戏9</li> </ul> </div> </body> </html>
2）使用弹性布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用弹性布局实现导航菜单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 900px;
height: 60px;
margin: 0 auto;
background: #317FE5;
}
ul {
width: 100%;
height: 100%;
list-style: none;
display: flex; /* 开启弹性布局，注意它需要放到父容器中 */
}
ul li {
width: 100px;
height: 100%;
background: #2A3C5C;
color: white;
text-align: center;
line-height: 60px;
}
ul li:hover {
background: #8B0000;
cursor: pointer; /* 将鼠标变为手 */
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>游戏1</li>
<li>游戏2</li>
<li>游戏3</li>
<li>游戏4</li>
<li>游戏5</li>
<li>游戏6</li>
<li>游戏7</li>
<li>游戏8</li>
<li>游戏9</li>
</ul>
</div>
</body>
</html>
弹性布局属性介绍
-
flex-direction：指定弹性容器中子元素的排列方式，默认是以水平轴为主轴，垂直轴为辅助轴。有以下几个值：
-
row，默认值，水平排列
-
row-reverse：水平反向排列
-
column：垂直排列
-
column-reverse：垂直反向排列
-
-
flex-wrap：设置弹性盒子的子元素超出父容器时是否换行，有以下几个值：
-
nowrap：不换行，默认值
-
wrap：换行
-
wrap-reverse：换行并反向排列
-
-
flex-flow：它是上面两个的简写方式
-
align-items：设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式，有以下几个值：
-
flex-start：顶对齐，默认值
-
flex-end：底对齐
-
center：垂直居中对齐
-
baseline：基线对齐
-
stretch：拉申充满容器
-
-
align-content：修改 flex-wrap 属性的行为，类似于 align-items，但不是设置子元素对齐，而是设置行对齐。
-
justify-content：设置弹性盒子元素在主轴（横轴）方向上的对齐方式，有以下几个值：
-
flex-start：左对齐
-
flex-end：右对齐
-
center：水平居中对齐
-
space-around：子元素的左右空白相等的对齐方式
-
space-between：子元素平均分配空白，则左右两边对齐
-
space-evenly：子元素平均分配空白对象
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局属性介绍</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 600px;
height: 300px;
border: 1px solid #666666;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap; /*nowrap，wrap, wrap-reverse*/
/*align-items: flex-start;*/
/*align-items: flex-end;*/
/*align-items: center;*/
/*align-items: baseline;*/
/*align-items: stretch;*/
/*justify-content: flex-start;*/
/*justify-content: flex-end;*/
/*justify-content: center;*/
/*justify-content: space-around;*/
/*justify-content: space-between;*/
justify-content: space-evenly;
}
li {
width: 150px;
/*height: 100px;*/
background: #317FE5;
}
li:first-child {
background: #C44F00;
}
li:nth-child(2) {
background: blue;
}
li:nth-child(3) {
background: red;
}
li:nth-child(4) {
background: #317FE5;
}
li:nth-child(5) {
background: #2A3C5C;
}
li:nth-child(6) {
background: #8B0000;
}
li:nth-child(7) {
background: #333333;
}
li:nth-child(8) {
background: blueviolet;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<!--<li>4</li>-->
<!--<li>5</li>-->
<!--<li>6</li>-->
<!--<li>7</li>-->
<!--<li>8</li>-->
</ul>
</body>
</html>
商品案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局案例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
}
:root {
--letterspace: 3px;
}
.container {
width: 1100px;
height: 600px;
margin: 0 auto;
}
ul {
width: 100%;
height: 100%;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
li {
width: 260px;
height: 270px;
display: flex;
flex-direction: column;
}
li > img {
width: 260px;
}
li div.title {
width: 100%;
height: 30px;
background: #FB4E52;
padding: 3px;
display: flex;
justify-content: space-between;
}
li div.title .name {
width: 50%;
background: #9D0002;
color: white;
text-align: center;
letter-spacing: var(--letterspace);
}
li div.title .comfort {
width: 50%;
background: #ffffff;
text-align: center;
letter-spacing: var(--letterspace);
}
li div.footer {
width: 100%;
height: 30px;
background: white;
display: flex;
justify-content: space-between;
}
li div.footer .price {
width: 50%;
color: red;
font-weight: bold;
}
li div.footer .popularity {
width: 50%;
color: #989A9E;
font-size: 12px;
text-align: right;
padding-right: 5px;
}
</style>
</head>
<body>
<div class="container">
<ul>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
<li>
<img src="image/111405.png">
<div class="title">
<span class="name">蕾丝薄杯</span>
<span class="comfort">舒适透气</span>
</div>
<div class="footer">
<span class="price">￥2581</span>
<span class="popularity">2000人付款</span>
</div>
</li>
</ul>
</div>
</body>
</html>
登录案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>弹性布局之登录案例</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #2B4B6B;
}
.container {
width: 450px;
height: 300px;
background: white;
border-radius: 5px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.logo_box {
position: absolute;
left: 50%;
width: 130px;
height: 130px;
border-radius: 50%;
border: 1px solid #eeeeee;
padding: 10px;
box-shadow: 0 0 10px #dddddd;
transform: translate(-50%, -50%);
background: white;
}
.logo_box > img {
position: absolute;
left: 10px;
top: 10px;
width: 110px;
height: 110px;
background: #eeeeee;
border-radius: 50%;
}
.info_box {
margin: 90px auto;
width: 90%;
height: 150px;
display: flex;
flex-direction: column; /* 将纵轴变为主轴 */
justify-content: space-around;
position: relative;
}
.info_box > .account > input {
border: 1px solid #EDEFF3;
height: 25px;
border-radius: 5px;
outline: none;
padding-left: 30px;
}
.info_box > .account > img {
width: 20px;
height: 20px;
position: absolute;
left: 5px;
top: 15px;
}
.info_box > .passwd > input {
border: 1px solid #EDEFF3;
height: 25px;
border-radius: 5px;
outline: none;
padding-left: 30px;
}
.info_box > .passwd > img {
width: 20px;
height: 20px;
position: absolute;
left: 5px;
top: 62px;
}
.info_box > input:focus {
border: 1px solid #409EFF;
}
.btn_box {
width: 100%;
height: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
}
.btn_box > input {
width: 60px;
height: 30px;
margin-left: 5px;
color: white;
}
.btn_box > input[type="reset"] {
background: #909399;
border: none;
border-radius: 3px;
}
.btn_box > input[type="submit"] {
background: #409EFF;
border: none;
border-radius: 3px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo_box">
<img src="image/logo.png">
</div>
<form action="" method="post">
<div class="info_box">
<div class="account">
<img src="image/man.png">
<input type="text" name="username">
</div>
<div class="passwd">
<img src="image/lock.png">
<input type="password" name="password">
</div>
<div class="btn_box">
<input type="submit" value="登录">
<input type="reset" value="重置">
</div>
</div>
</form>
</div>
</body>
</html>
网格布局
前面的弹性布局只适合用于对一维布局，而对于二维的布局就不行，我们需要使用网格布局来实现。它是通过行（row）和列（column）来构成的。
下面以一个简单案例来演示网格布局如何使用。案例的效果图如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>网格布局</title>
<style>
.box {
/* 定义容器的大小 */
width: 500px;
height: 400px;
/* 1. 启用网格布局*/
display: grid;
/* 2. 设置网格布局的列数，需要使用 grid-template-columns 属性，它的值可以是固定值，也可以是百分比 */
/*grid-template-columns: 20% 20% 20% 20% 20%;*/
grid-template-columns: repeat(5, 1fr); /* 重复 5 次（即 5 列）, 1fr 表示等比例 */
/* 2. 设置网格布局的行数，需要使用 grid-template-rows 属性，它的值可以是固定值，也可以是百分比 */
/*grid-template-rows: 200px 200px 200px;*/
grid-template-rows: repeat(3, 200px);
/* 3. 设置单元格的间距 */
grid-gap: 10px;
}
.box > div {
border: 1px solid red;
}
.box > .test {
/*grid-row-start: 2; !* 指定开始行所在位置，这个值包含 *!*/
/*grid-row-end: 3; !* 指定结束行所在位置，这个值不包含 *!*/
/*grid-column-start: 2; !* 指定开始的列所在位置，这个值是包含的 *!*/
/*grid-column-end: 5; !* 指定结束的列所在位置，这个值不包含 *!*/
/* 上面的写法可以简化为下面的写法，格式为：开始行(或列)的位置 / 结束行(或列)的位置 */
/*grid-row: 2 / 3;*/
/*grid-column: 2 / 5;*/
/* 还可以简化为如下的写法：格式为：开始行位置 / 开始列位置 / 结束行位置 / 结束列位置 */
grid-area: 2 / 2 / 3 / 5;
}
</style>
</head>
<body>
<div class="box">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div class="test">8</div>
<div>9</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>9</div>
<div>9</div>
<div>9</div>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
