时间：2024-01-29 10:25:01 | 来源：网站运营
时间：2024-01-29 10:25:01 来源：网站运营
前端页面大家都是怎么做出来的？：作为初学者的你，是否对页面的布局以及类型的划分感到困扰呢？
在线咨询
<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端的布局方式哦！<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>标签就可以引进去喽，那接下来快去试试看吧关键词：
