deepseek生成的一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Dashboard</title>
<!-- Bootstrap CSS -->
<link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://icons.getbootstrap.com/assets/font/bootstrap-icons.min.css">
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.header, .footer {
background-color: #343a40;
color: white;
padding: 1rem;
position: fixed;
width: 100%;
}
.header {
top: 0;
height: 64px;
overflow: hidden;
}
.footer {
bottom: 0;
}
.main-content {
flex: 1;
display: flex;
padding-top: 64px; /* Height of the header */
padding-bottom: 56px; /* Height of the footer */
}
.sidebar {
width: 250px;
background-color: #f8f9fa;
padding: 1rem;
overflow-y: auto;
position: fixed;
height: calc(100vh - 112px); /* Height of the header and footer */
}
.sidebar .dropdown-menu {
width: 100%;
}
.content {
flex: 1;
margin-left: 250px;
padding: 1rem;
overflow-y: auto;
}
/* 滚动条整体样式 */
.sidebar::-webkit-scrollbar {
width: 5px;
height: 10px;
background-color: #f5f5f5;
}
/* 滚动条thumb(滑块)样式 */
.sidebar::-webkit-scrollbar-thumb {
width: 5px;
height: 10px;
background-color: #9a9a9a;
}
/* 滚动条hover状态下thumb(滑块)样式 */
.sidebar::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 滚动条上下箭头样式 */
.sidebar::-webkit-scrollbar-button {
background-color: #ccc;
display: none;
}
/* 滚动条左右箭头样式 */
.sidebar::-webkit-scrollbar-button:start:decrement, .sidebar::-webkit-scrollbar-add-button {
display: none;
}
.sidebar::-webkit-scrollbar-button:end:increment, .sidebar::-webkit-scrollbar-sub-button {
display: none;
}
</style>
</head>
<body>
<header class="header">
<h1>Admin Dashboard</h1>
</header>
<div class="main-content">
<nav class="sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" aria-controls="submenu1"><i class="bi-arrow-down-short fas
fa-chevron-down"></i>一级菜单 1</a>
<div id="submenu1" class="collapse">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">二级菜单 1-1</a></li>
<li class="nav-item"><a class="nav-link" href="#">二级菜单 1-2</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu2" aria-expanded="false" aria-controls="submenu2"><i class="bi-arrow-down-short fas
fa-chevron-down" style="font-size: 1rem; color: cornflowerblue;"></i>一级菜单 2</a>
<div id="submenu2" class="collapse">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">二级菜单 2-1</a></li>
<li class="nav-item"><a class="nav-link" href="#">二级菜单 2-2</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<main class="content">
<!-- Content goes here -->
<h1>欢迎使用!</h1>
<p>这是一个示例内容。</p>
</main>
</div>
<footer class="footer">
<p>© 2023 Admin Dashboard. All rights reserved.</p>
</footer>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.js" crossorigin="anonymous"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.sidebar a').on('click', function(e) {
e.preventDefault();
var $this = $(this);
if ($this.children('ul').length && !$this.hasClass('expanded')) {
$this.addClass('expanded');
$this.siblings('.collapse').removeClass('show');
$this.next().addClass('show');
} else {
$this.toggleClass('collapsed expanded');
if ($this.hasClass('expanded')) {
$this.find('i.bi-arrow-down-short').css({transform: 'rotate(90deg)'});
} else {
$this.find('i.bi-arrow-down-short').css({transform: 'rotate(0deg)'});
}
}
});
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<!-- Bootstrap CSS -->
<link href="https://getbootstrap.com/docs/4.5/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- bootstrap-icon -->
<link rel="stylesheet" href="https://icons.getbootstrap.com/assets/font/bootstrap-icons.min.css">
<!-- jquer-icon -->
<link rel="stylesheet" href="icon.css">
<!-- https://fontawesome.com/v4/icons/ -->
<link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<style>
body {
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.header, .footer {
background-color: #343a40;
color: white;
position: fixed;
width: 100%;
}
.header {
top: 0;
height: 64px;
overflow: hidden;
padding: 1rem;
}
.footer {
bottom: 0;
padding: 0 1rem 0 1rem;
}
.main-content {
flex: 1;
display: flex;
padding-top: 64px; /* Height of the header */
padding-bottom: 56px; /* Height of the footer */
}
.content {
flex: 1;
margin-left: 250px;
padding: 1rem;
overflow-y: auto;
}
.sidebar {
width: 250px;
background-color: #f8f9fa;
overflow-y: auto;
position: fixed;
left: 0;
top: 64px;
z-index: 1000;
height: calc(100vh - 112px); /* Height of the header and footer */
}
.sidebar .dropdown-menu {
width: 100%;
}
.sidebar .nav .submenu{
margin-left: 20px;
}
.sidebar>ul>li > a:hover {
background-color: #ccc;
}
.sidebar a {
width: 100%;
text-align: left;
display: inline-flexbox;
vertical-align: middle;
}
.sidebar a > i.si {
margin-right: 5px;
}
.sidebar a > i.fa {
font-size:1.2rem;
float: right;
}
.sidebar a > i::after {
clear:both;
}
/* 滚动条整体样式 */
.sidebar::-webkit-scrollbar {
width: 5px;
height: 10px;
background-color: #f5f5f5;
}
/* 滚动条thumb(滑块)样式 */
.sidebar::-webkit-scrollbar-thumb {
width: 5px;
height: 10px;
background-color: #9a9a9a;
}
/* 滚动条hover状态下thumb(滑块)样式 */
.sidebar::-webkit-scrollbar-thumb:hover {
background-color: #555;
}
/* 滚动条上下箭头样式 */
.sidebar::-webkit-scrollbar-button {
background-color: #ccc;
display: none;
}
/* 滚动条左右箭头样式 */
.sidebar::-webkit-scrollbar-button:start:decrement, .sidebar::-webkit-scrollbar-add-button {
display: none;
}
.sidebar::-webkit-scrollbar-button:end:increment, .sidebar::-webkit-scrollbar-sub-button {
display: none;
}
/* 新增移动端样式 */
.menu-toggle {
cursor: pointer;
font-size: 1.5rem;
margin-right: 1rem;
}
@media (max-width: 768px) {
.menu-toggle {
display: inline-block;
}
.sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.sidebar.hidden {
transform: translateX(0);
transition: transform 0.3s ease;
}
}
@media (min-width: 769px) {
.sidebar {
transform: translateX(0);
transition: transform 0.3s ease;
}
.sidebar.hidden {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
}
</style>
</head>
<body>
<header class="header">
<h1></h1>
<div><i class="fa fa-align-justify menu-toggle" aria-hidden="true" ></i></div>
</header>
<div class="main-content">
<nav class="sidebar">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu1" aria-expanded="false" aria-controls="submenu1">
<i class="si icon-settings"></i>一级菜单 1<i class="fa fa-angle-left" aria-hidden="true"></i></a>
<div id="submenu1" class="collapse submenu">
<ul class="nav flex-column secondmenu">
<li class="nav-item"><a class="nav-link" href="#">二级菜单 1-1</a></li>
<li class="nav-item"><a class="nav-link" href="#">二级菜单 1-2</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu2" aria-expanded="false" aria-controls="submenu2">
<i class="si bi-bag"></i>一级菜单 2<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<div id="submenu2" class="collapse submenu">
<ul class="nav flex-column menu2">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu3" aria-expanded="false" aria-controls="submenu3" >
<i class="fa fa-angle-left" aria-hidden="true"></i>二级菜单 2-1
</a>
<div id="submenu3" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">三级菜单 3-1</a></li>
<li class="nav-item"><a class="nav-link" href="#">三级菜单 3-2</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">二级菜单 2-2</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu4" aria-expanded="false" aria-controls="submenu4">
<i class="si bi-bank2"></i>一级菜单 2<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<div id="submenu4" class="collapse submenu">
<ul class="nav flex-column menu2">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu5" aria-expanded="false" aria-controls="submenu5" >
<i class="fa fa-angle-left" aria-hidden="true"></i>二级菜单 2-1
</a>
<div id="submenu5" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">三级菜单 3-1</a></li>
<li class="nav-item"><a class="nav-link" href="#">三级菜单 3-2</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">二级菜单 2-2</a></li>
</ul>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu6" aria-expanded="false" aria-controls="submenu6">
<i class="si bi-cart-dash"></i>一级菜单 2<i class="fa fa-angle-left" aria-hidden="true"></i>
</a>
<div id="submenu6" class="collapse submenu">
<ul class="nav flex-column menu2">
<li class="nav-item">
<a class="nav-link" href="#" data-toggle="collapse" data-target="#submenu7" aria-expanded="false" aria-controls="submenu7" >
<i class="fa fa-angle-left" aria-hidden="true"></i>二级菜单 2-1
</a>
<div id="submenu7" class="collapse submenu">
<ul class="nav flex-column">
<li class="nav-item"><a class="nav-link" href="#">三级菜单 3-1</a></li>
<li class="nav-item"><a class="nav-link" href="#">三级菜单 3-2</a></li>
</ul>
</div>
</li>
<li class="nav-item"><a class="nav-link" href="#">二级菜单 2-2</a></li>
</ul>
</div>
</li>
</ul>
</nav>
<main class="content">
<!-- Content goes here -->
<h1></h1>
<p></p>
</main>
</div>
<footer class="footer">
<p>© Dashboard. All rights reserved.</p>
</footer>
<!-- Bootstrap JS and dependencies -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@popperjs/core@2.11.8/dist/umd/popper.js" crossorigin="anonymous"></script>
<script src="https://getbootstrap.com/docs/4.5/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
<script>
$(document).ready(function() {
$('.menu-toggle').on('click', function() {
$('.sidebar').toggleClass('hidden');
});
$('.sidebar a').on('click', function(e) {
e.preventDefault();
var $this = $(this);
if ($this.children('ul').length && !$this.hasClass('expanded')) {
$this.addClass('expanded');
$this.siblings('.collapse').removeClass('show');
$this.next().addClass('show');
} else {
$this.toggleClass('collapsed expanded');
if ($this.hasClass('expanded')) {
$this.find('i.fa-angle-left').css({transform: 'rotate(-90deg)'});
} else {
$this.find('i.fa-angle-left').css({transform: 'rotate(0deg)'});
}
}
});
});
</script>
</body>
</html>
转载请注明：SuperIT » deepseek生成的一个页面
