当一个页面把能接的广告都接了，各种花花绿绿的小窗口在两边，作为老板，会招一个怎么样的程序员，让设计的页面，能兼顾用户体验和搞钱呢？没错！就是会三栏布局的程序员，哈哈哈哈哈......
一、效果图展示
当我们看到这样的一个布局时，首先想的是结构——左右结构，然后三个div，调整一下宽高就很简单的实现了。
xml
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.page{
height: 200px;
font-size: 0;
}
.left,.right{
height: 200px;
width: 200px;
background-color: green;
}
.content{
height: 200px;
background-color: yellow;
width: calc(100vw - 400px);
}
.page div{
display: inline-block;
font-size: 20px;
}
</style>
</head>
<body>
<div class="page">
<div class="left">广告位</div>
<div class="content">主要内容</div>
<div class="right">广告位</div>
</div>
</body>
</html>
-
但是这样的话，DOM元素是从上往下加载、渲染的，游览器会先加载广告位，然后加载主要内容，一旦广告一多，用户就不能及时地看到需要的内容，极大地降低了用户体验，违背了前端的使命，这种事我可不干!
-
那么如何解决呢？很简单，把主要内容放到广告位前面，这就解决了加载的问题，布局问题呢？这就是接下来我们要聊一聊的啦。
我们先给出简单的html和style，设置了一些元素以及宽高背景图，便于我们观察效果。避免后面代码冗余，接下来的布局只给出style代码。
xml
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.page{
height: 200px;
font-size: 0;
}
.left,.right{
height: 200px;
width: 200px;
background-color: green;
}
.content{
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="page">
<div class="content">主要内容</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
</body>
</html>
二、三栏布局
1、圣杯布局
css
复制代码
.page{
padding: 0 200px;
}
.page div{
float: left;
}
.content{
width: 100%;
}
.left{
margin-left: -200px;
position: relative;
left: -100%;
}
.right{
margin-left: -200px;
position: relative;
right: -200px;
}
- 设置了page的内边距，给两个广告位预留了位置。
- 设置div的浮动
float:left;脱离文本流，一行显示 -
content:100%自适应了剩余的空间 -
- 左边栏
left的margin-left设置为-200px，这会使其向左移动200像素，正好抵消了page容器的200px内边距。 -
position: relative和left: -100%则是为了让左边栏在page容器的左边界内显示，即从页面的最左边开始，但被margin-left向左推移了200px。
- 左边栏
-
- 右边栏
right的margin-left同样是-200px，这也会使其向左移动200像素。 -
position: relative和right: -200px的组合则是为了让右边栏在page容器的右边界内显示，即从页面的最右边开始，但被margin-left向左推移了200px。 圣杯布局的核心在于通过负边距和相对定位，解决了左右边栏的固定宽度和中间栏的自适应宽度。
- 右边栏
注： 值得一提的是float:left是通过左向右浮动实现一行显示，当超出屏幕宽度时才会换行。这样你就会理解当设置margin-left: -200px;广告位会跑去上一行的原因了。
2、双飞翼布局
css
复制代码
.inner{
height: 100%;
margin: 0 200px;
}
.page>div{
float: left;
}
.left{
margin-left: -100%;
}
.right{
margin-left: -200px;
}
这里的html有所变化.....
ini
复制代码
<div class="page">
<div class="content">
<div class="inner">主要内容</div>
</div>
<div class="left">广告位</div>
<div class="right">广告位</div>
</div>
-
inner设置了左右各200px的外边距，这样就为左右两栏预留了空间。 - 设置page下的div浮动
-
margin-left: -100%;让左广告向左移动其自身宽度的距离，即200px，这样它就会被定位在页面的最左侧。 -
margin-left: -200px;让右广告向左移动200px，但由于左侧栏的存在，右侧栏实际上会定位在页面的最右侧。
这两种布局(圣杯布局、双飞翼布局)一个是利用了padding，另一个则是margin，来实现三栏布局的效果。
三、弹性布局
css
复制代码
}
.page{
display: flex;
}
.content{
flex: 1;
order: 1;
}
.right{
order: 2;
}
- 作为现在最受欢迎的布局方法之一，flex布局是最为快捷方便实现三栏布局的方法。
-
flex: 1;表示中间栏将占据剩余空间的全部比例，从而实现自适应宽度。order: 1;用于控制子元素在Flex容器中的排序，数值越小越靠前。
这三种方法实现的三栏布局都做到了优先加载主要内容的目的，接下来还有几种方法能实现三栏布局，但是无法做到优先加载主要内容。参考代码如下......
- html
xml
复制代码
<div class="page">
<!-- <div class="content">主要内容</div> -->
<div class="left">广告位</div>
<div class="content">主要内容</div>
<div class="right">广告位</div>
</div>
- table布局
css
复制代码
*{
margin: 0;
padding: 0;
}
.page{
height: 200px;
}
.content{
height: 200px;
background-color: yellow;
}
.page{
width: 100vw;
display: table;
table-layout: fixed;
}
.page>div{
display: table-cell;
}
.content{
width: 100%;
}
.left,.right{
height: 200px;
width: 200px;
background-color: green;
}
- 网格布局
xml
复制代码
<style>
*{
margin: 0;
padding: 0;
}
.page{
height: 200px;
}
.left,.right{
height: 200px;
width: 200px;
background-color: green;
}
.content{
height: 200px;
background-color: yellow;
}
.page{
display: grid;
grid-template-columns: 200px auto 200px;
}
</style>
今天的分享就到这啦！
如有侵权请联系站点删除！
RisingWave 用户定义函数 (二)： Rust x WebAssembly
2024-07-01
Technical cooperation service hotline, welcome to inquire！
专注于高端网站定制、企业网站建设、手机移动网站建设、手机APP定制开发、应用系统开发等，为企业提供全球化互联网解决方案。
