- 使用 Spring Initializr 创建 Spring Boot 应用程序
- 在Spring Boot中配置Cassandra
- 在 Spring Boot 上配置 Tomcat 连接池
- 将Camel消息路由到嵌入WildFly的Artemis上
本博客分为四个页面
可以看出文章界面中都有共同的导航栏.
导航栏的前端代码:
<div class="nav">
<img src="../image/头像.jpg" alt="头像">
<span class="title">我的博客系统</span>
<a href="home.html">主页</a>
<a href="edit.html">创作</a>
<a href="login.html">注销</a>
</div>
common.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
/* background-image: url(../image/1.jpg); */
}
html,body{
height: 100%;
background-image: url(../image/1.jpg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.nav {
width: 100%;
height: 50px;
background-color: rgba(54, 54, 54,0.36);
display: flex;
justify-content: left;
align-items: center;
}
.nav img {
width: 40px;
height: 40px;
margin: 0 10px 0 20px;
border-radius: 50%;
}
.nav .title{
width:83%;
color:white;
}
.nav a{
width: 50px;
color:white;
text-decoration: none;
}
.parent{
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.parent .left{
height: 100%;
width: 200px;
}
.parent .right {
height: 100%;
width: 795px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
}
.left .card{
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
padding: 30px;
}
.left .card img {
width: 140px;
height: 140px;
border-radius: 50%;
padding: 10px;
}
.left .card .name{
display: block;
font-size: 30px;
font-weight: 700;
text-align: center;
padding: 5px;
}
.left .card a{
display: block;
width: 140px;
text-decoration: none;
color: gray;
text-align: center;
padding: 5px;
}
.left .card .one {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px;
}
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/list.css">
<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="nav">
<img src="../image/头像.jpg" alt="头像">
<span class="title">我的博客系统</span>
<a href="home.html">主页</a>
<a href="edit.html">创作</a>
<a href="login.html">注销</a>
</div>
<div class="parent">
<div class="left">
<div class="card">
<img src="../image/头像.jpg">
<span class="name">蜡笔小新</span>
<a href="#">github 地址</a>
<div class='one'>
<span>文章</span>
<span>分类</span>
</div>
<div class='one'>
<span>2</span>
<span>1</span>
</div>
</div>
</div>
<div class="right">
<div class="article">
<h2 class="title">我的第一篇博客</h2>
<span class="date">2022-4-17</span>
<div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
<a href="art.html" class="more">查看全文>></a>
</div>
<div class="article">
<h2 class="title">我的第二篇博客</h2>
<span class="date">2022-4-18</span>
<div class="desc">昨天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore similique, nobis labore, officiis harum vel amet iste enim, cupiditate eveniet dolores optio eligendi in dicta veniam obcaecati rerum voluptas ipsum.</div>
<a href="art.html" class="more">查看全文>></a>
</div>
</div>
</div>
</body>
</html>
list.css
.article .title{
text-align: center;
margin: 10px;
}
.article .date{
display: block;
color:green;
text-decoration: none;
text-align: center;
margin: 5px;
}
.article .desc {
text-indent: 2em;
margin: 5px;
}
.article .more{
display: block;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
margin: 0 auto;
text-decoration: none;
border: 1px solid black;
color:black;
}
.article .more:active{
background-color: black;
color:white;
}
art.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/moreList.css">
<link rel="stylesheet" href="../css/common.css">
</head>
<body>
<div class="nav">
<img src="../image/头像.jpg" alt="头像">
<span class="title">我的博客系统</span>
<a href="home.html">主页</a>
<a href="edit.html">创作</a>
<a href="login.html">注销</a>
</div>
<div class="parent">
<div class="left">
<div class="card">
<img src="../image/头像.jpg">
<span class="name">蜡笔小新</span>
<a href="#">github 地址</a>
<div class='one'>
<span>文章</span>
<span>分类</span>
</div>
<div class='one'>
<span>2</span>
<span>1</span>
</div>
</div>
</div>
<div class="right">
<div class="article">
<h2 class="title">我的第一篇博客</h2>
<span class="date">2022-4-17</span>
<div class="desc">今天开始我要认真写博客 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque eveniet alias aperiam explicabo rerum odit, voluptatibus nesciunt ducimus nihil officia excepturi possimus, quos incidunt est quidem ad iure dolor adipisci.
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto laborum nemo quasi, rem, ab totam temporibus sapiente commodi beatae deleniti cum? Quos, ipsam dolores sit minus voluptatem repellendus maiores est?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint amet nihil odit obcaecati aspernatur, totam quas dolores reprehenderit quam officiis tempore explicabo laboriosam aut sit sunt, possimus culpa expedita quis?</p>
</div>
</div>
</div>
</div>
</body>
</html>
moreList.css
.article .title{
text-align: center;
margin: 10px;
}
.article .date{
display: block;
color:green;
text-decoration: none;
text-align: center;
margin: 5px;
}
.article .desc {
text-indent: 2em;
margin: 5px;
}
.article p{
margin-top: 15px;
}
login.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/login.css">
</head>
<body>
<div class="nav">
<img src="../image/头像.jpg" alt="头像">
<span class="title">我的博客系统</span>
<a href="home.html">主页</a>
<a href="edit.html">创作</a>
<a href="login.html" style="display: none;">注销</a>
</div>
<div id="one">
<div class="login">
<div class="text">登录</div>
<div class="one"><span class="name">用户名</span><input type="text" class="user"></div>
<div class="one"><span class="name">密码</span><input type="password" class="password"></div>
<div class="submit"><button>提交</button></div>
</div>
</div>
</body>
</html>
login.css
#one {
height: calc(100% - 50px);
display: flex;
justify-content: center;
align-items: center;
}
.login {
background-color: rgba(255,255,255,0.8);
width: 400px;
padding: 25px;
border-radius: 10px;
padding-bottom: 50px;
}
.login .text {
font-size: 25px;
font-weight: 400;
text-align: center;
margin: 25px;
}
.login .one{
display: flex;
justify-content: center;
align-items: center;
}
.login .one .name {
width: 100px;
height: 50px;
line-height: 50px;
font-weight: 600;
}
.login .one input{
width: 200px;
height: 30px;
border-radius: 5px;
padding: 3px;
border:none;
}
.login .submit button{
display: block;
width: 300px;
height: 40px;
background-color: rgb(41, 128, 0);
margin: 0 auto;
color: white;
border: none;
border-radius: 5px;
}
.login .submit button:hover{
background-color: rgba(41,128,0,0.8);
}
.login .submit button:active{
background-color: white;
color:rgb(41, 128, 0);
}
这里我们采用的是别人实现好的markdown编辑器
https://pandao.github.io/editor.md/
下载之后放到项目目录里
在edit.html中映入依赖
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="../editor.md/css/editormd.min.css" />
<script src="../js/jquery.min.js"></script>
<script src="../editor.md/lib/marked.min.js"></script>
<script src="../editor.md/lib/prettify.min.js"></script>
<script src="../editor.md/editormd.js"></script>
edit.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/common.css">
<link rel="stylesheet" href="../css/edit.css">
<!-- 引入 editor.md 的依赖 -->
<link rel="stylesheet" href="../editor.md/css/editormd.min.css" />
<script src="../js/jquery.min.js"></script>
<script src="../editor.md/lib/marked.min.js"></script>
<script src="../editor.md/lib/prettify.min.js"></script>
<script src="../editor.md/editormd.js"></script>
</head>
<body>
<div class="nav">
<img src="../image/头像.jpg" alt="头像">
<span class="title">我的博客系统</span>
<a href="home.html">主页</a>
<a href="edit.html">创作</a>
<a href="login.html">注销</a>
</div>
<div class="leader">
<div class="empOne">
<input type="text" class="title" value="在这里写下文章标题">
<input type="button" value="发布文章" class="publish">
</div>
<div id="editor">
</div>
</div>
<script>
// 初始化编辑器
var editor = editormd("editor", {
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 高度 100% 意思是和父元素一样高. 要在父元素的基础上去掉标题编辑区的高度
height: "calc(100% - 60px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "../editor.md/lib/"
});
</script>
</body>
</html>
edit.css
.leader{
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
.leader .empOne{
display: flex;
justify-content: center;
align-items: center;
}
.leader .empOne .title{
width: 800px;
height: 40px;
border-radius: 8px;
outline: none;
border:1px solid rgba(0,0,0,0.2);
padding-left: 5px;
background-color: rgba(255,255,255,0.8);
}
.leader .empOne .publish {
margin: 10px;
width: 180px;
height: 40px;
border-radius: 8px;
border: none;
color:white;
background-color: rgb(255,127,39);
}
.leader .empOne .publish:hover{
background-color: rgb(255,127,39,0.6);
}
.leader .empOne .publish:active{
background-color: #fff;
}
#editor{
border-radius: 8px;
opacity: 80%;
}
这是用来设置编辑页面的属性
我正在使用 NetBeans 开发 Java 中的 WebService,并使用 gradle 作为依赖管理。 我找到了this article关于使用 gradle 开发 Web 项目。它使用 Gr
我正在将旧项目从 ant 迁移到 gradle(以使用其依赖项管理和构建功能),并且在生成 时遇到问题>eclipse 项目。今天的大问题是因为该项目有一些子项目被拆分成 war 和 jar 包部署到
我已经为这个错误苦苦挣扎了很长时间。如果有帮助的话,我会提供一些问题的快照。请指导我该怎么办????在我看来,它看起来一团糟。 *** glibc detected *** /home/shivam/
我在 Ubuntu 12.10 上运行 NetBeans 7.3。我正在学习 Java Web 开发类(class),因此我有一个名为 jsage8 的项目,其中包含我为该类(class)所做的工作。
我想知道 Codeplex、GitHub 等中是否有任何突出的项目是 C# 和 ASP.NET,甚至只是 C# API 与功能测试 (NUnit) 和模拟(RhinoMocks、NMock 等)。 重
我创建了一个 Maven 项目,包装类型为“jar”,名为“Y”我已经完成了“Maven 安装”,并且可以在我的本地存储库中找到它.. 然后,我创建了另一个项目,包装类型为“war”,称为“X”。在这
我一直在关注the instructions用于将 facebook SDK 集成到我的应用程序中。除了“helloFacebookSample”之外,我已经成功地编译并运行了所有给定的示例应用程序。
我想知道,为什么我们(Java 社区)需要 Apache Harmony 项目,而已经有了 OpenJDK 项目。两者不是都是在开源许可下发布的吗? 最佳答案 事实恰恰相反。 Harmony 的成立是
我正在尝试使用 Jsoup HTML Parser 从网站获取缩略图 URL我需要提取所有以 60x60.jpg(或 png)结尾的 URL(所有缩略图 URL 都以此 URL 结尾) 问题是我让它在
我无法构建 gradle 项目,即使我编辑 gradle 属性,我也会收到以下错误: Error:(22, 1) A problem occurred evaluating root project
我有这个代码: var NToDel:NSArray = [] var addInNToDelArray = "Test1 \ Test2" 如何在 NToDel:NSArray 中添加 addInN
如何在单击显示更多(按钮)后将主题列表限制为 5 个(项目)。 还有 3(项目),依此类推到列表末尾,然后它会显示显示更少(按钮)。 例如:在 Udemy 过滤器选项中,当您点击查看更多按钮时,它仅显
如何将现有的 Flutter 项目导入为 gradle 项目? “导入项目”向导要求 Gradle 主路径。 我有 gradle,安装在我的系统中。但是这里需要设置什么(哪条路径)。 这是我正在尝试的
我有一个关于 Bitbucket 的项目。只有源被提交。为了将项目检索到新机器上,我在 IntelliJ 中使用了 Version Control > Checkout from Ve
所以,我想更改我公司的一个项目,以使用一些与 IDE 无关的设置。我在使用 Tomcat 设置 Java 应用程序方面有非常少的经验(我几乎不记得它是如何工作的)。 因此,为了帮助制作独立于 IDE
我有 2 个独立的项目,一个在 Cocos2dx v3.6 中,一个在 Swift 中。我想从 Swift 项目开始游戏。我该怎么做? 我已经将整个 cocos2dx 项目复制到我的 Swift 项目
Cordova 绝对是新手。这些是我完成的步骤: checkout 现有项目 运行cordova build ios 以上生成此构建错误: (node:10242) UnhandledPromiseR
我正在使用 JQuery 隐藏/显示 li。我的要求是,当我点击任何 li 时,它应该显示但隐藏所有其他 li 项目。当我将鼠标悬停在文本上时 'show all list item but don
我想将我所有的java 项目(223 个项目)迁移到gradle 项目。我正在使用由 SpringSource STS 团队开发的 Gradle Eclipse 插件。 目前,我所有的 java 项目
我下载this Eclipse Luna ,对于 Java EE 开发人员,如描述中所见,它支持 Web 应用程序。我找不到 file -> new -> other -> web projects
我是一名优秀的程序员,十分优秀!