网页页面布局大全（总有一款适合你）
2021-10-21 本文已影响0人
似朝朝我心
3*1(三行一列)的布局方式
2列一行分栏式
4*3(4行3列)的布局方式
3*2(3行2列)的布局方式
奇妙的可控圣杯布局
html代码：
<!DOCTYPE html>
<html>
<head>
<link href="./图片素材/float.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<title>float布局</title>
</head>
<body>
<h1>3*1(三行一列)的布局方式<h1>
<div id="container">
<div id="header"></div>
<div id="main"></div>
<div id="footer"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>2列一行分栏式<h1>
<div id="container1">
<div id="aside"></div>
<div id="content"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>4*3(4行3列)的布局方式<h1>
<div id="container">
<div id="header"></div>
<div id="nav"></div>
<div id="main">
<div id="aside1" class="baside"></div>
<div id="content"></div>
<div id="aside2" class="baside"></div>
</div>
<div id="footer"></div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>3*2(3行2列)的布局方式<h1>
<div id="container">
<div id="header"></div>
<div id="main">
<div id="aside"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
css代码：
* {
padding: 0;
margin: 0;
}
body {
font-size: 14px;
}
#container {
margin: 0 auto;
width: 1000px;
height: 500px;
/* background-color: #6cf; */
}
#container1 {
margin: 0 auto;
width: 1000px;
height: 500px;
/* background-color: black; */
}
#header {
height: 100px;
background-color: #6cf;
margin-bottom: 5px;/*分割5像素*/
}
#nav{
height: 30px;
background-color: #3cf;
margin-bottom: 5px;
}
#main{
height: 500px;
background-color: #cff;
margin-bottom: 5px;
}
#aside{
float: left;
width: 300px;
height: 500px;
background-color: #6cf;
}
#content{
float: right;/*如果用left需添加margin*/
width: 695px;/*空出5像素的间隙*/
height: 500px;
/* margin-right: 5px; */
background-color: #cff;
}
.baside{
float: left;
width: 100px;
height: 500px;
background-color: #6cf;
}
#aside1{
float:right;
}
#aside2{
}
#footer{
height: 60px;
background-color: #6cf;
}
圣杯布局代码和分析：
<!DOCTYPE html>
<html lang="zh">
<head>
<link rel="stylesheet" type="text/css" href="index.css" />
<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></title>
</head>
<body>
<div class="HolyGrail">
<header>header</header>
<div class="HolyGrail-body">
<main class="HolyGrail-content">main</main>
<nav class="HolyGrail-nav">sider_left</nav>
<aside class="HolyGrail-ads">sider_right</aside>
</div>
<footer>footer</footer>
</div>
</body>
</html>
-------------------------------
css样式
-------------------------------
*{
margin: 0;
padding: 0;
}
/*圣杯篇*/
.HolyGrail {
display: flex;
min-height: 100vh; /*相对于视口的高度。视口被均分为100单位的vh*/
flex-direction: column;
}
header,footer {
flex: 1; /*数值为1 代表头尾所占均衡比例，
数值越大，占比越大，相对的中条将会被挤压均衡压缩*/
background:grey; /*控头尾的一条带*/
}
.HolyGrail-body {
display: flex;
flex: 1;
/*控中间的一条带*/
}
.HolyGrail-content {
flex: 1;
background:green; /*控制中心一小块*/
}
.HolyGrail-nav, .HolyGrail-ads {
/* 两个边栏的宽度设为12em */
flex: 0 0 12em; /*第一个数值同时控制左右宽度占比，第2个数值控制中间所占比，-值占比大
*/
background:blue; /*控左右两小快*/
}
.HolyGrail-nav {
/*-1时最导航放到最左边 0中 1时在右 总结：-居左 0居中 +居右*/
order: -1;
background:yellow; /*控左1快*/
}
