【CSS笔记】CSS实现后台管理系统主界面布局
生活随笔
收集整理的這篇文章主要介紹了
【CSS笔记】CSS实现后台管理系统主界面布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一、后臺管理系統界面
1.1、實現效果
1.2、案例代碼
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后臺管理系統</title><style>* {margin: 0;padding: 0;}html, body {height: 100%;}.header {height: 60px;background-color: #F1F1F1;box-sizing: border-box;border-bottom: 2px solid black;}.header > div {float: left;}.header .logo {width: 210px;height: 100%;text-align: center;}.logo > img {width: 100px;height: 58px;line-height: 58px;}.header .nav-bar {height: 100%;width: calc(100% - 420px);}.nav-bar > ul {list-style-type: none;padding: 0;margin: 0;}.nav-bar > ul > li {float: left;width: 80px;text-align: center;margin: 10px 4px;height: 40px;}.nav-bar > ul > li:hover {background-color: #F0F0F5;cursor: pointer;}.nav-bar > ul > li > a {display: inline-block;text-decoration: none;color: none;line-height: 40px;}.profile {width: 190px;height: 100%;padding-right: 20px;text-align: right;}.user-avatar {display: inline-block;height: 60px;text-align: center;line-height: 60px;}.user-avatar:hover {cursor: pointer;}.user-account {display: inline-block;padding: 5px 0;color: gray;}.user-account:hover {color: blue;cursor: pointer;}.user-avatar > img {width: 40px;height: 40px;border-radius: 50%;vertical-align: middle;}.container {height: calc(100% - 60px);}.container > div {float: left;}.left {width: 210px;height: 100%;box-sizing: border-box;border-right: 2px solid black;background-color: white;overflow-y: auto;}.menu-bar {list-style-type: none;padding: 0;margin: 0;}.menu-bar > li {height: 40px;line-height: 40px;margin: 4px 0;text-align: center;color: gray;}.menu-bar > li:hover {cursor: pointer;color: blue;background-color: #F1F1F1;}.right {width: calc(100% - 210px);height: 100%;background-color: rgba(241,241,241, .2);}.nav-title {height: 35px;line-height: 35px;padding-left: 10px;color: gray;box-sizing: border-box;border-bottom: 2px solid black;}.content {height: calc(100% - 55px);overflow-y: auto;padding: 10px;}</style> </head> <body><!-- 頂部導航欄 --><div class="header"><!-- logo區域 --><div class="logo"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticles.csdn.net%2Fuploads%2Fallimg%2F121017%2F173-12101F920370-L.jpg&refer=http%3A%2F%2Farticles.csdn.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663423070&t=6847a6c504b03a361731b3721f2961f4" alt=""></div><!-- 導航欄區域 --><div class="nav-bar"><ul><li><a href="#">首頁</a></li><li><a href="#">博客文章</a></li><li><a href="#">學習社區</a></li></ul></div><!-- 個人信息 --><div class="profile"><span class="user-avatar"><img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Farticles.csdn.net%2Fuploads%2Fallimg%2F121017%2F173-12101F920370-L.jpg&refer=http%3A%2F%2Farticles.csdn.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663423070&t=6847a6c504b03a361731b3721f2961f4" alt=""></span><span class="user-account">admin</span></div></div><!-- 中間內容區域 --><div class="container"><!-- 菜單欄區域 --><div class="left"><ul class="menu-bar"><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li><li>首頁</li><li>菜單管理</li><li>文章管理</li></ul></div><!-- 內容區域 --><div class="right"><div class="nav-title">首頁 > 首頁</div><div class="content"><div style="height:1000px;">內容區域</div></div></div></div> </body> </html>到此，CSS實現后臺管理系統主界面布局結束。
總結
以上是生活随笔為你收集整理的【CSS笔记】CSS实现后台管理系统主界面布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： sdlc esd.oracle.com,
- 下一篇： android 内部 存储空间不足,安卓