博客系统（页面设计）

目录

博客系统（页面设计）

效果预览

博客列表页

博客详情页

博客登录页

博客编辑页

实现博客列表

实现导航栏

实现版心

实现左侧个人信息

实现博客列表

实现博客详情页

引入导航栏（HTML、CSS）

引入版心

引入个人信息

实现博客详情

实现博客登录页

引入导航栏

实现版心

实现登录框

实现博客编辑页

引入导航栏

实现编辑区

引入editor.md

引入editor.md的依赖

新建js文件夹

初始化编辑器

---

博客系统（页面设计）

效果预览

博客列表页

博客详情页

博客登录页

博客编辑页

实现博客列表

实现导航栏

HTML代码

    <!--导航栏-->
    <div class="nav">
        <img src="logo.jpg" alt="">
        <span class="title">我的博客系统</span>
        <!-- 占位-占据中间位置 -->
        <span class="spacer"></span>
        <!-- 前端目前只使用页面内跳转 -->
        <a href="blog_list.html">主页</a>
        <a href="blog_editor.html">写博客</a>
        <!-- #是暂时不晓得用什么链接时可以使用 -->
        <a href="#">注销</a>
    </div>

对于导航栏来说，每个页面都需要，因此把样式分离出来，便于后续直接引用~

CSS代码

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* 整个页面高度 */
html, body{
    height: 100%;
}

body{
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(../1.jpg);
    background-size: cover;
}

/* 导航栏 */
.nav {
    width: 100%;
    height: 50px;

    background-color: rgba(51, 51, 51, 0.4);
    color: white;
    display: flex;

    justify-content: left;
    align-items: center;
}
/* 图片 */
.nav img{
    width: 40px;
    height: 40px;

    /* 左边距 */
    margin-left: 30px;
    /* 右边距 */
    margin-right: 10px;
    border-radius: 50%;
}
/* 占位元素 */
.nav .spacer{
    width: 70%;
}


.nav a{
    padding: 0 10px;
    /* 去下划线 */
    text-decoration: none;
    color: white;
}

实现版心

版心即蓝色部分，用来实现元素居中对其~

HTML代码

<!--版心-->
    <div class="container">

    </div>

CSS代码

/* 版心 */
.container{
    /* 去除导航栏后的高度 */
    height: calc(100% - 50px);
    width: 1000px;
    display: flex;
    margin: 0 auto;

    /* --- */
    justify-content: space-between;
    align-items: center;
    
}

实现左侧个人信息

HTML代码

        <!--左侧个人信息-->
        <div class="left">
            <div class="card">
                <img src="1.jpeg" alt="">
                <h4>海绵宝宝养的小窝</h3>
                <a href="#">github链接</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>2</span>
                    <span>1</span>
                </div>
            </div>
        </div>

CSS代码

.container .left{
    height: 100%;
    width: 200px;
    /* 这是一个测试 */
    /* background-color: rgb(128,0,0);  */
}


.left .card{
    /* 0.8是代表透明度 */
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
    padding: 30px;
}

.left .card img{
    width: 140px;
    border-radius: 50%;
}

.left a{
    display: block;
    text-align: center;
    color: rgb(128,128,128);
}


.left .counter{
    display: flex;
    padding: 5px;
    justify-content: space-around;
}

实现博客列表

HTML代码

<!--右侧内容详情-->
        <div class="right">
            <!-- 博客展示 -->
            <div class="blog">
                <div class="title">我的第一篇博客</div>
                <div class="date">2022-07-05</div>
                <div class="content">
                    今天开始我要认真写代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint rerum, vero ea aliquid sunt velit eius est, illo debitis unde quae officiis doloremque minima perferendis eaque ipsum repellendus culpa?
                </div>
                <a href="blog_content.html">查看全文 &gt;&gt; </a>
            </div>
            <div class="blog">
                <div class="title">我的第二篇博客</div>
                <div class="date">2022-07-05</div>
                <div class="content">
                    今天开始我要认真写代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis sint rerum, vero ea aliquid sunt velit eius est, illo debitis unde quae officiis doloremque minima perferendis eaque ipsum repellendus culpa?
                </div>
                <a href="blog_content2.html">查看全文 &gt;&gt; </a>
            </div>
        </div>

CSS代码

.container .right{
    height: 100%;
    width: 795px;
    background-color: rgba(255,255,255,0.8);
    /* 这是一个测试 */ 
    /* background-color: rgba(255,255,255,0.8); */
    border-radius: 10px;
    /* 处理元素溢出问题 */
    overflow: auto
}

.blog{
    width: 100%;
    padding: 20px;
}


.blog .title{
    /* 文本水平居中 */
    text-align: center;
    font-size: 20px;
    padding: 10px;
}

.blog .date{
    text-align: center;
    color: rgb(15, 105, 53);
    padding: 10px;
}

.blog .content{
    text-indent: 2em;
}

.blog a{
    /* 设置成为块级元素 方便设置边框 */
    width: 140px;
    height: 40px;
    display: block;
    /* 水平居中 */
    margin: 10px auto;
    /* 黑色边框 实线 */
    border: 2px black solid;
    text-align: center;
    /* 垂直居中 */
    line-height: 40px;
    text-decoration: none;
    color: black;
    /* 渐变效果 a标签 0.5秒 */
    transition: all 0.5s;
}
/* 伪类选择器 控制光标放上去后的效果 */
.blog a:hover{
    background-color: #333;
    color: white;
}

实现博客详情页

引入导航栏（HTML、CSS）

引入版心

引入个人信息

实现博客详情

HTML代码

<!--右侧博客内容详情-->
        <div class="right">
            <div class="blog-content">
                <!-- 标题 -->
                <h3>我的第一篇博客</h3>
                <div class="date">2022-07-05</div>
                <p>
                    今天开始我要认真敲代码Lorem ipsum dolor sit, amet consectetur adipisicing elit. Repellendus magnam esse ab maiores recusandae! Assumenda accusamus consequuntur deleniti, error soluta accusantium! Cupiditate, iure deserunt consectetur natus velit soluta praesentium laborum.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Animi, quos sed repellendus aliquam esse sint neque accusamus omnis voluptatibus accusantium, illo harum ad modi, velit temporibus magni. Corrupti, sint facere.
                </p>
                <p>
                    Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis praesentium quod, illum debitis velit accusantium sunt rem ex. Velit debitis, at quidem saepe molestias corporis modi dolores! Nam, eligendi quia!
                </p>
            </div>
        </div>

CSS

.blog-content {
    padding: 30px;
}

.blog-content h3{
    text-align: center;
    font-size: 20px;
}

.blog-content .date{
    text-align: center;
    color: rgb(15, 105, 53);
    padding : 10px ;
}

.blog-content p{
    text-indent: 2em;
    padding: 10px;
}

实现博客登录页

引入导航栏

实现版心

HTML代码

<!-- 版心 -->
    <div class="login-container">
        
        
    </div>

CSS

.login-container {
    width: 100%;
    height: calc(100% - 50px);
    display: flex;
    justify-content: center;
    align-items: center;
}

实现登录框

HTML代码

<div class="login-dialog">
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input type="text" id = "username">
            </div>
            <div class="row">
                <span>密码</span>
                <input type="password" id = "password">
            </div>
            <div class="row">
                <button id = "submit">提交</button>
            </div>
        </div>

CSS

.login-container .login-dialog{
    width: 400px;
    height: 350px;
    background-color: rgba(255,255,255,0.8);
    border-radius: 10px;
}
.login-container h3{
    text-align: center;
    font-size: 30px;
    padding:  50px 0;
}

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

.login-container .row span{
    display: block;
    width: 100px;
    font-weight: 700;
}

#username,
#password{
    border: none;
    outline: none;
    border-radius: 10px;
    text-indent: 10px;
    line-height: 40px;
    font-size: 24px;
    width: 200px;
    height: 40px;
}

#submit{
    width: 300px;
    height: 50px;
    border: none;
    border-radius: 10px;
    color: white;
    background-color: green;
}

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

实现博客编辑页

引入导航栏

实现编辑区

HTML代码

<div class="blog-edit-container">
            <div class="title">
                <input type="text" placeholder="在此处输入标题" name="title">
                <button>发布文章</button>
            </div>
            <!-- 放置 md 编辑器 -->
            <div id="editor">
                
            </div>
    </div>

CSS

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

.blog-edit-container .title {
    width: 100%;
    height: 50px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.blog-edit-container .title input {
    width: 895px;
    height: 40px;
    border-radius: 10px;
    border: none;
    outline: none;
    font-size: 22px;
    line-height: 40px;
    padding-left: 10px;

    background-color: rgba(255, 255, 255, 0.8);
}

.blog-edit-container .title button {
    width: 100px;
    height: 40px;
    border-radius: 10px;
    color: white;
    background-color: orange;
    border: none;
    outline: none;
    font-size: 18px;
}

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

#editor {
    border-radius: 10px;

    /* background-color: rgba(255, 255, 255, 0.8); */
    opacity: 80%;
}

引入editor.md

进入官网：https://pandao.github.io/editor.md/

下载安装->github下载->解压文件->复制该文件至所写代码所在文件->重命名为editor.md

editor.md文件下层目录有一个css文件点开，测试最终文件路径为：

D:blog-system-前端\editor.md\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>

新建js文件夹

新建js文件夹，内部再新建一个jquery.min.js文档

打开https://code.jquery.com/jquery-3.6.0.min.js网址，将其中所有内容复制到jquery.min.js中

初始化编辑器

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

 

完~