Skip to content

H
HtmlDemo

yuenblue / HtmlDemo

通知 1
Star 0
Fork 0
H
HtmlDemo

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 6aa29efb 编写于 作者: Y yuenblue
浏览文件
操作

Merge branch 'master' of gitcode.net:yuencczzy/htmldemo

上级 08ecfc3b e12424be
隐藏空白更改
内联 并排
Showing with 161 addition and 1 deletion
demoadmin/index/index.css 0 → 100644
浏览文件 @ 6aa29efb
@charset "utf-8";
/* CSS Document */
#nav-fluid {
position: sticky;
top: 0px;
z-index: 3;
}
#nav-wraper {
height: 50px;
}
#slider-wraper {
flex-basis: 15rem;
flex-grow: 0;
background-color: aquamarine;
height: calc(100vh - 50px);
position: sticky;
top: 50px;
overflow-y: auto;
z-index: 2;
visibility: visible;
display: block;
transform: none;
border-right:none;
}
@media screen and (max-width:992px) {
#slider-wraper {
position: fixed;
top: 0px;
visibility: hidden;
z-index: var(--bs-offcanvas-zindex);
height: auto;
/* transition: var(--bs-offcanvas-transition);*/
transition: transform 0.15s ease-in-out;
transform: translateX(-100%);
border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
}
.offcanvas.show {
visibility: visible !important;
transform: translateX(0%) !important;
}
}
\ No newline at end of file
demoadmin/index/index.html 0 → 100644
浏览文件 @ 6aa29efb
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>index</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="index.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="w-100" id="container-wraper">
<div class="w-100 bg-primary text-white" id="nav-fluid">
<div class="container">
<div class="row align-items-center" id="nav-wraper">
<div class="col" id="logo-wraper">此处显示 logo 的内容</div>
<div class="col">
<div class="row">
<div class="col" id="search-wraper">此处显示 search 的内容</div>
<div class="col" id="userinfo-wraper">userinfo<a data-bs-toggle="offcanvas" data-bs-target="#slider-wraper" aria-controls="offcanvasExample"> menu </a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container" >
<div class="row" id="middle-wraper">
<div class="col offcanvas offcanvas-start" id="slider-wraper">
aaa
</div>
<div class="col" id="content-wraper">
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
<p>这是布局 P 标签的内容</p>
</div>
</div>
</div>
<div class="container">
<div class="row" id="footer-wraper">
<div class="col">此处显示 class "row" id "nav-wraper" 的内容</div>
</div>
</div>
</div>
</body>
</html>
demoadmin/layout/layout-mobile.html
浏览文件 @ 6aa29efb
......@@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<title>layout mobile</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="layout-mobile.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或