時(shí)間：2024-01-29 10:25:01 | 來源：網(wǎng)站運(yùn)營
時(shí)間：2024-01-29 10:25:01 來源：網(wǎng)站運(yùn)營
前端頁面大家都是怎么做出來的？：作為初學(xué)者的你，是否對(duì)頁面的布局以及類型的劃分感到困擾呢？
在線咨詢
<body> <!-- 第一行：導(dǎo)航區(qū)域 --> <ul> <li class="active">官網(wǎng)首頁</li> <li>福利介紹</li> <li>明星玩伴</li> <li>新聞資訊</li> <li>玩家服務(wù)</li> </ul> <!-- 中間內(nèi)容區(qū)域 --> <div class="content"> <div class="contentCenter"> <div class="contentImg"> <img src="./images/a2.png" alt=""> </div> </div> </div> <!-- 底部版權(quán)信息 --> <div class="footer">小編©copyright</div></body>樣式的實(shí)現(xiàn) <style> body,ul {margin: 0;padding: 0;} html,body {height: 100%;} ul li {list-style: none;} /* 導(dǎo)航部分 */ 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;} /* 內(nèi)容區(qū)域 */ .content { /* 使用整個(gè)高度，減去上面的高度，減去下面高度 */ 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> <!-- 后臺(tái)管理系統(tǒng) --> <!-- 頭部 --> <div class="header">我是后臺(tái)管理系統(tǒng)的頭部</div> <!-- 中間區(qū)域 --> <div class="main"> <!-- 中間左側(cè)區(qū)域 --> <div class="left"> <ul> <li class="li1">OA系統(tǒng)</li> <li class="li2"><a href="./page/study.html" target="myIframe">學(xué)習(xí)課程</a></li> <li class="li3"><a href="./page/index.html" target="myIframe">后臺(tái)首頁</a></li> </ul> </div> <!-- 中間右側(cè)區(qū)域 --> <div class="right"> <iframe src="./page/study.html" frameborder="0" name="myIframe"></iframe> </div> </div> <!-- 底部 --> <div class="footer">我是后臺(tái)管理系統(tǒng)的尾部</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>好啦，以上就是對(duì)于pc端的常用是設(shè)置啦，如果你的項(xiàng)目需求，上面兩種不能滿足，那么歡迎你來找小編獲取其他的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">動(dòng)作類</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>個(gè)人中心</span> </li>? </div></body>iframe結(jié)構(gòu)部分：注意哦，此時(shí)可是另外新建的一個(gè)頁面喲~~~~（可以命名為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>香腸派對(duì)</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>植物大戰(zhàn)僵尸</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>香腸派對(duì)</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>植物大戰(zhàn)僵尸</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>香腸派對(duì)</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>植物大戰(zhàn)僵尸</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>香腸派對(duì)</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>植物大戰(zhàn)僵尸</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;}好了，現(xiàn)在呢，你只需要把上面的代碼copy一下就可以完成你的移動(dòng)端頁面布局嘍，當(dāng)然移動(dòng)端的項(xiàng)目，可千萬別忘了引入你的flexible.js文件來進(jìn)行rem的適配哦(flexible.js鏈接)，那如何引入呢？<body> 頁面展示內(nèi)容</body><script src="./js/flexible.js"></script>只需要在你的最底部添加一個(gè)<script>標(biāo)簽就可以引進(jìn)去嘍，那接下來快去試試看吧關(guān)鍵詞：
客戶&案例
營銷資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
