很多初学者在一开始学习使用HTML/CSS时，由于对盒子模型的各项定义细节了解不够充分，一些基本的布局都很难玩转。在此Rico给大家提供双飞翼布局和圣杯布局供大家参考学习。
- 双飞翼布局：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dual-wings</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 200px;
height: 500px;
margin-left: -100%;
background: aqua;
}
.center {
float: left;
width: 100%;
height: 500px;
background: blueviolet;
}
.right {
float: left;
width: 100px;
height: 500px;
margin-left: -100px;
background: coral;
}
.main {
margin-left: 200px;
margin-right: 100px;
}
</style>
</head>
<body>
<div class="center">
<div class="main">main</div>
</div>
<div class="left">Left</div>
<div class="right">Right</div>
</body>
</html>
- 圣杯布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
position: relative;/*基于初始位置*/
float: left;
right: 200px;
width: 200px;
height: 500px;
margin-left: -100%;
background: aqua;
}
.center {
float: left;
width: 100%;
height: 500px;
background: blueviolet;
}
.right {
float: left;
position: relative;
left: 100px;
width: 100px;
height: 500px;
margin-left: -100px;
background: coral;
}
.layout {
padding-left: 200px;
padding-right: 100px;
}
</style>
</head>
<body>
<div class="layout">
<div class="center">main</div>
<div class="left">Left</div>
<div class="right">Right</div>
</div>
</body>
</html>
作者解释：
-
这两个布局模板，都是为了实现左中右三列式布局，左右宽度设定，中间宽度自适应。在两种实现方式中，中心模块
center的宽度都设置为了100%，而左右模块则是固定宽度。同时每个模块都设置了不同的颜色，用以区分，在实际使用时根据情况改动即可。 这里需要注意的一点是，尽管中间模块宽度为100%自适应，但是其高度也要手动设置，否则div的高度将仅由里面的内容撑起来。 -
如果读者们希望实现两列式布局，比如需要左边宽度固定，右边自适应，则只需要删除最右边的模块（
<div class="right">Right</div>）和对应CSS样式即可。 -
同理，如果希望实现左边宽度自适应，右边固定，则只需要删除最左边的模块
<div class="left">Left</div>和对应CSS样式即可。 -
这里Rico为了代码的连贯性，将CSS的相关内容以内部样式表 注1 的形式，连同HTML的相关内容一起写在了一个文件中。 实际使用时强烈建议大家以外部样式表 注2 的形式编写CSS的相关内容。
注1 : 是指不使用外部CSS文件，而是将CSS放在HTML文件<head>标签里的<style>标签之中。有的时候，这种方法会比较有用（比如你使用的内容管理系统不能直接编辑CSS文件)，但该方法和外部样式表比起来更加低效 。在一个站点里，你不得不在每个页面里重复添加相同的CSS，并且在需要更改CSS时修改每个页面文件。
注2 : 是指将CSS编写在扩展名为.css 的单独文件中，并从HTML<link> 元素引用它的情况
转载请注明出处，如果有错误或者疑问的地方，欢迎在评论区留言讨论，Rico和大家一起进步一起成长~
网友评论