后台管理系统网页开发

CSS样式代码

css 复制代码
/* 后台管理系统样式文件 */
#container{
width:100%;
height:100%;
/* background-color:antiquewhite;*/
display:flex;}
/* 左侧导航区域:宽度300px*/
.left{
width:300px;
height: 100%;
background-color:#203453;
display:flex;
flex-direction:column;
justify-content:space-between;}

.left > div:nth-of-type(1){
display:flex;
flex-direction:column;
align-items:center;
gap: 30px;}

.left .logo{
width: 100%;
height:50px;

background-color:white;
display: flex;
flex-direction:row;
justify-content:center;
align-items:center;
gap:10px;}

.logo img{
    width:55px;
    height:35px;
}

.logo span{
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 3px;
    /* 字母间距:3px;*/
}

.left .header-img{
    width: 100%;
    color: white;
    display: flex;
    flex-direction: column;
    gap:10px;
    justify-content: center;
    align-items: center;
}
.header-img img{
     width:100px;
     height: 100px;
     border-radius:50%;
}


 .left .nav{
 width: 100%;
 list-style:none;
}
.nav div:nth-of-type(1),
.nav div:nth-of-type(2),
.nav div:nth-of-type(3),
.nav div:nth-of-type(4),
.nav div:nth-of-type(5),
.nav div:nth-of-type(6){
    display: flex;
     /* 样式修改主轴方向 */
     flex-direction:row;
     justify-items: center;
     align-items:center;}
.nav div,
.exit{
width:100%;
height:50px;
font-size:18px;
color:white;
/* 鼠标显示手型 */
cursor:pointer;
/* 文本居中 */
line-height: 50px;
text-align: center;
}
.nav div:hover,
.exit:hover{
background-color:white;
color:#203453;
font-weight:600px;
}
.left .exit{
height:50px;
width:100%;
}





 /* 右侧内容区域:宽度-弹性盒子剩余所有宽度(flex:1)-------------------------- */
.right{
    height:100%;
    flex: 1;
    background-color:#fff;
    display:flex;
    flex-direction: column;
}
.right .header,
.right .footer{
    height:50px;
    color:#333;
    background-color: #fff;
    }
.right .header{
    border-bottom:solid 1px #ccc;
    display:flex;
    justify-content: space-between;
    align-items: center;
    padding-left:20px;
    padding-right:20px;
    }
.header span:nth-of-type(1){
    display: inline-block;
    width: 100px;
    height:30px;
    background-color:#eee;
    border-radius:8px;
    line-height: 30px;
    text-align:center;
    font-size:14px;
    cursor: pointer;
    }
.header span:nth-of-type(2){
    font-size:20px;
    font-weight:600;
 }

     .right .footer{
    border-top: solid 1px #ccc;
    font-size:12px;
    color:#aaa;
    line-height: 50px;
    text-align:center;
    }
    .main{
    flex:1;
    padding:10px;
    }
    .main .content{
    background-color:aliceblue;
    height:100%;
    width:100%;
    border-radius:10px;
    padding:10px;
    }

html代码

html 复制代码
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台管理系统首页</title>
    <!-- 引入外部css样式文件 -->
<link rel="stylesheet" href="./CSS/style.css">
<link rel="stylesheet" href="./CSS/xitong.css">
</head>
<body>
    <!-- 包含所有内容的容器 -->
<div id="container">
    <!-- 左侧内容区域 -->
    <div class="left">
    <!-- 上侧内容 -->
      <div>
        <!-- logo -->
        <div class="logo">
        <img src="./images/logo.png" >
        <span>OPENLAB管理系统</span>
        </div>
        <!-- 头像 -->
        <div class="header-img">
        <img src="./images/qingque.jpg">
        <h2>管理员:DUSTCELL</h2>
      </div>
    <!-- 导航 -->
    <div class="nav">
    <div><img src="./images/shouye.png" height="30px" width="30px">首页</div>
    <div><img src="./images/shezhi.png"  height="30px" width="30px">系统设置</div>
    <div><img src="./images/guanliyuan_jiaoseguanli.png"  height="30px" width="30px">用户管理</div>
    <div><img src="./images/guanli.png"  height="30px" width="30px">店铺管理</div>
   <div><img src="./images/guanli_1.png"  height="30px" width="30px">订单管理</div>
   <div><img src="./images/houtaiguanli-jifenguanli.png"  height="30px" width="30px">积分管理</div>
    </div>
   <!-- 
    img : 图片标签名称,主要网页中显示图片
        src属性:显示图片的路径(网址、本地路径、图片数据)
        width属性:设置图片宽度,一般推荐以像素为单位
        height属性:设置图片高度,一般推荐以像素为放;两个属性都设置-图片拉伸
        alt属性:当图片无法正常显示时替代的文字描述
    -->
   </div>
   <!-- 下侧内容:安全退出 -->
   <div class="exit">
   <span>安全退出</span>
   </div>
</div>
    <!-- 右侧内容区域 -->
<div class="right">
        <!-- 页头 -->
    <div class="header">
        <span>收起菜单</span>
        <span>OPENLAB管理系统</span>
        <span>管理员:曼妮</span>
    </div>
<!-- 内容 -->
    <div class="main">
    <div class="content">
     <!-- 内容部分 -->
    </div>
    </div>
    <!-- 页脚 -->
    <div class="footer">
    <span>版权所有,翻版必究</span>
    </div>
    </div>
</div>
</body>
</html>

效果展示

相关推荐
harry7591 分钟前
React 18+ 安全访问浏览器对象终极指南:从原理到生产级解决方案
前端·javascript
Riesenzahn16 分钟前
不用第三方库,说说纯js怎么实现读取和导出excel?
前端·javascript
人物19 分钟前
想到啥写啥的前端小技巧
javascript
天天扭码19 分钟前
解密HTML骨架:一行代码引发的浏览器血案
前端·css·html
赵要上天20 分钟前
前端插件使用xlsx-populate,花样配置excel内容,根据坐添加标替换excel内容,修改颜色,合并单元格...。
javascript·node.js
lens9421 分钟前
Web Worker:前端也能多线程飙车 🚀
前端·javascript
Vg22 分钟前
Node 中的 Event Loop 和浏览器中的有什么区别? process.nextTick 执行顺序?
javascript·面试
IreneXuu25 分钟前
使用 CSS Grid 实现灵活的多列布局:从基础到实战
css
用户24048170962127 分钟前
CSR VS SSR,你们知道吗?
javascript·html
知行合一也1 小时前
虚拟列表正确打开方式
前端·javascript·面试