0 Star 2 Fork 0

Ridder/Navigation-bar

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
文件
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
style.css 5.25 KB
一键复制 编辑 原始数据 按行查看 历史
Ridder 提交于 2020-10-29 17:30 . update
* {
margin: 0;
padding: 0;
font-family: Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";
}
:root {
--global-bg-gray: #21252b;
--main-text-color: #fff;
}
body {
min-height: 100vh;
background-color: #eee;
/* background-color: #fafafa; */
padding-top: 60px;
padding-bottom: 72px;
}
.content {
width: 100%;
height: 100%;
text-align: center;
}
.menubar {
position: fixed;
width: 100%;
top: 0;
height: 60px;
background: #21252b;
display: flex;
flex-direction: row;
transition: .141s;
user-select: none;
z-index: 100;
}
.menubar .logo {
width: 200px;
min-width: 120px;
text-align: center;
}
.menubar .logotitle {
width: 100%;
line-height: 60px;
font-size: 24px;
color: #fff;
}
.menubar .user {
width: 240px;
min-width: 60px;
line-height: 60px;
text-align: center;
margin-right: 30px;
display: flex;
flex-direction: row;
}
.menubar .user .userimg {
text-align: center;
width: 60px;
height: 60px;
line-height: 60px;
}
.menubar .user .userimg img {
width: 36px;
height: 36px;
margin: 12px;
border-radius: 50%;
}
.menubar .user .username {
font-size: 20px;
color: var(--main-text-color);
}
.menubar ul {
position: relative;
width: 100%;
height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
text-align: center;
}
.menubar ul li {
width: 150px;
list-style: none;
}
.menubar ul li a {
position: relative;
display: block;
width: 100%;
line-height: 60px;
text-decoration: none;
color: var(--main-text-color);
}
.menubar ul li a:hover {
background-color: rgba(255, 255, 255, .141);
}
.menubar ul li a .icon {
display: none;
}
.menubar ul li a .title {
position: relative;
display: block;
line-height: 60px;
text-align: center;
font-size: 24px;
}
.list {
margin-left: 5%;
margin-right: 5%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
text-align: center;
justify-content: space-around;
align-items: center;
}
.list .item {
flex-basis: 23%;
margin-top: 22px;
height: 260px;
background-color: #fff;
display: flex;
flex-direction: column;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 4px;
transition: .314s;
cursor: pointer;
}
.list .item:hover{
transform: scale(1.02);
/* box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); */
box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.list .item .desc {
width: 90%;
margin: 16px;
flex-basis: 80%;
background-color: #f5f5f5;
}
.list .item .title {
width: 90%;
margin: auto 16px;
margin-bottom: 16px;
flex-basis: 20%;
background-color: #f5f5f5;
}
.footer{
position: relative;
bottom: 0;
height: 172px;
color: #a5a5a5;
display: flex;
text-align: center;
align-items: center;
justify-content: center;
line-height: 36px;
}
@media (max-width:760px) {
.menubar {
position: absolute;
top: 0;
display: block;
height: 60px;
transition: .321s;
}
.menubar .logo {
position: absolute;
width: 100%;
top: 0;
text-align: center;
}
.menubar .logotitle {
width: 100%;
line-height: 60px;
font-size: 20px;
color: #fff;
}
.menubar ul {
width: 0px;
position: fixed;
height: 100vh;
left: -60px;
display: flex;
flex-direction: column;
background-color: #282c34;
overflow: hidden;
transition: .141s;
z-index: 10;
box-shadow: 6px 0px 10px 0px rgba(0, 0, 0, 0.5);
}
.menubar ul.active {
left: 0;
width: 260px;
transition: .314s;
}
.menubar ul.active::after {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, .3);
z-index: -1;
}
.menubar ul li {
width: 100%;
}
.menubar ul li a {
display: flex;
flex-direction: row;
}
.menubar ul li a .icon {
position: relative;
display: block;
min-width: 60px;
height: 80px;
line-height: 80px;
text-align: center;
font-size: 24px;
display: block;
}
.menubar ul li a .title {
position: relative;
display: block;
line-height: 80px;
text-align: center;
font-size: 24px;
}
.menubar .bar {
position: absolute;
top: 0;
right: 0;
width: 60px;
height: 60px;
line-height: 60px;
cursor: pointer;
}
.menubar .bar::before {
content: '\f0c9';
font-family: fontAwesome;
width: 100%;
height: 100%;
text-align: center;
font-size: 24px;
color: #eee;
}
.menubar .user .username {
display: none;
}
/* .menubar .user{
position: fixed;
top: 60px;
left: 0;
width: 60px;
line-height: 60px;
text-align: center;
z-index: 20;
}
.menubar .user .userimg{
line-height: 60px;
}
.menubar .user .userimg img{
margin: 0;
width: 30px;
height: 30px;
} */
.list .item {
flex-basis: 45%;
margin-top: 12px;
background-color: #fff;
display: flex;
flex-direction: column;
}
}
@media (max-width:480px) {
.list .item {
flex-basis: 100%;
margin-top: 12px;
background-color: #fff;
display: flex;
flex-direction: column;
}
}
Loading...
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
HTML/CSS
1
https://gitee.com/riddder/NavigationBar.git
git@gitee.com:riddder/NavigationBar.git
riddder
NavigationBar
Navigation-bar
master

搜索帮助