携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第23天，点击查看活动详情
作为初学者的你，是否对页面的布局以及类型的划分感到困扰呢？
你可能似懂非懂，可能一知半解，不要担心，今天我们来看看布局应该怎么做呢？
首页，你要确定你的页面是pc端还是移动端，其次你要确定你的pc端是企业站还是后管系统，如果是移动端就好说了，布局无非就是响应式的布局嘛，所以不要慌，一切都在掌握之中。看下这几个情况！
企业站
效果图:
结构的实现：
<body>
<!-- 第一行：导航区域 -->
<ul>
<li class="active">官网首页</li>
<li>福利介绍</li>
<li>明星玩伴</li>
<li>新闻资讯</li>
<li>玩家服务</li>
</ul>
<!-- 中间内容区域 -->
<div class="content">
<div class="contentCenter">
<div class="contentImg">
<img src="./images/a2.png" alt="">
</div>
</div>
</div>
<!-- 底部版权信息 -->
<div class="footer">小编©copyright</div>
</body>
样式的实现
<style>
body,ul {margin: 0;padding: 0;}
html,body {height: 100%;}
ul li {list-style: none;}
/* 导航部分 */
ul {height: 40px;background-image: linear-gradient(to right, #fff, #0000ff, #fff);}
ul li {font-size: 14px;float: left;line-height: 40px;padding-left: 10px;padding-right: 10px;text-align: center;}
.active {background: pink;color: #fff;font-size: 16px;}
/* 内容区域 */
.content {
/* 使用整个高度，减去上面的高度，减去下面高度 */
height: calc(100% - 100px);background-image: url(./images/B.png);background-size: 100%;}
.contentCenter {width: 1000px;height: 100%;margin: 0 auto;}
.contentCenter .contentImg{width: 490px;margin: 0 auto;}
.contentImg img{width: 100%;}
/* 底部 */
.footer {height: 60px;line-height: 60px;font-size: 12px;color: #fff;background: rgb(108, 107, 107);text-align: center;}
</style>
后管系统
效果图
结构实现：
<!-- 后台管理系统 -->
<!-- 头部 -->
<div class="header">我是后台管理系统的头部</div>
<!-- 中间区域 -->
<div class="main">
<!-- 中间左侧区域 -->
<div class="left">
<ul>
<li class="li1">OA系统</li>
<li class="li2"><a href="./page/study.html" target="myIframe">学习课程</a></li>
<li class="li3"><a href="./page/index.html" target="myIframe">后台首页</a></li>
</ul>
</div>
<!-- 中间右侧区域 -->
<div class="right">
<iframe src="./page/study.html" frameborder="0" name="myIframe"></iframe>
</div>
</div>
<!-- 底部 -->
<div class="footer">我是后台管理系统的尾部</div>
样式部分：
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
.left {
width: 200px;
height: 100%;
background-color: blue;
float: left;
}
.left li {
height: 40px;
line-height: 40px;
text-align: center;
font-size: 20px;
}
.left li a {
color: #fff;
}
.left .li1 {
background-color: orange;
}
.left .li2 {
background-color: purple;
}
.left .li3 {
background-color: green;
}
.right {
width: calc(100% - 200px);
height: 100%;
background-color: pink;
float: right;
}
.header{
height: 100px;
background-color: red;
text-align: center;
line-height: 100px;
font-size: 30px;
font-weight: bold;
color: #fff;
}
.footer{
height: 60px;
line-height: 60px;
background-color: black;
color: #fff;
text-align: center;
}
.main{
height: calc(100% - 160px);
background-color: rgb(27, 242, 127);
}
.main iframe{
width: 100%;
height: 100%;
}
</style>
好啦，以上就是对于pc端的常用是设置啦，如果你的项目需求，上面两种不能满足，那么欢迎你来找小编获取其他的pc端的布局方式哦！
那接下来我们就得说说移动端的布局啦，移动端的布局，通常都是展示类的，所以呢，只是布局的样式有所偏差，但是对于布局方式呢当然是万变不离其宗喽，那接下来咱们一起看看啦~
移动端布局：
效果图：
结构部分：创建一个index.html
<body>
<!-- 头部 -->
<div class="top">
<div class="head">
<span style="opacity: 0;" class="iconfont icon-zhuanfa_"></span>
<span>搜索</span>
<span class="iconfont icon-zhuanfa_"></span>
</div>
<div class="input">
<input type="text" value="游戏开始">
</div>
</div>
<!-- 中间部分 -->
<div class="center">
<div class="left">
<ul>
<li>
<div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">全部</a></li>
<li><div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">最新游戏</a>
</li>
<li><div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">手游热门</a>
</li>
<li><div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">端游热门</a>
</li>
<li><div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">主题游戏</a>
</li>
<li>
<div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">动作类</a>
</li>
<li>
<div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">食品饮料</a>
</li>
<li>
<div class="red"></div>
<a href="./page/baihuo.html" target="myIframe"> 无敌版</a>
</li>
<li>
<div class="red"></div>
<a href="./page/baihuo.html" target="myIframe">变形金刚</a>
</li>
</ul>
</div>
<div class="right">
<iframe src="./page/baihuo.html" frameborder="0" name="myIframe"></iframe>
</div>
</div>
<!-- 底部 -->
<div class="foot">
<li>
<span class="iconfont icon-shouye2"></span>
<span>首页</span>
</li>
<li>
<span class="iconfont icon-tuijian3"></span>
<span>推荐</span>
</li>
<li>
<span class="iconfont icon-sousuo3"></span>
<span>搜索</span>
</li>
<li class="li3">
<span class="iconfont icon-chat">
<div class="circle">2</div>
</span>
<span>聊天</span>
</li>
<li>
<span class="iconfont icon-wode1"></span>
<span>个人中心</span>
</li>
</div>
</body>
iframe结构部分：注意哦，此时可是另外新建的一个页面哟~~~~（可以命名为subIndex.html）
<body>
<div class="top">
<div class="topc">
<div class="top1">
<span>最新</span>
<span><img src="../img/分类_03.gif" alt=""></span>
</div>
<span>查看全部 ></span>
</div>
</div>
<div class="center">
<div class="centerTop">
<div class="pic" style=" padding: .1333rem;">
<img src="../img/222.jpg" alt="" style="height:79px">
</div>
</div>
<div class="centerBottom">
<ul>
<li>
<span><img src="../img/s1.png" alt=""></span>
<span>原神</span>
</li>
<li>
<span><img src="../img/s2.png" alt=""></span>
<span>王者荣耀</span>
</li>
<li>
<span><img src="../img/s3.png" alt=""></span>
<span>香肠派对</span>
</li>
<li>
<span><img src="../img/s4.png" alt=""></span>
<span>迷你世界</span>
</li>
<li>
<span><img src="../img/s5.png" alt=""></span>
<span>明日方舟</span>
</li>
<li>
<span><img src="../img/s6.png" alt=""></span>
<span>我的世界</span>
</li>
<li>
<span><img src="../img/s7.png" alt=""></span>
<span>和平精英</span>
</li>
<li>
<span><img src="../img/s8.png" alt=""></span>
<span>植物大战僵尸</span>
</li>
<li>
<span><img src="../img/s1.png" alt=""></span>
<span>原神</span>
</li>
<li>
<span><img src="../img/s2.png" alt=""></span>
<span>王者荣耀</span>
</li>
<li>
<span><img src="../img/s3.png" alt=""></span>
<span>香肠派对</span>
</li>
<li>
<span><img src="../img/s4.png" alt=""></span>
<span>迷你世界</span>
</li>
<li>
<span><img src="../img/s5.png" alt=""></span>
<span>明日方舟</span>
</li>
<li>
<span><img src="../img/s6.png" alt=""></span>
<span>我的世界</span>
</li>
<li>
<span><img src="../img/s7.png" alt=""></span>
<span>和平精英</span>
</li>
<li>
<span><img src="../img/s8.png" alt=""></span>
<span>植物大战僵尸</span>
</li>
<li>
<span><img src="../img/s1.png" alt=""></span>
<span>原神</span>
</li>
<li>
<span><img src="../img/s2.png" alt=""></span>
<span>王者荣耀</span>
</li>
<li>
<span><img src="../img/s3.png" alt=""></span>
<span>香肠派对</span>
</li>
<li>
<span><img src="../img/s4.png" alt=""></span>
<span>迷你世界</span>
</li>
<li>
<span><img src="../img/s5.png" alt=""></span>
<span>明日方舟</span>
</li>
<li>
<span><img src="../img/s6.png" alt=""></span>
<span>我的世界</span>
</li>
<li>
<span><img src="../img/s7.png" alt=""></span>
<span>和平精英</span>
</li>
<li>
<span><img src="../img/s8.png" alt=""></span>
<span>植物大战僵尸</span>
</li>
<li>
<span><img src="../img/s1.png" alt=""></span>
<span>原神</span>
</li>
<li>
<span><img src="../img/s2.png" alt=""></span>
<span>王者荣耀</span>
</li>
<li>
<span><img src="../img/s3.png" alt=""></span>
<span>香肠派对</span>
</li>
<li>
<span><img src="../img/s4.png" alt=""></span>
<span>迷你世界</span>
</li>
<li>
<span><img src="../img/s5.png" alt=""></span>
<span>明日方舟</span>
</li>
<li>
<span><img src="../img/s6.png" alt=""></span>
<span>我的世界</span>
</li>
<li>
<span><img src="../img/s7.png" alt=""></span>
<span>和平精英</span>
</li>
<li>
<span><img src="../img/s8.png" alt=""></span>
<span>植物大战僵尸</span>
</li>
</ul>
</div>
</div>
</body>
样式部分：
//index.html中的样式:
html,body{
height: 100%;
}
body{
flex-direction: column;
overflow: auto;
}
.top{
height: 1.3867rem;
display: flex;
justify-content: center;
align-items: center;
font-size: .3467rem;
}
.top .topc{
width: 7.6133rem;
height: .5733rem;
display: flex;
justify-content: space-between;
}
.top .topc span:nth-child(2){
color: #9c9c9c;
}
.top1{
width: 2.8267rem;
display: flex;
justify-content: center;
justify-content: space-between;
}
.top1 span img{
width: 1.8133rem;
height: .56rem;
}
.center{
display: flex;
flex-direction: column;
}
.center .centerTop{
height: 2.4133rem;
}
.center .centerTop .pic{
box-sizing: border-box;
}
.center .centerTop .pic img{
width: 100%;
}
.center .centerBottom{
display: flex;
box-sizing: border-box;
}
.center .centerBottom ul{
display: flex;
flex-wrap: wrap;
padding-left: .68rem;
padding-right: .6133rem;
}
.center .centerBottom ul li{
width: 33.33%;
height: 2.9619rem;
display: flex;
box-sizing: border-box;
flex-direction: column;
justify-content: center;
align-items: center;
padding-right: 1rem;
font-size: .16rem;
}
.center .centerBottom ul li span:nth-child(2){
margin-top: .2667rem;
}
.center .centerBottom ul li img{
width: 1.5067rem;
height: 1.48rem;
}
iframe页面的样式部分：
html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}
.top{
height: 2.56rem;
}
.top .head{
width: 9.36rem;
height: 1.3333rem;
display: flex;
justify-content: center;
align-items: center;
justify-content: space-between;
}
.top .head span:nth-child(2){
height: .4267rem;
font-size: .4267rem;
font-weight: bold;
}
.top .input{
width: 10rem;
justify-content: center;
display: flex;
}
.top .input input{
box-sizing: border-box;
width: 9.3867rem;
height: 1.04rem;
border: 0px;
outline: none;
border-radius: .3333rem;
color: #a0a0a0;
padding-left: 4rem;
font-size: .3733rem;
background-repeat: no-repeat;
background-image: url(../img/cate_03.png);
background-position: 3.5733rem center;
background-color: #ededed;
background-size: .4rem .4rem;
}
.center{
flex: 1;
overflow: auto;
display: flex;
}
.center .left{
width: 1.7067rem;
background-color: #ededed;
display: flex;
align-content: space-between;
}
.center .left ul li{
width: 1.7067rem;
height: 1.3867rem;
line-height: 1.3867rem;
text-align: center;
font-size: .3467rem;
font-family: 黑体;
position: relative;
}
.center .left ul li a{
text-decoration: none;
width: 1.7067rem;
height: 1.3867rem;
}
.center .left ul li .red{
position: absolute;
width: .0533rem;
height: .6667rem;
top: .3733rem;
left: .0267rem;
background-color: red;
display: none;
}
.center .left ul li:hover{
color: red;
background-color: white;
}
.center .left ul li:hover .red{
display: block;
}
.center .right{
flex: 1;
}
.center .right iframe{
width: 100%;
height: 100%;
}
.foot{
height: 1.3067rem;
display: flex;
align-items: center;
justify-content: space-around;
}
.foot li{
display: flex;
flex-direction: column;
text-align: center;
font-size: .2133rem;
color: #666666;
}
.foot li:hover{
color: red;
font-weight: bold;
}
.foot .li3 span{
position: relative;
}
.foot .li3 span .circle{
position: absolute;
width: .48rem;
height: .48rem ;
background-color: red;
border-radius: 50%;
color: white;
top:0.1rem;
z-index: 1;
right: -0.3rem;
}
好了，现在呢，你只需要把上面的代码copy一下就可以完成你的移动端页面布局喽，当然移动端的项目，可千万别忘了引入你的flexible.js文件来进行rem的适配哦(flexible.js链接)，那如何引入呢？
<body>
页面展示内容
</body>
<script src="./js/flexible.js"></script>
只需要在你的最底部添加一个 script 标签就可以引进去喽，那接下来快去试试看吧
怎么样？看完之后前端页面的布局问题是不是都有了答案了呢？是不是已经跃跃欲试了呢？那还等什么呢？打开你的VScode抓紧来敲一把！
