後臺管理頁面佈局、web頁面佈局
阿新 • • 發佈:2020-09-09
做一個簡單的頁面佈局
基本結構如下
<body> <!-- svg圖示 --> <div style="display: none;"> <svg> <symbol id="menu" viewBox="0 0 1024 1024"> <path d="M376.832 474.112H130.048c-33.792 0-61.44-27.648-61.44-61.44V165.888c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 33.792-27.648 60.928-61.952 60.928zM130.048 165.888v247.296h247.296V165.888H130.048zM739.84 525.312c-16.384 0-31.744-6.144-43.52-17.92L521.728 332.8c-11.776-11.776-17.92-27.136-17.92-43.52s6.144-31.744 17.92-43.52L696.32 71.168c11.776-11.776 27.136-17.92 43.52-17.92s31.744 6.144 43.52 17.92L957.952 245.76c11.776 11.776 17.92 27.136 17.92 43.52s-6.144 31.744-17.92 43.52L783.36 507.392c-11.776 11.776-27.136 17.92-43.52 17.92z m0-411.136l-174.592 174.592 174.592 174.592 174.592-174.592-174.592-174.592zM376.832 960.512H130.048c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c-0.512 34.304-27.648 61.44-61.952 61.44z m-246.784-308.224v247.296h247.296v-247.296H130.048zM863.232 960.512h-247.296c-33.792 0-61.44-27.648-61.44-61.44v-247.296c0-33.792 27.648-61.44 61.44-61.44h247.296c33.792 0 61.44 27.648 61.44 61.44v247.296c0 34.304-27.136 61.44-61.44 61.44z m-246.784-308.224v247.296h247.296v-247.296h-247.296z" p-id="3130"/> </symbol> <symbol id="arrow" viewBox="0 0 1024 1024"> <path d="M310.613333 393.386667a32 32 0 0 0-45.226666 45.226666l213.333333 213.333334a32 32 0 0 0 45.226667 0l213.333333-213.333334a32 32 0 0 0-45.226667-45.226666l-190.72 190.72-190.72-190.72z" p-id="4027"/> </symbol> </svg> </div> <div class="wrapper"> <!-- 側邊欄 --> <nav id="nav"> <header> 頭部 </header> <!-- 選單 --> <ul class="nav-menu"> <li> <div class="nav-menu-item"> <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i> <span class="title">選單1111abcdefg</span> <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i> </div> <ul class="nav-menu"> <li> <div class="nav-menu-item"> <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i> <span class="title">子選單1</span> <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i> </div> </li> <li> <div class="nav-menu-item"> <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i> <span class="title">子選單1</span> <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i> </div> </li> </ul> </li> <li> <div class="nav-menu-item"> <i class="icon"><svg class="svg"><use xlink:href="#menu"/></svg></i> <span class="title">選單2</span> <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i> </div> </li> <li> <div class="nav-menu-item"> <i class="icon iconfont icon-duigou"></i> <span class="title">選單2</span> <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i> </div> </li> </ul> </nav> <!-- 內容 --> <main> <!-- 頭部 --> <header> 頭部 <button id="shrink">摺疊</button> </header> <!-- 內容 --> <section> <div>內容</div> <div>內容</div> </section> <!-- 底部 --> <footer> 底部 </footer> </main> </div> </body>
css程式碼部分
<!-- iconfont 阿里適量圖示 --> <style type="text/css"> @font-face {font-family: "iconfont"; src: url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.eot?t=1599211482334'); /* IE9 */ src: url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.eot?t=1599211482334#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK4AAsAAAAABmAAAAJsAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApsgQMBNgIkAwgLBgAEIAWEbQcwG6kFyB6SJI8hRIhMQ5WCAhIieJr7nLfZ/MsRgeeCArRAqsrXSUIHLOtZV+f/1to/MapG5hHNvK7Nis292TlcEkRI3jVkSC4ZT2QBV6UBl+NfQA/SOqBc5pi2MMA4oID2xiiyAoos8FTEO5HuIO8TaDEhheukrqUHgjIsC8R9TeEhWIjKslKohEbD3sxcq6jScjrFg+jz8c9OBEFSFoCWC/dqJaj4WUolxVQ9pcDu5dxQDlFgDcjElcbsOR6hsB4tWa8ZcKzG4GdpXQd2cVSLUP461LeBMV76TDJP/qjfTCCjxCiwOSlEGWiNj97oEf7hoZ/GfO/+/FB87fa25QP7bc9uL1zrGU6rr6q8jH3LXaIbxwdnGnuqas93E5T++tLO6qTR7sQ16az+73R08vTjYfPrDBUAtSEv/QkE71bW3693lvyvWr0AP4aWniP5MD/VXn3B32nLH9SHZZ6qQCZloEMqFJNRvrOKeLEaUAOCPd6nGvtvpRgq/TfkbzKeoVCZIzKzhlKrPTRU9tFiVf3hVr0oj8ghYMU8h9BlD0mHlyh0OSMy84bSgF80dIUHLa5F9JmtFkKLqqaYZ1hCwjDSRGLLzMGi4sYurERMnuYVEacPU0dLoMy0jHKhHtuYLrHBGVCyGJORTImF6rjHsGkSFKZExyJLUxkLF6Wny00vShOJBVGOURiPwSSIYBiiERE2ORjMRFXe3wVTRJh4tKOnJdwHoxza6EimNBkDiHqtPajnUZ5xDFBkYRgZIqMIC1LHzcJMJgIJN8/SYSImjTohHVYknfrJQ7Vp2+utvzsELWBKQdM80LgT0RQSAQAA') format('woff2'), url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.woff?t=1599211482334') format('woff'), url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.ttf?t=1599211482334') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */ url('//at.alicdn.com/t/font_2047158_bw3wzeqstl9.svg?t=1599211482334#iconfont') format('svg'); /* iOS 4.1- */ } .iconfont { font-family: "iconfont" !important; font-size: 16px; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .icon-duigou:before { content: "\e63d"; } </style> <!-- 頁面佈局 --> <style type="text/css"> /* =============================================== 頁面佈局樣式-begin */ * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; } /* 包裝整個頁面 注意字型高度超過標籤高度會出現滾動條 */ .wrapper { height: 100%; display: flex; } /* 頭部 */ header { height: 40px; line-height: 40px; border: 1px solid orange; background-color: orange; } /* 左側邊選單 */ nav { width: 200px; min-width: 200px; border: 1px solid red; background-color: #1D1E23; display: flex; flex-direction: column; } nav > ul { overflow: auto; flex: 1; } /* 選單頭部和選單項字型居中 */ nav > header { text-align: center; } /* 選單項 */ .nav-menu > li > .nav-menu-item { padding: 14px 20px; cursor: pointer; } /* 滑鼠懸停 選單項樣式 */ .nav-menu > li > .nav-menu-item:hover { background-color: #101117; color: white; } .nav-menu-item > .title { display: inline-block; width: 70px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #BCBCBD; } .nav-menu-item > .icon, .nav-menu-item > .icon > .svg { display: inline-block; width: 30px; height: 30px; line-height: 30px; text-align: center; vertical-align: bottom; color: #BCBCBD; fill: #BCBCBD; } /* 滑鼠懸停 選單項圖示樣式 */ .nav-menu-item:hover > .title, .nav-menu-item:hover > .icon > .svg { color: white; fill: white; } .nav-menu > .active > .nav-menu { display: block; background-color: #101117; } .nav-menu > li > .nav-menu { display: none; } .nav-menu > .active > .nav-menu-item > .icon:last-child > .svg { transform: rotate(180deg); transition: transform .2s ease-in-out } .nav-menu > li > .nav-menu-item > .icon:last-child > .svg { transition: transform .2s ease-in-out } /* 主體 */ main { border: 1px solid blue; flex: 1; display: flex; flex-direction: column; } /* 內容 */ section { flex: 1; overflow: auto; } /* 底部 */ footer { height: 40px; border: 1px solid black; } /* =============================================== 頁面佈局樣式-end */ /* =============================================== 選單收縮樣式-begin */ /** 把選單 nav 寬度縮小 */ .nav-mini { width: 80px; min-width: 80px; text-align: center; } /** 把選單子項 li 裡的文字和右圖示隱藏 */ .nav-mini > ul li .nav-menu-item > span, .nav-mini > ul li .nav-menu-item > i:last-child { display: none; } /* =============================================== 選單收縮樣式-end */ </style>
js程式碼部分
<script type="text/javascript"> window.onload = function () { generateDiv(); generateLi(); init(); } function init() { // 點選收縮 let shrink = document.getElementById('shrink'); if (shrink) { shrink.onclick = function () { // 給nav標籤新增/移除css(收縮css) let nav = document.getElementById('nav'); let mini = 'nav-mini'; let className = nav.className; let classNameArray = className.split(/\s/); // 移除css中的空字串 classNameArray.forEach((item, index) => { if (item.replace(/\s/g, '') == '') { classNameArray.splice(index, 1); } }); // 存在新增css就移除,不存在就新增 if (classNameArray.includes(mini)) { nav.className = className.replace(mini, ''); } else { let newClassName = classNameArray.concat(mini).join(' '); nav.className = newClassName; } } } // 點選選單項 let navMenu = document.getElementsByClassName('nav-menu')[0]; addClick(navMenu); } /** 新增點選事件 */ function addClick(navMenu) { if (navMenu) { let menuChildes = navMenu.children; if (menuChildes.length > 0) { let array = Array.from(menuChildes); array.forEach((item) =>{ if (item.nodeName == "LI") { item.onclick = function (e) { let className = item.className; if (className == 'active') { item.className = ''; } else { item.className = 'active'; } let itemChildes = item.children; if (itemChildes.length > 0) { let itemArray = Array.from(itemChildes); itemArray.forEach((child) => { if (child.nodeName == "UL") { addClick(child); } }); } // 阻止事件冒泡 e.stopPropagation(); } } }); } } } /** 生成測試資料 */ function generateLi() { let sections = document.getElementsByTagName('ul'); let section0 = sections[0]; for (let i = 0; i < 100; i++) { let li = '<li>\n' + ' <div class="nav-menu-item">\n' + ' <i class="icon iconfont icon-duigou"></i>\n' + ' <span class="title">選單'+ (i + 2) +'</span>\n' + ' <i class="icon"><svg class="svg"><use xlink:href="#arrow"/></svg></i>\n' + ' </div>\n' + ' </li>' section0.insertAdjacentHTML('beforeend', li); } } /** 生成測試資料 */ function generateDiv() { let sections = document.getElementsByTagName('section'); let section0 = sections[0]; for (let i = 0; i < 100; i++) { section0.insertAdjacentHTML('beforeend', '<div>內容'+ i +'</div>'); } } </script>
下載連結 https://download.csdn.net/download/qq_32856631/12825230