• 博客系统（页面）

    目录

    博客列表页

    博客正文页

    博客登录页

    博客编辑页

    实现一个简单的博客系统，有四个页面：

    博客列表页、博客正文页、博客登录页、博客编辑页

    博客列表页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>博客编辑页title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/blog_edit.css">
    9.     <script src="js/jquery.min.js">script>
    10.  
    11.     
    12.     
    13.         
    14.         <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    15.         <script src="editor.md/lib/marked.min.js">script>
    16.         <script src="editor.md/lib/prettify.min.js">script>
    17.         <script src="editor.md/editormd.js">script>
    18. head>
    19. <body>
    20.     
    21.    <div class="nav">
    22.     <img src="image/csdn.webp" alt="">
    23.     <span class="title">我的博客系统span>
    24.     
    25.     <div class="spacer">div>
    26.     <a href="#">主页a>
    27.     <a href="#">写博客a>
    28.     <a href="#">注销a>
    29. div>
    30.  
    32. <div class="blog-edit-container">
    34. <div class="blog-edit-title">
    35. <input type="text" id="title-edit" placeholder="请输入文章标题">
    36. <button id="submit">发布文章button>
    37. div>
    39. <div id="editor">
    40.  
    41. div>
    42. div>
    43. <script>
    44.     var editor = editormd("editor", {
    45.         // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    46.         width: "100%",
    47.         // 设定编辑器高度
    48.         // height: "calc(100% - 50px)",
    49.         height:"450px",
    50.         // 编辑器中的初始内容
    51.         markdown: "# 在这里写下一篇博客",
    52.         // 指定 editor.md 依赖的插件路径
    53.         path: "editor.md/lib/"
    54.     });
    55. script>
    56. body>
    57. html>

    博客正文页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>博客详情页title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/blog_detail.css">
    9. head>
    10. <body>
    11.     
    12.     <div class="nav">
    13.         <img src="image/csdn.webp" alt="">
    14.         <span class="title">我的博客系统span>
    15.         
    16.         <div class="spacer">div>
    17.         <a href="#">主页a>
    18.         <a href="#">写博客a>
    19.         <a href="#">注销a>
    20.     div>
    21.  
    22.       
    23.       <div class="container">
    24.         
    25.         <div class="container-left">
    26.             
    27.             <div class="card">
    28.                 
    29.                 <img src="image/touxiang.png" alt="">
    30.                 
    31.                 <h3>丸圆圆h3>
    32.                 <a href="#">github地址a>
    33.     
    34.                 <div class="counter">
    35.                     <span>文章span>
    36.                     <span>分类span>
    37.                 div>
    38.     
    39.                  <div class="counter">
    40.                     <span>33span>
    41.                     <span>3span>
    42.                  div>
    43.             div>
    44.             div>
    45.         
    46.         <div class="container-right">
    47.             
    48.             <h3 class="detail-title">我的第一篇博客h3>
    49.             
    50.             <div class="date">2023-10-01div>
    51.             
    52.           <div class="content">
    53.             <p class="content-p">
    54.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    55.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    56.                 p>
    57.  
    58.             <p class="content-p">
    59.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    60.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    61.                 p>
    62.  
    63.             <p class="content-p">
    64.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    65.                 从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam aspernatur, ratione veritatis amet ad explicabo exercitationem saepe doloribus iusto ducimus laboriosam ea assumenda expedita, magni mollitia adipisci ab ex animi.
    66.                 p>
    67.           div>
    68.         div>
    69.     div>
    70. body>
    71. html>

    博客登录页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>登录页面title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/login.css">
    9. head>
    10. <body>
    11.    
    12.    <div class="nav">
    13.     <img src="image/csdn.webp" alt="">
    14.     <span class="title">我的博客系统span>
    15.     
    16.     <div class="spacer">div>
    17.     <a href="#">主页a>
    18.     <a href="#">写博客a>
    19. div>
    20.  
    23. <div class="login-container">
    24.     
    25.     <div class="login-dialog">
    26.     <h3>登录h3>
    27.     <div class="login-dialog-row">
    28.         <span>用户名span>
    29.         <input type="text" id="username" placeholder="手机号/邮箱">
    30.     div>
    31.     <div class="login-dialog-row">
    32.        <span>密码span>
    33.        <input type="password" id="password">
    34.     div>
    35.     <div class="login-dialog-row">
    36.         <button id="submit">登录button>
    37.     div>
    38.  
    39. div>
    40.  
    41. body>
    42. html>

    博客编辑页

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>博客编辑页title>
    7.     <link rel="stylesheet" href="css/common.css">
    8.     <link rel="stylesheet" href="css/blog_edit.css">
    9.     <script src="js/jquery.min.js">script>
    10.  
    11.     
    12.     
    13.         
    14.         <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    15.         <script src="editor.md/lib/marked.min.js">script>
    16.         <script src="editor.md/lib/prettify.min.js">script>
    17.         <script src="editor.md/editormd.js">script>
    18. head>
    19. <body>
    20.     
    21.    <div class="nav">
    22.     <img src="image/csdn.webp" alt="">
    23.     <span class="title">我的博客系统span>
    24.     
    25.     <div class="spacer">div>
    26.     <a href="#">主页a>
    27.     <a href="#">写博客a>
    28.     <a href="#">注销a>
    29. div>
    30.  
    32. <div class="blog-edit-container">
    34. <div class="blog-edit-title">
    35. <input type="text" id="title-edit" placeholder="请输入文章标题">
    36. <button id="submit">发布文章button>
    37. div>
    39. <div id="editor">
    40.  
    41. div>
    42. div>
    43. <script>
    44.     var editor = editormd("editor", {
    45.         // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    46.         width: "100%",
    47.         // 设定编辑器高度
    48.         // height: "calc(100% - 50px)",
    49.         height:"450px",
    50.         // 编辑器中的初始内容
    51.         markdown: "# 在这里写下一篇博客",
    52.         // 指定 editor.md 依赖的插件路径
    53.         path: "editor.md/lib/"
    54.     });
    55. script>
    56. body>
    57. html>

    这里没有提交css的代码，在编辑页需要引入一个editor编辑器，可以在GitHub上获取源代码，编辑页的启用editor编辑器的方式在官方文档中也有具体写法。

    成果展示：

  • 相关阅读:
    React Native简介 说明为什么要学习React Native
    html+css网页设计 旅游网站首页1个页面
    Google codelab WebGPU入门教程源码＜3＞ - 绘制网格(源码)
    javascript 正则表达式匹配替换
    PDO::fetchAll 与 PDO::fetch 循环
    华为云优惠券介绍、领取入口及使用教程
    [C#，Unity面试题]C#前三题是字节跳动面试问题 Unity主要是关于Shader的面试题(一)
    如何统一项目中包管理器的使用？
    2023年电工（中级）证模拟考试题库及电工（中级）理论考试试题
    变电站机器人的控制部分
  • 原文地址：https://blog.csdn.net/weixin_67793092/article/details/133249075