博客管理系统(前端页面设计)

这篇具有很好参考价值的文章主要介绍了博客管理系统(前端页面设计)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

博客管理系统(前端页面设计)

一、预期效果

博客登录页:
博客管理系统(前端页面设计)
博客列表页:
博客管理系统(前端页面设计)
博客详情页:
博客管理系统(前端页面设计)
博客编辑页:
博客管理系统(前端页面设计)
目录结构:
博客管理系统(前端页面设计)
大家需要注意,我们下述代码的所有路径都是依赖该目录结构的,如果大家的目录结构不一致就需要改代码中的路径
博客管理系统(前端页面设计)
博客管理系统(前端页面设计)
博客管理系统(前端页面设计)

二、博客列表页

博客管理系统(前端页面设计)
我们可以发现导航栏每个页面都有,所以我们将导航栏的样式单独放在一个common.css,然后每个页面直接引用即可

    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/blog5.jpg" alt="">
        <span class = "title">博客管理系统</span>
        <!-- 该div标签只是为了将下面a标签位置挤到右边 -->
        <div class="spacer"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>
/* 去除浏览器公共样式 设置border-box,防止元素盒子被撑大 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    /* html是页面最顶层元素,100%是相对父元素来说高度是100%(父元素是浏览器窗口) */
    /* 此时,body 和 html的高度都是和浏览器窗口一样高的 */
    height: 100%;
}

body {
    /* 相对路径的基准路径是该文件所在的路径,因为现在在css里, ../才能找到image */
    background-image: url(../image/blog3.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

/* 实现导航栏的样式 */
.nav {
    /* 设置宽度和父元素一样宽 */
    width: 100%;
    /* 设置上边框导航栏高度为50px */
    height: 50px;
    background-color: rgba(50, 50, 50,0.4);
    color: white;

    /* 导航栏里面的元素都是水平排列,我们这里设置为弹性布局 */
    display: flex;
    /* 垂直方向居中 */
    align-items: center;
}

.nav img {
    width: 40px;
    height: 40px;
    margin-left: 30px;
    margin-right: 10px;
    /* 设置头像为圆形 */
    border-radius: 50%;
}

.nav .spacer {
    width: 70%;
}

.nav a {
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    /* 设置内边距,使a标签不要太挤 */
    padding: 0 10px;
}

博客管理系统(前端页面设计)
大家需要注意这里,我们图像存放的路径,我们这里存放的是相对路径,大家如过图片存放的位置不同注意引入的方式,上述我们html + css就可以实现上述优美的导航栏了,需要注意的是我们每个页面的导航栏稍微有一些差别,但很微小。
博客管理系统(前端页面设计)
比如我们登录页面没有注销功能,而有注册功能。
我们暂时只实现前端页面,所以我们这里的a标签中的href没有具体写,我们前后端交互的时候会具体修改的
下面我们来实现博客详情页的详情内容

博客管理系统(前端页面设计)
我们就可以实现博客列表页了,中间一大部分,然后中间又分为左右两部分。

    <!-- 页面主体 -->
    <div class="container">
        <!-- 左侧 -->
        <div class="container-left">
            <!-- 使用.card表示用户信息 -->
            <div class="card">
                <!-- 用户头像 -->
                <img src="image/logo1.png" alt="">
                <!-- 用户名 -->
                <h3>熬夜磕代码丶</h3>
                <a href="https://gitee.com/zhao-ding-gitee">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>3</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <!-- 右侧 -->
        <div class="container-right">
            <!-- 表示一篇博客 -->
            <div class="blog">
                <!-- 标题 -->
                <div class="title">我的第三篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-3-29</div>
                <!-- 摘要 -->
                <div class="desc">端口号:端口号可以标识主机中发送数据、接收数据的应用程序。</div>
                <!-- 查看全文按钮 -->
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
            <!-- 表示一篇博客 -->
            <div class="blog">
                <!-- 标题 -->
                <div class="title">我的第二篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-3-30</div>
                <!-- 摘要 -->
                <div class="desc">IP地址:主要用于标识网络主机、其他网络设备(路由器等)的网络地址。说的简单一点就是 IP地址标识了网络上设备所在的位置。</div>
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
            <!-- 表示一篇博客 -->
            <div class="blog">
                <!-- 标题 -->
                <div class="title">我的第一篇博客</div>
                <!-- 发布时间 -->
                <div class="date">2023-3-31</div>
                <!-- 摘要 -->
                <div class="desc">协议(网络协议):网络通信经过的所有网络设备必须遵守的一组规定,最终体现在网络上传输的数据包的格式。简单地说就是,通信的双方进行一个约定,发送方约定好发送的数据是啥样的,接收方按照固定的形式进行解析,这样接收方才能够准确无误的接受。</div>
                <!-- 查看全文按钮 -->
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
        </div>
    </div>
/* 页面主体样式 */
.container {
    /* 主体部分宽度1000px */
    width: 1000px;
    /* 高度填充整个页面 */
    height: calc(100% - 50px);
    /* 水平居中 */
    margin: 0 auto;

    /* 左右设置弹性布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.container .container-left {
    height: 100%;
    width: 200px;
}

.container .container-right {
    height: 100%;
    /* 使得左右间隔一点 */
    width: 795px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    /* 元素带上滚动条 */
    overflow: auto;
}

/* 左侧用户信息 */
.card {
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    /* 设置内边距,内容和边框有些距离 */
    padding: 30px;
}

/* 用户头像 */
.card img {
    height: 140px;
    width: 140px;
    border-radius: 50%;
}

/* 用户名设置 */
.card h3 {
    /* 文字居中 */
    text-align: center;
    /* 使用内边框上下设置边距 */
    padding: 10px;
}

/* 用户gitee链接  */
.card a {
    /* 因为a标签是行内元素,我们先转化为块级元素 */
    text-align: center;
    display: block;
    color: #777;
    text-decoration: none;
    padding: 10px;
}
.card .counter {
    /* 使得里面的元素水平排列 */
    display: flex;
    justify-content: space-around;
    padding: 5px;
}

大家需要注意,处了共有的commom.css,博客列表页还有自己特有的属性,blog_list.css
博客管理系统(前端页面设计)
大家需要注意这里目录结构,并且在html中引入相应css依赖
博客管理系统(前端页面设计)
这里有许多实现细节,我在代码中已经写了详细的注解,我们这里只挑比较重要的给大家讲解
博客管理系统(前端页面设计)
我们如何实现下面列表页的高度呢,宽度好设置直接是具体的值。
博客管理系统(前端页面设计)

大家需要注意,我们这里百分百代表的是页面的高度,然后减去导航栏的50px,就是我们列表页的高度
如果我们博客数量过多的话,我们就需要实现下滑功能,我们需要的是博客部分下滑,而不是整个页面下滑,所以我们在列表页右部分加上滚动条
博客管理系统(前端页面设计)
博客管理系统(前端页面设计)
我们点击全文旁边的>>在html存在一些转义字符,所以我们这里不能只能使用: < 使用 &lt; 表示 > 使用 &gt; 表示

三、博客详情页

博客管理系统(前端页面设计)
我们可以发现和博客列表页大部分都相同,只有我圈的部分不同,所以我们第一件事,就是先将导航栏的html 和 列表页的部分代码粘贴过来,然后将commom.css引入过来,然后再完善html和写blog_detail.css

        <!-- 右侧 -->
        <div class="container-right">
            <!-- 博客标题 -->
            <h3 class="title">我的第一篇博客</h3>
            <!-- 博客发布时间 -->
            <div class="date">2023-3-29</div>
            <!-- 博客正文 -->
            <div class="content">
                <p>
                    我们的TCP协议相比于UDP协议复杂不少,今天我们就来一起学习一下TCP协议报文和原理
                </p>
                <p>
                    4位首部长度: 正是因为这个首部长度存在,我们的TCP的报头长度是可变的,而我们的UDP报头长度是8个字节固定死的,首先我们需要明白,我们选项之前的长度是固定的20字节,而我们首部长度可以调节的就是选项长度,我们首部长度的单位是4字节,选项长度等于首部长度 - 20字节,如果我们的首部长度是6,那么TCP报头就是24字节(选项相当于是4字节)。
                </p>
                <p>
                    保留(6位): 我们这里的保留六位是为了以后扩展考虑的,因为我们的网络协议是一件成本较高的事情,就拿UDP来说,报文长度是2字节,因此一个包最大是64KB,如果我们想让它兼容更大一些的长度,理论可行但是实际操作极高,但是如果我们引入了保留字,我们后面TCP引入了新功能就可以使用这些保留字,不仅对报头结构影响极小,而且老设备也不需要升级也可兼容。
                </p>
            </div>
        </div>

然后我们只需要照着我图片的格式,在html加入对应元素即可,然后我们在写博客详情页的blog_detail.css

/* 博客详情页样式 */

.container-right .title {
    text-align: center;
    padding: 20px;
}

.container-right .date {
    text-align: center;
    color: rgb(15, 189, 177);
    padding: 10px;
}

.container-right .content p {
    text-indent: 2em;
    padding: 10px 30px;
}

有了博客列表页的基础我们再去实现博客详情页就事半功倍了

四、博客登录页

博客管理系统(前端页面设计)
这次我们在复制导航的时候,需要注意,我们登录页没有注销功能,而多了注册功能,然后引入公共commom.css,然后在创建登录页独有的login.html

    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/blog5.jpg" alt="">
        <span class = "title">博客管理系统</span> 
        <!-- 该div标签只是为了将下面a标签位置挤到右边 -->
        <div class="spacer"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注册</a>
    </div>
    <div class="login-container">
        <!-- 居中的对话框 -->
        <div class="login-dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id = "username" placeholder="手机号/邮箱">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id = "password">
            </div>            
            <div class="row">
                <button id = "submit">提交</button>
            </div>
        </div>
    </div>
/* 登陆界面样式 */
.login-container {
    width: 100%;
    height: calc(100% - 50px);
    /* 弹性布局,对话框设置为居中 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-dialog {
    width: 400px;
    height: 330px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

.login-dialog h3 {
    text-align: center;
    padding: 50px 0;
}

.login-dialog .row {
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-dialog .row span {
    width: 100px;
    font-size: 18px;
}

#username,#password {
    width: 200px;
    height: 40px;
    border-radius: 5px;
    /* 去掉边框 */
    border: none;
    font-size: 20px;
    padding-left: 5px;
}

#submit {
    width: 300px;
    height: 40px;
    color: white;
    border: none;
    background-color: coral;
    border-radius: 5px;
}

#submit:active {
    background-color: #666;
}

因为我们这里的登陆框是在页面中心的,我们这里使用弹性布局设置相关属性将登录框设置到页面中心
博客管理系统(前端页面设计)
我们想要实现一个在用户名栏我们没有输入时,有一个这样的提示,我们input标签自带有这样的属性
博客管理系统(前端页面设计)

五、博客编辑页

博客管理系统(前端页面设计)
我们这里先将导航栏的html复制过来,然后引入commom.css,大家需要注意我们这里并不关注markdown的实现,我们之间引入markdown的源码,大概可以分为以下几步:
1.引入jquery
因为我们的markdown编辑器也是依赖jquery,直接搜索jquery cdn即可

   <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

2.引入editor.md
博客管理系统(前端页面设计)
博客管理系统(前端页面设计)
然后选择github下载安装包,解压到我们blog目录下
博客管理系统(前端页面设计)
大家需要注意这个目录结构,我们解压后重命名文件为editor.md
然后我们需要有一个id为editor的div
博客管理系统(前端页面设计)
引入editor.md的css和js

    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <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>

大家需要注意我之所以这么引入,完全是因为我们目录结构决定的。
让然后编写markdown初始化代码:

    <script>
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>

博客管理系统(前端页面设计)
博客管理系统(前端页面设计)

博客管理系统(前端页面设计)
大家需要注意我们这里想要markdown编辑区透明,这里不能直接设置背景颜色,因为我们的editor.md中还有其他的背景。
博客管理系统(前端页面设计)
我们需要使用该属性来设置容器中所有元素都是该透明度。
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>博客编辑页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_edit.css">
    <!-- <script src="js/jquery.min.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    <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/blog5.jpg" alt="">
        <span class = "title">博客管理系统</span>
        <!-- 该div标签只是为了将下面a标签位置挤到右边 -->
        <div class="spacer"></div>
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
    </div>  
     <!--博客编辑区  -->
    <div class="blog-edit-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" id="title" placeholder="请输入文章标题">
            <button id="submit">发布文章</button>
        </div>
        <!-- 博客编辑器  id选择器为了和markdown对接-->
        <div id="editor">

        </div>
    </div>
    <script>
        var editor = editormd("editor", {
            // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
            width: "100%",
            // 设定编辑器高度
            height: "calc(100% - 50px)",
            // 编辑器中的初始内容
            markdown: "# 在这里写下一篇博客",
            // 指定 editor.md 依赖的插件路径
            path: "editor.md/lib/"
        });
    </script>
</body>
</html>

blog_editor.css文章来源地址https://www.toymoban.com/news/detail-416067.html

/* 博客编辑页样式 */

.blog-edit-container {
    width: 1000px;
    height: calc(100% - 50px);
    margin: 0 auto;
}

.blog-edit-container .title {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.blog-edit-container .title #title {
    height: 40px;
    width: 895px;
    border: none;
    padding-left: 5px;
    font-size: 20px;
    border-radius: 5px;
    /* 去掉轮廓线 鼠标选中后无黑圈*/
    outline: none;
    background-color: rgba(255, 255, 255, 0.7);
}

/* 点击输入框 输入框不透明 */
.blog-edit-container .title #title:focus {
    background-color: rgb(255, 255, 255);
}

.blog-edit-container .title #submit {
    height: 40px;
    width: 100px;
    border-radius: 5px;
    color: white;
    background-color: orange;
    border: none;
}

.blog-edit-container .title #submit:active {
    background-color: #666;
}

#editor {
    border-radius: 10px;
    /* background-color: rgba(255, 255, 255, 0.7); */
    opacity: 80%;
}

到了这里,关于博客管理系统(前端页面设计)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 基于云计算的前端资源管理系统的设计与实现

     hello宝子们...我们是艾斯视觉擅长ui设计和前端开发10年+经验!希望我的分享能帮助到您!如需帮助可以评论关注私信我们一起探讨!致敬感谢感恩! 随着互联网的快速发展,前端资源管理成为了一个重要的课题。本文旨在设计并实现一个基于云计算的前端资源管理系统,以

    2024年04月17日
    浏览(29)
  • 基于vue-cli创建后台管理系统前端页面——element-ui,axios,跨域配置,布局初步,导航栏

    1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请求添加Jwt的设置; 3.进行初始化布局,引入新增页面的方式; 4.home页面导航栏的设置,一级目录,二级目录; 安装成功 布局初步 1.vue-cli创建前端工程,安装element-ui,axios和配置; 2.前端跨域的配置,请

    2024年02月09日
    浏览(53)
  • 图书管理系统:从数据库设计到前端展示的实战经验分享

    ✍✍计算机编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java实战 | SpringBoot/SSM Python实战项目 | Django 微信小

    2024年01月16日
    浏览(44)
  • 前端页面项目——博客系统

    目录 1.实现博客列表页 1.1 实现导航栏 1.2 实现中间版心  1.3 实现个人信息  1.4 实现博客列表 2. 实现博客正文页  3. 实现博客登陆页  4. 实现博客编辑 4.1 实现编辑区 4.2  引入编辑器 1)登录页面 2)博客列表页 3)博客详情页    4)博客编辑页 ,项目所需目录表 创建 b

    2023年04月09日
    浏览(45)
  • 前端三大件html,css,js原生实现学生信息管理系统(课程设计)

      目录结构如该图所示,只要将文件命名成图上三种。代码即可正常运行。分别有三个文件,一个是app.js,放学生信息删除添加查询主要逻辑代码。login.html放登录页面样式以及相关逻辑。studentList.html 放置学生管理的页面。 运行效果图:   代码:  app.js login页面 studentList.

    2024年02月04日
    浏览(65)
  • Vue3.2 + TypeScript + Pinia + Vite4 + Element-Plus + 微前端(qiankun) 后台管理系统模板(已开源---显示项目页面截图)

    Wocwin-Admin,是基于 Vue3.2、TypeScript、Vite、Pinia、Element-Plus、Qiankun(微前端) 开源的一套后台管理模板;同时集成了微前端 qiankun也可以当做一个子应用。项目中组件页面使用了Element-plus 二次封装 t-ui-plus 组件,目前已新增fastmock接口。 Link:https://wocwin.github.io/wocwin-admin/ 账号:

    2024年02月08日
    浏览(82)
  • 毕业设计So Easy:SpringBoot+Vue图书阅读和管理系统(前端+后端+小程序端)

    目录 1、项目概述 2、开发环境 3、前后端配置部署 4、小程序端配置部署 5、项目效果演示 5.1、后端管理平台 5.2、前端阅读平台 5.3、小程序社区平台 很多计算机专业大学生经常和我交流:毕业设计没思路、不会做、论文不会写、太难了...... 针对这些问题,决定分享一些软、

    2024年02月11日
    浏览(49)
  • 毕业设计课题——基于原生servlet和jdbc的学生信息管理系统,前端使用layui

    使用原生 servlet作为后端进行开发 后端采用纯servlet进行开发,同时搭配原生的jdbc,整个架构没有使用任何框架,可以说是非常原始了; 验证码工具类可以返回验证码图片和验证码内容,数据库连接工具类可以返回一个数据库连接和关闭数据库连接的方法(但是封装和设计模

    2024年02月19日
    浏览(57)
  • 基于Django的博客管理系统

    【error】Database returned an invalid datetime value. Are time zone definitions for your database inst 修改: 参考:https://codeleading.com/article/78832425719/ 修改settings.py中时间信息的配置:

    2024年02月10日
    浏览(43)
  • 博客系统(页面设计)

    目录 一、学习计划 二、前期工作 三、列表页设计(重点掌握) 1.设计背景图 1.1 common.css 2. 编写导航栏 2.1 image 2.2 blogging.html 2.3 common.css 3. 实现页面的正文(版心) 3.1 blogging.html 3.2 common.css 4. 实现个人信息 4.1 blogging.html 4.2 common.css 代码 5.实现博客列表 5.1 blogging.html 5.2

    2024年02月04日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包