博客页面前端主要包括四个简答的页面
1. 登录页面
页面的导航栏: 主要包括博客系统的名字 还有几个按钮,登录页面主要有的是主页和写博客两个按钮
接下来设计的是博客页面的背景 还有登录的框架
这是我设计的,主要采用的标签按钮还有文本框来设计的,再采用css进行修改和完善(css主要是对页面的风格的设计)
下面展示我的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>登录页面</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/login.css">
</head>
<body>
<!--导航栏-->
<div class="nav">
<img src="image/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!--这个spacer 用来占位-->
<span class="spacer"></span>
<!--来几个按钮-->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
</div>
<!---构造页面版心-->
<div class="login-container">
<div class="login-dialog">
<h3>登录</h3>
<div class="row">
<span>用户名</span>
<input type="text" id = "username">
</div>
<div class="row">
<span>密码</span>
<input type="text" id = "password">
</div>
<div class="row">
<input type="button" value="提交" id="submit">
</div>
</div>
</div>
</body>
</html>主要包括两个文本框 一个是用户名 一个是密码框 还有一个登录的按钮
接下来展示的是我的css设计代码
.login-container {
height: calc(100% - 50px);
display: flex;
/*水平居中*/
justify-content: center;
/*垂直居中*/
align-items: center;
}
.login-dialog {
width: 400px;
height: 400px;
background-color: rgba(255,255,255,0.8);
border-radius: 10px;
}
.login-dialog h3{
padding: 50px 0;
/*文字的水平居中*/
text-align: center;
}
.login-dialog .row{
display: flex;
height: 50px;
align-items: center;
justify-content: center;
}
.login-dialog .row span{
width: 100px;
font-weight: 700px;
}
#username,#password{
width: 200px;
height: 40px;
font-size: 24px;
border: none;/*去掉边框 但是鼠标选中的时候还是会有边框*/
outline: none;
padding-left: 5px;/*左侧的内边距*/
border-radius: 10px;/*圆角*/
}
#submit {
width: 300px;
height: 40px;
color: white;
background-color: rgb(0,128,0);
border: none;
border-radius: 10px;
}
#submit:active{
background-color: gray;
}当然根据自己的一个设计风格可以去设计不一样的登陆页面
2. 博客列表页
主要包括两个部分 所以这里采用的是左右分布的格式进行编写的 主要包括的内容都进行了描述,可以在上面的图上看到 当然博客的详情页要缩进两个字符 这里text-indent: 2em;这个css中的函数可以来完成.
展示代码:
首先是列表页的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>博客列表页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_list.css">
</head>
<body>
<!--导航栏-->
<div class="nav">
<img src="image/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!--这个spacer 用来占位-->
<span class="spacer"></span>
<!--来几个按钮-->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
<!--页面主体-->
<div class="container">
<!--左侧个人信息-->
<div class="container-left">
<div class="card">
<img src="image/doge.png" alt="">
<h3>马90</h3>
<a href="#"> github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>3</span>
</div>
</div>
</div>
<!--右侧内容详情-->
<div class="container-right">
<!--用这个表示一篇博客-->
<div class="blog">
<div class="title">这是一篇博客</div>
<div class="date">2022-09-19 12:00:00</div>
<div class="desc">我要好好敲代码 赚钱 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita aspernatur repudiandae aliquam! Maxime quod rerum ad totam voluptate, sapiente aut facere? Recusandae, suscipit ipsum beatae possimus fugiat nulla provident deserunt?</div>
<a href="#">查看全文 >></a>
</div>
<div class="blog">
<div class="title">这是一篇博客</div>
<div class="date">2022-09-19 12:00:00</div>
<div class="desc">我要好好敲代码 赚钱 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita aspernatur repudiandae aliquam! Maxime quod rerum ad totam voluptate, sapiente aut facere? Recusandae, suscipit ipsum beatae possimus fugiat nulla provident deserunt?</div>
<a href="#">查看全文 >></a>
</div>
<div class="blog">
<div class="title">这是一篇博客</div>
<div class="date">2022-09-19 12:00:00</div>
<div class="desc">我要好好敲代码 赚钱 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita aspernatur repudiandae aliquam! Maxime quod rerum ad totam voluptate, sapiente aut facere? Recusandae, suscipit ipsum beatae possimus fugiat nulla provident deserunt?</div>
<a href="#">查看全文 >></a>
</div>
<div class="blog">
<div class="title">这是一篇博客</div>
<div class="date">2022-09-19 12:00:00</div>
<div class="desc">我要好好敲代码 赚钱 Lorem ipsum dolor sit amet consectetur adipisicing elit. Expedita aspernatur repudiandae aliquam! Maxime quod rerum ad totam voluptate, sapiente aut facere? Recusandae, suscipit ipsum beatae possimus fugiat nulla provident deserunt?</div>
<a href="#">查看全文 >></a>
</div>
</div>
</div>
</body>
</html>接下来展示的是css设计的代码 我的设计不是很好当然你可以更加好的去设计
.blog{
width: 100%;
padding: 20px;
}
.blog .title{
font-size: 20px;
font-weight: 700;
text-align: center;
padding: 10px 0;
}
.blog .date{
color: rgb(0, 128, 0);
text-align: center;
padding: 5px;
}
.blog .desc{
text-indent: 2em;/*2em 就是两个字符*/
}
.blog a{
/*a标签是行内元素 不方便设置尺寸 编程块级元素*/
display: block;
width: 140px;
height: 40px;
margin: 10px auto;
line-height: 40px;
border: 2px black solid;
text-align: center;
color: black;
text-decoration-line: none;
/*给按钮的颜色变化来个小过度*/
transition: all 0.5s;
}
/* 鼠标放上去之后 有颜色改变的效果*/
.blog a:hover{
background-color: #333;
color: #fff;
}3.博客编辑页
这里因为有上下两个部分 一个是标题文章 一个是编辑器 所以采用的上下结构的 那么在这里我直接是引用了Markdown编辑器 当然这里是现成的编辑器我是直接采用的
那就废话不多说直接展示代码
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>博客编辑页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_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/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!-- 这个 spacer 用来占位 -->
<span class="spacer"></span>
<!-- 来几个按钮 -->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
<div class="blog-edit-container">
<!-- 标题编辑区 -->
<div class="title">
<input type="text" id="title" placeholder="请输入文章标题">
<input type="button" id="submit" value="发布文章">
</div>
<!-- 博客编辑器标签 -->
<div id="editor">
</div>
</div>
<script>
// 初始化编辑器
var editor = editormd("editor", {
//editormd函数 两个参数 第一个参数表示的是和哪个html标签对应的 对应到的那个html标签的id
//第二个参数是一个js对象 里面的是针对编辑器的配置信息
// 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉.
width: "100%",
// 设定编辑器高度
height: "calc(100% - 50px)",
// 编辑器中的初始内容
markdown: "# 在这里写下一篇博客",
// 指定 editor.md 依赖的插件路径
path: "editor.md/lib/"
});
</script>
</body>
</html>
css设计代码:
.blog-edit-container {
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
}
.title {
height: 50px;
display: flex;
justify-content: space-between;
align-items: center;
}
#title {
height: 40px;
width: 895px;
font-size: 24px;
padding-left: 5px;
border: none;/*去掉黑框 但是鼠标点击还是有黑框*/
outline: none;/*鼠标点击 也没有黑框*/
border-radius: 10px;/*圆角边*/
background-color: rgba(255,255, 255, 0.8);
}
#submit {
height: 40px;
width: 100px;
color: white;
background-color: orange;
border: none;
border-radius: 10px;
}
#submit:active{
background-color: grey;
}
#editor{
border-radius: 10px;
opacity: 80%;
}
这里要注意的是 !!!!!!!!!!
4. 博客详情页
跟博客链表页没有很大的区别 但是此时你要考虑的一点是要是你的博客文档过于长的时候,他会显示在外边框 所以此时你要在你设计的页面的大小的情况下 如果超出了这个范围 就给他添加滚动条就行了
展示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>博客详情页</title>
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/blog_detail.css">
</head>
<body>
<!--导航栏-->
<div class="nav">
<img src="image/logo2.jpg" alt="">
<span class="title">我的博客系统</span>
<!--这个spacer 用来占位-->
<span class="spacer"></span>
<!--来几个按钮-->
<a href="blog_list.html">主页</a>
<a href="blog_edit.html">写博客</a>
<a href="#">注销</a>
</div>
<!--页面主体-->
<div class="container">
<!--左侧个人信息-->
<div class="container-left">
<div class="card">
<img src="image/doge.png" alt="">
<h3>马90</h3>
<a href="#"> github 地址</a>
<div class="counter">
<span>文章</span>
<span>分类</span>
</div>
<div class="counter">
<span>2</span>
<span>3</span>
</div>
</div>
</div>
<!-- 右侧内容详情 -->
<div class="container-right">
<!-- 这里的div放的是博客的内容 -->
<div class="blog-content">
<!-- 博客标题 -->
<h3>这是我的第一篇博客</h3>
<!-- 博客时间 -->
<div class="date"> 2022-09-02 12:00:00 </div>
<!-- 博客正文 -->
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, aspernatur sint, perferendis aliquid esse earum nulla exercitationem vel fuga aut quia debitis magni quidem officiis labore quos, eveniet in cumque.</p>
</div>
</div>
</div>
</div>
</body>
</html>接下来展示我设计的风格的css代码 可能不好看
.blog-content{
padding: 30px;/*内边距为30像素*/
}
.blog-content h3{
text-align: center;
padding: 20px;
}
.blog-content .date{
text-align: center;
color: rgb(0, 128,0);
padding: 10px;
}
.blog-content p{
text-indent: 2em;
}忘了一个整体的页面设计的一个css代码了
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,body{
height: 100%;/*高度100%就是和父元素一样高 html的父元素就是浏览器窗口页面 body的父元素就是html*/
background-image: url(../image/cat.jpg);
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}
.nav{
width: 100%;
height: 50px;
background-color: rgba(50, 50, 50,0.4);
color: rgb(255, 255, 255);
display: flex;
align-items: center;
}
.nav img{
width: 40px;
height: 40px;
border-radius: 50%;
margin-left: 30px;
margin-right: 20px;
}
.nav .spacer{
width: 70%;
}
.nav a{
color: rgb(255, 255, 255);
text-decoration: none;
padding: 0 10px;
}
.container{
width: 1000px;
height: calc(100% - 50px);
margin: 0 auto;
display: flex;
}
.container-left{
height: 100%;
width: 200px;
}
.container-right{
height: 100%;
width: 800px;
background-color:rgba(255, 255, 255,0.8);
border-radius: 10px;
/*over溢出 如果*/
/*auto 表示如果内容多自动添加滚动条 如果内容少 就不添加滚动条*/
overflow: auto;
}
.card{
background-color: rgba(255, 255, 255,0.8);
border-radius: 10px;
padding: 30px;
}
/*头像*/
.card img{
width: 140px;
height: 140px;
border-radius: 70px;
}
/*用户名*/
.card h3{
text-align: center;
padding: 10px;
}
/*github 链接*/
.card a{
/*a标签是一个行内元素 改成块级元素*/
display: block;
text-align: center;
text-decoration: none;
padding: 10px;
color: #aaa;
}
.card .counter{
display: flex;
padding: 5px;
justify-content: space-around;
}这是整个博客页面的背景和设计 在每个页面只要调用这个就行了..
本次的代码我都上传☞Java代码: 用来存放我的Java代码 - Gitee.com
想要来看看的 可以自己到码云自取!
4293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
