我的博客系统——Web前端开发（HTML+CSS+JS）具体代码实现

m0_63793861

已于 2023-11-02 21:43:22 修改

阅读量515

点赞数 1

分类专栏： JavaEE 文章标签： html 前端

于 2023-10-31 15:45:57 首次发布

本文链接：https://blog.csdn.net/m0_63793861/article/details/134120637

版权

JavaEE 专栏收录该内容

6 篇文章 1 订阅

订阅专栏

通过VScode构造博客系统的页面，主要使用了HTML+CSS+JS语言，完成各个页面的最终呈现。Web前端开发技术包括三个要素：html（结构）、css（样式）、javascript（行为动作）。

项目后端开发与实现：我的博客系统——项目介绍

页面展示

1、博客列表页

2、博客详情页

3、博客登录页

4、博客编辑页

具体代码实现

首先，创建一个BLOG文件夹，在BLOG文件夹下，分别创建对应四个页面的html文件和css文件和common.css文件。创建一个image文件夹用于存放项目中需要用到的图片，包括博客系统图标、用户头像、博客系统背景图片。新建js文件夹以及其中的jquery.min.js文件，从浏览器中下载。下载markdown编辑器editor.md到相应文件夹。

jQuery是一个JavaScript库，它简化了客户端JavaScript编程的过程，特别是针对HTML文档遍历和操作、事件处理、动画效果和Ajax操作。使用jQuery可以更容易地编写可维护的JavaScript代码，同时提高了跨浏览器的兼容性。

部署markdown编辑器的步骤：

（下面博客编辑页html文件中已部署）

①保证页面中有一个id为editor的div

<div id="editor"> </div>

②引入editor.md对应的css和js，并且放在jquery引入代码的下方。（确保路径一致）

<script src="js/jquery.min.js"></script>



<link rel="stylesheet" href="editor.md/editor.md-master/css/editormd.min.css">

<script src="editor.md/editor.md-master/lib/marked.min.js"></script>

<script src="editor.md/editor.md-master/lib/prettify.min.js"></script>

<script src="editor.md/editor.md-master/editormd.js"></script>

③粘贴初始化代码

<script>

//初始化编辑器

var editor = editormd("editor",{

width:"100%",

height:"calc(100% - 58px)",

markdown:"# 在这里写下一篇博客",

path : "editor.md/editor.md-master/lib/"

});

</script>

blog_list.html

博客列表页，blog_list.html文件中的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/图标.jpg" alt="">
        <span class="title">我的博客系统</span>
        
        <!-- 占位 -->
        <div class="spacer"></div>
        <!-- <h3>欢迎来到我的博客系统</h3> -->
        <!-- 超链接 -->
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">注销</a>
        
    </div>
    <!-- 页面主体 -->
    <div class="container">
        <!-- 左侧内容 -->
        <div class="container-left">
            <!-- 描述用户信息 -->
            <div class="card">
                <img src="./image/用户头像.jpg" alt="">
                <!-- 用户名 -->
                <h3>花花</h3>
                <div class="counter">
                    <span>文章总数</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>1</span>
                    <span>1</span>
                    
                </div>
            </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="container-right">
            <div class="blog">
                <div class="title">博客标题</div>
                <div class="date">时间</div>
                <div class="desc">内容</div>
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
            <div class="blog">
                <div class="title">博客标题</div>
                <div class="date">时间</div>
                <div class="desc">内容</div>
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
            <div class="blog">
                <div class="title">博客标题</div>
                <div class="date">时间</div>
                <div class="desc">内容</div>
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
            <div class="blog">
                <div class="title">博客标题</div>
                <div class="date">时间</div>
                <div class="desc">内容</div>
                <a href="#">查看全文 &gt; &gt;</a>
            </div>
        </div>
    </div>
</body>
</html>

blog_detail.html

博客详情页， blog_detail.html文件中的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/图标.jpg" alt="">
        <span class="title">我的博客系统</span>
        
        <!-- 占位 -->
        <div class="spacer"></div>
        <!-- <h3>欢迎来到我的博客系统</h3> -->
        <!-- 超链接 -->
        <a href="#">主页</a>
        <a href="#">写博客</a>
        <a href="#">删除</a>
        <a href="#">注销</a>
    </div>
    <!-- 页面主体 -->
    <div class="container">
        <!-- 左侧内容 -->
        <div class="container-left">
            <!-- 描述用户信息 -->
            <div class="card">
                <img src="./image/用户头像.jpg" alt="">
                <!-- 用户名 -->
                <h3>花花</h3>
                <div class="counter">
                    <span>我的文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>1</span>
                    <span>1</span>
                    
                </div>
            </div>
        </div>
        
        <!-- 右侧内容 -->
        <div class="container-right">
            <div class="blog">
                <div class="blog">
                    <h2 class="blog_title">博客标题</h2>
                    <div class="date">时间</div>
                    <div class="content">
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat hic culpa ipsa neque ab quasi sequi in omnis! Eum itaque eos sequi possimus ex saepe, aut facilis expedita quae. Et.</p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eaque neque quam explicabo assumenda ipsum saepe rerum consectetur nesciunt, alias, magni soluta. Repellendus ex, facilis dolorum doloremque accusamus maiores dolorem quibusdam.</p>
                        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsa modi consequatur eaque facilis natus excepturi, voluptates quam asperiores voluptatibus consequuntur minus nobis? Sint ipsa eaque, iusto dolor sit delectus reprehenderit?</p>
                    </div>
                    </div>
            </div>
        </div>
    </div>
</body>
</html>

login.html

博客登录页，login.html 文件中的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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/图标.jpg" alt="">
        <span class="title">我的博客系统</span>
        
        <!-- 占位 -->
        <div class="spacer"></div>
        <!-- <h3>欢迎来到我的博客系统</h3> -->
        <!-- 超链接 -->
        <a href="#">主页</a>
        <a href="#">注销</a>
        <p>欢迎来到我的博客！</p>
    </div>
    <!-- 登录 -->
    <div class="login-container">
        <!-- 垂直水平的对话框 -->
        <div class="login-dialog">
            <h2>登 录</h2>
            <div class="row">
                <!-- <span>用户名</span> -->
                <input type="text" id="username" placeholder="请输入用户名">
            </div>
            <div class="row">
                <!-- <span>密码</span> -->
                <input type="password" id="password" placeholder="请输入密码">
                
            </div>
            <div class="row">
            <button  class="button"  id="submit">登 录</button>
            </div>          
        </div>
    </div>
</body>
</html>

blog_edit.html

博客编辑页， blog_edit.html文件中的HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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">
    <!-- 引入js -->
    <script src="js/jquery.min.js"></script>
    <!-- 引入 editor.md 的依赖 -->
    <link rel="stylesheet" href="editor.md/editor.md-master/css/editormd.min.css">
    <script src="editor.md/editor.md-master/lib/marked.min.js"></script>
    <script src="editor.md/editor.md-master/lib/prettify.min.js"></script>
    <script src="editor.md/editor.md-master/editormd.js"></script>
</head>
<body>
    <!-- 导航栏 -->
    <div class="nav">
        <img src="image/图标.jpg" alt="">
        <span class="title">我的博客系统</span>
        
        <!-- 占位 -->
        <div class="spacer"></div>
        <!-- <h3>欢迎来到我的博客系统</h3> -->
        <!-- 超链接 -->
        <a href="#">主页</a>
        <a href="#">注销</a>
    </div>
    <!-- 编辑区 -->
    <div class="blog-edir-container">
        <!-- 标题编辑区 -->
        <div class="title">
            <input type="text" id="title" placeholder="请输入文章标题">
            <button id="submit">发布文章</button>

        </div>
        <!-- 博客内容编辑区 设置id是为了和markdown编辑器对接 -->
        <div id="editor"></div>
    </div>
    <script>
        //初始化编辑器
        // editor：此处创建一个editor对象，对应页面的markdown编辑器
        // editormd：通过这个函数构造
        //"editor" 和上面<div id="editor">对应
            //{}js对象
    var editor = editormd("editor",{
        width:"100%",
        height:"calc(100% - 58px)",
        markdown:"# 在这里写下一篇博客",
        path : "editor.md/editor.md-master/lib/"
    });
    </script>

</body>
</html>

common.css

common.css中主要是对四个页面公共样式的编写代码，背景图、导航栏的样式。

/* 第一步，去除浏览器的公共样式 */
* {
margin:0 ;
padding: 0;
box-sizing: border-box;
}
html,body{
    /* html是页面最顶层元素，设置的高度是相对于父元素（浏览器）设置的，100%是和浏览器一样高 */
    /* body的父元素是html，100%是和html一样高  */
    /* 如果不设置高度，页面高度取决于内部内容 */
    height: 100%;
}
body {
    /* 背景图 */
    background-image: url(../image/背景.jpg);
    /* 去掉图片拼图效果 */
    background-repeat: no-repeat;
    /* 图片尺寸 */
    background-size: cover;
    /* 图片位置 垂直水平居中 */
    background-position: center;
}
/* 导航栏的实现 */
.nav {
    width: 100%;
    height: 50px;
    /* 背景颜色 */
    background-color:rgba(111, 106, 106, 0.5) ;
    /* 文字颜色 */
    color: white;  
     /*导航栏里的元素都是水平排列的，通过弹性排列设置 */
     display: flex;
     /* 垂直方向居中 */
     align-items: center;
}
/* 导航栏的图标 */
.nav img{
    width: 40px;
    height: 40px;
    /* 图片外边距 */
    margin-left: 40px;
    margin-right:20px ;
    /* 变圆 */
    border-radius: 50%;
}
.nav .spacer{
    width: 60%;
}
/* 导航栏中的标签 */
.nav a{
    color: white;
    /* 去掉下划线 */
    text-decoration: none;
    /* 加上内边距，可以增加用户点击内容 上下0，左右10px */
    padding: 0 20px;
}
/* 主体部分的页面设计 */
.container{
    width: 1000px;
    /* 需要减去导航栏的高度 */
    height: calc(100% - 50px);
    /* background-color:rgba(223, 221, 221, 0.8) ; */
    /* 水平居中 */
    margin: 0 auto;
    /* 里面的元素弹性布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 上边距 */
    margin-top:10px;

}
/* 主体部分的左侧设计 */
.container .container-left{
    width: 200px;
    height: 100%;   

}
/* 左侧内容设计 */
.card {
    background-color:rgba(223, 221, 221, 0.8) ;
     /* 内边距 可以让图片居中*/
     padding: 30px;
     /* 变圆 */
   border-radius: 5px;
}
/* 用户头像 */
.card img{

    width: 140px;
    height: 140px;
     /* 变圆 */
   border-radius: 50%;
   
}
/* 用户名字 */
.card h3{
    /* 文字水平居中 */
    text-align: center;
    /* 上下边距 */
    margin-top:20px;
    margin-bottom: 20px;
}
.card .counter{
     /* 里面的元素弹性布局 */
     display: flex;
     /* 水平方向排列开 */
     justify-content: space-around;
   
    /* 上下边距 */
    padding: 5px;
   
     
}

/* 主体部分的右侧设计 */
.container .container-right{
    width: 800px;
    height: 100%;
    margin-left: 5px;
    background-color:rgba(223, 221, 221, 0.8) ;
     /* 变圆 */
   border-radius: 5px;
   /* 左侧加上滚动条，内容溢出显示 */
   overflow: auto;

}

blog_list.css

.blog{
    /* 上下边距 */
    padding: 20px;
}
/* 博客标题 */
.blog .title{
    /* 文字水平居中 */
    text-align: center;
    /* 文字大小 */
    font-size: 24px;
    /* 文字粗细 */
    font-weight: 700;
    padding: 10px;
}
/* 博客时间 */
.blog .date{
     /* 文字水平居中 */
     text-align: center;
     /* 文字大小 */
    font-size: 20px;
    padding: 10px;
}
/* 博客内容 */
.blog .desc{
    text-indent: 2em;
}

.blog a{
    /* a标签不方便设计样式，转成块级元素 */
    display: block;
    width: 120px;
    height: 40px;
    /* 水平居中 */
    margin-left:auto;
    margin-right:auto;
    margin-top: 20px;

    /*设置边框 */
    border: 2px solid black;
    /* 文字水平居中 */
    text-align: center;
    /* 文字垂直居中 */
    line-height:40px ;
    /* 去掉下划线 */
    text-decoration: none;
    /* 文字颜色 */
    color: black;
    border-radius: 10px;
    /* 悬停过渡时间 */
    transition: all 0.8s;
}
/* 鼠标滑倒按钮上变颜色 */
.blog a:hover{
    background-color: rgb(183, 179, 179);
}

blog_detail.css

/* 博客标题 */
.container-right .blog_title{
    /* 居中 */
    text-align: center;
    padding-top: 40px;
    padding-bottom: 20px;
}
.container-right .date{
     /* 文字水平居中 */
     text-align: center;
     /* 文字大小 */
    font-size: 20px;
    padding-bottom: 10px;
}
.container-right .content p{
    text-indent: 2em;
    padding: 10px 30px;
}

login.css

.nav p{
    padding: 0 40px;
    font-weight: 550;
}
.login-container{
    width: 100%;
    height: calc(100% - 50px);
     /*方法一： 该页面的元素弹性布局 ： 水平和垂直方向居中  */
    display: flex;
    align-items: center;
    justify-content: center;
}
.login-dialog{
    height: 300px;
    width: 350px;
    background-color: rgba(223, 221, 221, 0.9);
    /* 方法二：水平和垂直方向居中 */
    /* 水平居中 */
    /* margin: 0 auto; */
    /* 上边距 */
    /* margin-top:200px;*/
    border-radius: 10px; 
    
}
.login-dialog h2{
    /* 文字水平居中 */
    text-align: center;
    padding: 30px;
}
.login-dialog .row{
    /* 用户名和密码分开 */
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;  
    
}
.login-dialog .row span{
    width: 80px;
}
#username,#password{
    width: 200px;
    height: 35px;
    /* 去掉边框 */
    border: none;
    border-radius: 5px;
    /* 放大输入的字体 */
    font-size: 15px;
    padding-left: 5px;
    
    
}
#submit{
    width: 200px;
    height: 30px;
    /* 上边距 */
    margin-top:30px ;
    /* 去掉边框 */
    border: none;
    border-radius: 5px;
    background-color: #ff6701cf;
    font-size: 15px;
    color: white;
   
}


/* 鼠标滑倒按钮上变颜色 */
#submit:hover{
    background-color: rgba(142, 139, 139, 0.69);
}

blog_edit.css

.blog-edir-container{
    width: 1000px;
    height: calc(100% - 50px);
    /* 页面居中 */
    margin: 0 auto;
}
/* 标题编辑区 */
.blog-edir-container .title{
    width: 100%;
    height: 50px;
    
/* 里面的元素弹性布局 */
    display: flex;
    align-items: center;
    justify-content: space-between;
        /* 上边距 */
        margin-top:10px;
        
}
#title{
    width: 890px;
    height: 40px;
    border-radius: 10px;
    border: none;
    /* 去掉轮廓线 */
    outline: none;
    /* 左侧内容有一定的边距 */
    padding-left: 10px;
     
    /* 字体大小 */
    font-size: 20px;
    /* 半透明 */
    background-color:rgb(255,255,255,0.8);
}
#submit{
    width:100px;
    height: 40px;
    border-radius: 5px;
    background-color: #fca55a;
    border: none;
    /* 去掉轮廓线 */
    outline: none;
    color: white;
    font-size: 15px;
}
/* 鼠标滑倒按钮上变颜色  rgba(142, 139, 139, 0.69)*/
#submit:hover{
    background-color: white;
    color: black;
}

.blog-edir-container #editor{
    width: 100%;
    height: calc(100% - 50px);
    background-color: aquamarine;
        /* 上边距 */
        margin-top:10px;
        border-radius: 5px;
        
}

m0_63793861

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
我的博客系统——Web前端开发（HTML+CSS+JS）具体代码实现

通过VScode构造博客系统的页面，主要使用了HTML+CSS+JS语言，完成各个页面的最终呈现。Web前端开发技术包括三个要素：html（结构）、css（样式）、javascript（行为动作）。
复制链接

扫一扫