后台管理系统网页开发

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代码

<!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>

效果展示