更新第25个小实例
This commit is contained in:
DESKTOP-BM6RJU5\wyanh
parent
80a150b2f9
commit
7e014e45ce
|
|
@ -28,4 +28,5 @@
|
|||
21. HTML+CSS小实例之手风琴式加载动画
|
||||
22. HTML5+CSS3小实例之分享按钮切换效果
|
||||
23. HTML5+CSS3小实例之简单好玩的水球加载效果
|
||||
24. HTML5+CSS3小实例之酷炫的ANIPLEX文字特效
|
||||
24. HTML5+CSS3小实例之酷炫的ANIPLEX文字特效
|
||||
25. HTML5+CSS3小实例之后台管理系统的侧边导航栏
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
*{
|
||||
/* 初始化 取消内外边距 */
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body{
|
||||
/* 溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.navbar{
|
||||
/* 相对定位 */
|
||||
position: relative;
|
||||
/* 100%窗口宽度 */
|
||||
width: 100vw;
|
||||
}
|
||||
#checkbox{
|
||||
/* 隐藏复选框 */
|
||||
display: none;
|
||||
}
|
||||
.navbar label{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 70px;
|
||||
width: 100%;
|
||||
height: 43px;
|
||||
font-size: 30px;
|
||||
color: #5a738e;
|
||||
background-color: #ededed;
|
||||
padding-left: 20px;
|
||||
border: 1px solid #d9dee4;
|
||||
cursor: pointer;
|
||||
/* 加个动画过渡 */
|
||||
transition: all 0.5s;
|
||||
}
|
||||
.navbar ul{
|
||||
list-style: none;
|
||||
width: 70px;
|
||||
/* 100%窗口高度 */
|
||||
height: 100vh;
|
||||
background-color: #2a3f54;
|
||||
transition: all 0.5s;
|
||||
/* 再加个溢出隐藏 */
|
||||
overflow: hidden;
|
||||
}
|
||||
.navbar ul li{
|
||||
height: 70px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.navbar ul li:first-child{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.navbar ul li:first-child img{
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.navbar ul li:first-child span{
|
||||
color: #fff;
|
||||
/* 文字禁止换行 */
|
||||
white-space: nowrap;
|
||||
padding-left: 10px;
|
||||
/* 先把文字隐藏 */
|
||||
display: none;
|
||||
}
|
||||
.navbar ul li a{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* 垂直排列 */
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #d1d1d1;
|
||||
/* 去掉下划线 */
|
||||
text-decoration: none;
|
||||
}
|
||||
.navbar ul li a i{
|
||||
font-size: 25px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.navbar ul li a span{
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.navbar ul li a:hover{
|
||||
color: #fff;
|
||||
background-color: #35495d;
|
||||
}
|
||||
/* :checked选择器是判断复选框是否被选中 */
|
||||
/* +是相邻兄弟选择器，找到input的下一个兄弟label */
|
||||
.navbar input:checked + label{
|
||||
left: 200px;
|
||||
}
|
||||
/* ~也是兄弟选择器，但它可以找到隔了几代的兄弟 */
|
||||
.navbar input:checked ~ ul{
|
||||
width: 200px;
|
||||
}
|
||||
.navbar input:checked ~ ul li:first-child{
|
||||
/* 将居中改为开头对齐 */
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar input:checked ~ ul li:first-child span{
|
||||
/* 文字显示 */
|
||||
display: block;
|
||||
}
|
||||
.navbar input:checked ~ ul li a{
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.navbar input:checked ~ ul li a i{
|
||||
font-size: 18px;
|
||||
margin: 0 15px 0 30px;
|
||||
}
|
||||
.navbar input:checked ~ ul li a span{
|
||||
font-size: 14px;
|
||||
}
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta http-equiv="content-type" content="text/html; charset=utf-8">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
|
||||
|
||||
<title>侧边展开导航栏</title>
|
||||
<!-- 引入字体图标 -->
|
||||
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
|
||||
<link rel="stylesheet" href="../css/25.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="navbar">
|
||||
<input type="checkbox" id="checkbox">
|
||||
<label for="checkbox">
|
||||
<i class="fa fa-bars" aria-hidden="true"></i>
|
||||
</label>
|
||||
<ul>
|
||||
<li>
|
||||
<img src="../images/1.png" alt="">
|
||||
<span>欢迎您！管理员</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<i class="fa fa-home" aria-hidden="true"></i>
|
||||
<span>后台首页</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<i class="fa fa-sitemap" aria-hidden="true"></i>
|
||||
<span>商品列表</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<i class="fa fa-user-circle-o" aria-hidden="true"></i>
|
||||
<span>用户列表</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<i class="fa fa-shopping-bag" aria-hidden="true"></i>
|
||||
<span>订单列表</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="javascript:void(0)">
|
||||
<i class="fa fa-th-large" aria-hidden="true"></i>
|
||||
<span>功能列表</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Loading…
Reference in New Issue