先根据国际惯例整理。前面的div中的style,我们放到独立的css文件中。
- static目录中创建css为名的文件夹
- css目录中创建style.css文件
写一个wrapper名字的类,用来做我们的body下根目录div的css类。如下:
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
打开adminEntry.ftl文件,把改动第一个div成如下:
<div class="wrapper">
这个文件中的</head>一行前,引入刚写的css文件:
<link href="css/style.css" rel="stylesheet">
所以,adminEntry.ftl的整体内容会变成如下:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台首页</title>
<!-- JQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.4/umd/popper.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/solid.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/fontawesome.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div>
<h3>Personal Blog</h3>
</div>
<ul>
<li>
<a href="#" data-toggle="collapse" aria-expanded="false">Home</a>
<ul>
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Content -->
<div id="content">
<p>hello world</p>
</div>
</div>
</body>
</html>
调试一下,看看自己的这个页面资源有没有问题,显示有没有问题。如果有问题,看一下拼写错误,路径错误,解决掉。这里只是做了一些整理,新增的style.css,会用来放置我们画面的很多style,而不是直接通过html元素的style来写。
现在来完成细节,主要是定制css,这里我就直接给出css文件内容,你只要覆盖目前的style.css内容即可。
@import "https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700";
body {
font-family: 'Poppins', sans-serif;
background: #fafafa;
}
p {
font-family: 'Poppins', sans-serif;
font-size: 1.1em;
font-weight: 300;
line-height: 1.7em;
color: #999;
}
a,
a:hover,
a:focus {
color: inherit;
text-decoration: none;
transition: all 0.3s;
}
.navbar {
padding: 15px 10px;
background: #fff;
border: none;
border-radius: 0;
margin-bottom: 40px;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.navbar-btn {
box-shadow: none;
outline: none !important;
border: none;
}
.line {
width: 100%;
height: 1px;
border-bottom: 1px dashed #ddd;
margin: 40px 0;
}
.wrapper {
display: flex;
width: 100%;
align-items: stretch;
}
#sidebar {
min-width: 250px;
max-width: 250px;
background: #7386D5;
color: #fff;
transition: all 0.3s;
}
#sidebar.active {
margin-left: -250px;
}
#sidebar .sidebar-header {
padding: 20px;
background: #6d7fcc;
}
#sidebar ul.components {
padding: 20px 0;
border-bottom: 1px solid #47748b;
}
#sidebar ul p {
color: #fff;
padding: 10px;
}
#sidebar ul li a {
padding: 10px;
font-size: 1.1em;
display: block;
}
#sidebar ul li a:hover {
color: #7386D5;
background: #fff;
}
#sidebar ul li.active>a,
a[aria-expanded="true"] {
color: #fff;
background: #6d7fcc;
}
a[data-toggle="collapse"] {
position: relative;
}
.dropdown-toggle::after {
display: block;
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
ul ul a {
font-size: 0.9em !important;
padding-left: 30px !important;
background: #6d7fcc;
}
ul.CTAs {
padding: 20px;
}
ul.CTAs a {
text-align: center;
font-size: 0.9em !important;
display: block;
border-radius: 5px;
margin-bottom: 5px;
}
a.download {
background: #fff;
color: #7386D5;
}
a.article,
a.article:hover {
background: #6d7fcc !important;
color: #fff !important;
}
#content {
width: 100%;
padding: 20px;
min-height: 100vh;
transition: all 0.3s;
}
@media (max-width: 768px) {
#sidebar {
margin-left: -250px;
}
#sidebar.active {
margin-left: 0;
}
#sidebarCollapse span {
display: none;
}
}
有了该css内容,我们现在调试能出这样的画面:
还是有点丑陋,别急!相关的style我们已经在style.css中了。只是我们还没有给对应的html元素附上该style。这一步是要改动adminEntry.ftl,改动清单如下(不多,所以以清单列出):
- 唯一的<h3>元素的父节点,那个<div>,加class="sidebar-header"
- 唯一的<ul>元素,加class="list-unstyled components"
- 这个<ul>紧跟的<li>,加class="active"
- 这个<li>紧跟的<a>,href属性改成href="#homeSubmenu",同时加class="dropdown-toggle"
- 这个<a>紧跟的<ul>,加class="collapse list-unstyled" 和 id="homeSubmenu"
改动后的所有代码:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>后台首页</title>
<!-- JQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper -->
<script src="https://cdn.bootcdn.net/ajax/libs/popper.js/2.4.4/umd/popper.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- Font Awesome -->
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/solid.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.13.0/js/fontawesome.js"></script>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Personal Blog</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
<a href="#">Link 1</a>
</li>
<li>
<a href="#">Link 2</a>
</li>
<li>
<a href="#">Link 3</a>
</li>
</ul>
</li>
</ul>
</nav>
<!-- Content -->
<div id="content">
<p>hello world</p>
</div>
</div>
</body>
</html>
调试出的画面:
前面说过,侧边栏能够隐藏。所以,我们在内容部分添加一个按钮,再给按钮特定的功能(javascript),以下:
内容部分加入按钮
在<p>hello world</p>前面加入:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<button type="button" id="sidebarCollapse" class="btn btn-info">
<i class="fas fa-align-left"></i>
<span>Toggle Sidebar</span>
</button>
</div>
</nav>
在</body>前加入:
<script type="text/javascript">
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
</script>
调试起来,画面如下:
点击加入的按钮,侧边栏就会动画形式移出和移入。完美!
下一节我们再说明写的这些代码做的事情。现在,休息!