• 博客系统（页面设计）

    目录

    博客系统（页面设计）

    效果预览

    博客列表页

    博客详情页

    博客登录页

    博客编辑页

    实现博客列表

    实现导航栏

    实现版心

    实现左侧个人信息

    实现博客列表

    实现博客详情页

    引入导航栏（HTML、CSS）

    引入版心

    引入个人信息

    实现博客详情

    实现博客登录页

    引入导航栏

    实现版心

    实现登录框

    实现博客编辑页

    引入导航栏

    实现编辑区

    引入editor.md

    引入editor.md的依赖

    新建js文件夹

    初始化编辑器

    博客系统（页面设计）

    效果预览

    博客列表页

    博客详情页

    博客登录页

    博客编辑页

    实现博客列表

    实现导航栏

    HTML代码

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

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

    CSS代码

    1. *{
    2.     margin: 0;
    3.     padding: 0;
    4.     box-sizing: border-box;
    5. }
    6. /* 整个页面高度 */
    7. html, body{
    8.     height: 100%;
    9. }
    10.  
    11. body{
    12.     background-position: center center;
    13.     background-repeat: no-repeat;
    14.     background-image: url(../1.jpg);
    15.     background-size: cover;
    16. }
    17.  
    18. /* 导航栏 */
    19. .nav {
    20.     width: 100%;
    21.     height: 50px;
    22.  
    23.     background-color: rgba(51, 51, 51, 0.4);
    24.     color: white;
    25.     display: flex;
    26.  
    27.     justify-content: left;
    28.     align-items: center;
    29. }
    30. /* 图片 */
    31. .nav img{
    32.     width: 40px;
    33.     height: 40px;
    34.  
    35.     /* 左边距 */
    36.     margin-left: 30px;
    37.     /* 右边距 */
    38.     margin-right: 10px;
    39.     border-radius: 50%;
    40. }
    41. /* 占位元素 */
    42. .nav .spacer{
    43.     width: 70%;
    44. }
    45.  
    46.  
    47. .nav a{
    48.     padding: 0 10px;
    49.     /* 去下划线 */
    50.     text-decoration: none;
    51.     color: white;
    52. }

    实现版心

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

     

    HTML代码

    1. <!--版心-->
    2.     <div class="container">
    3.  
    4.     </div>

    CSS代码

    1. /* 版心 */
    2. .container{
    3.     /* 去除导航栏后的高度 */
    4.     height: calc(100% - 50px);
    5.     width: 1000px;
    6.     display: flex;
    7.     margin: 0 auto;
    8.  
    9.     /* --- */
    10.     justify-content: space-between;
    11.     align-items: center;
    12.     
    13. }
    14.

    实现左侧个人信息

    HTML代码

    1.         <!--左侧个人信息-->
    2.         <div class="left">
    3.             <div class="card">
    4.                 <img src="1.jpeg" alt="">
    5.                 <h4>海绵宝宝养的小窝</h3>
    6.                 <a href="#">github链接</a>
    7.                 <div class="counter">
    8.                     <span>文章</span>
    9.                     <span>分类</span>
    10.                 </div>
    11.                 <div class="counter">
    12.                     <span>2</span>
    13.                     <span>1</span>
    14.                 </div>
    15.             </div>
    16.         </div>

    CSS代码

    1. .container .left{
    2.     height: 100%;
    3.     width: 200px;
    4.     /* 这是一个测试 */
    5.     /* background-color: rgb(128,0,0);  */
    6. }
    7.  
    8.  
    9. .left .card{
    10.     /* 0.8是代表透明度 */
    11.     background-color: rgba(255,255,255,0.8);
    12.     border-radius: 10px;
    13.     padding: 30px;
    14. }
    15.  
    16. .left .card img{
    17.     width: 140px;
    18.     border-radius: 50%;
    19. }
    20.  
    21. .left a{
    22.     display: block;
    23.     text-align: center;
    24.     color: rgb(128,128,128);
    25. }
    26.  
    27.  
    28. .left .counter{
    29.     display: flex;
    30.     padding: 5px;
    31.     justify-content: space-around;
    32. }

    实现博客列表

    HTML代码

    1. <!--右侧内容详情-->
    2.         <div class="right">
    3.             <!-- 博客展示 -->
    4.             <div class="blog">
    5.                 <div class="title">我的第一篇博客</div>
    6.                 <div class="date">2022-07-05</div>
    7.                 <div class="content">
    8.                     今天开始我要认真写代码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?
    9.                 </div>
    10.                 <a href="blog_content.html">查看全文 &gt;&gt; </a>
    11.             </div>
    12.             <div class="blog">
    13.                 <div class="title">我的第二篇博客</div>
    14.                 <div class="date">2022-07-05</div>
    15.                 <div class="content">
    16.                     今天开始我要认真写代码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?
    17.                 </div>
    18.                 <a href="blog_content2.html">查看全文 &gt;&gt; </a>
    19.             </div>
    20.         </div>

    CSS代码

    1. .container .right{
    2.     height: 100%;
    3.     width: 795px;
    4.     background-color: rgba(255,255,255,0.8);
    5.     /* 这是一个测试 */ 
    6.     /* background-color: rgba(255,255,255,0.8); */
    7.     border-radius: 10px;
    8. }
    9.  
    10. .blog{
    11.     width: 100%;
    12.     padding: 20px;
    13. }
    14.  
    15.  
    16. .blog .title{
    17.     /* 文本水平居中 */
    18.     text-align: center;
    19.     font-size: 20px;
    20.     padding: 10px;
    21. }
    22.  
    23. .blog .date{
    24.     text-align: center;
    25.     color: rgb(15, 105, 53);
    26.     padding: 10px;
    27. }
    28.  
    29. .blog .content{
    30.     text-indent: 2em;
    31. }
    32.  
    33. .blog a{
    34.     /* 设置成为块级元素 方便设置边框 */
    35.     width: 140px;
    36.     height: 40px;
    37.     display: block;
    38.     /* 水平居中 */
    39.     margin: 10px auto;
    40.     /* 黑色边框 实线 */
    41.     border: 2px black solid;
    42.     text-align: center;
    43.     /* 垂直居中 */
    44.     line-height: 40px;
    45.     text-decoration: none;
    46.     color: black;
    47.     /* 渐变效果 a标签 0.5秒 */
    48.     transition: all 0.5s;
    49. }
    50. /* 伪类选择器 控制光标放上去后的效果 */
    51. .blog a:hover{
    52.     background-color: #333;
    53.     color: white;
    54. }
    55.

    实现博客详情页

    引入导航栏（HTML、CSS）

    引入版心

    引入个人信息

    实现博客详情

    HTML代码

    1. <!--右侧博客内容详情-->
    2.         <div class="right">
    3.             <div class="blog-content">
    4.                 <!-- 标题 -->
    5.                 <h3>我的第一篇博客</h3>
    6.                 <div class="date">2022-07-05</div>
    7.                 <p>
    8.                     今天开始我要认真敲代码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.
    9.                 </p>
    10.                 <p>
    11.                     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.
    12.                 </p>
    13.                 <p>
    14.                     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!
    15.                 </p>
    16.             </div>
    17.         </div>

    CSS

    1. .blog-content {
    2.     padding: 30px;
    3. }
    4.  
    5. .blog-content h3{
    6.     text-align: center;
    7.     font-size: 20px;
    8. }
    9.  
    10. .blog-content .date{
    11.     text-align: center;
    12.     color: rgb(15, 105, 53);
    13.     padding : 10px ;
    14. }
    15.  
    16. .blog-content p{
    17.     text-indent: 2em;
    18.     padding: 10px;
    19. }

    实现博客登录页

    引入导航栏

    实现版心

    HTML代码

    1. <!-- 版心 -->
    2.     <div class="login-container">
    3.         
    4.         
    5.     </div>

    CSS

    1. .login-container {
    2.     width: 100%;
    3.     height: calc(100% - 50px);
    4.     display: flex;
    5.     justify-content: center;
    6.     align-items: center;
    7. }
    8.  
    9.  
    10.

    实现登录框

    HTML代码

    1. <div class="login-dialog">
    2.             <h3>登录</h3>
    3.             <div class="row">
    4.                 <span>用户名</span>
    5.                 <input type="text" id = "username">
    6.             </div>
    7.             <div class="row">
    8.                 <span>密码</span>
    9.                 <input type="password" id = "password">
    10.             </div>
    11.             <div class="row">
    12.                 <button id = "submit">提交</button>
    13.             </div>
    14.         </div>

    CSS

    1. .login-container .login-dialog{
    2.     width: 400px;
    3.     height: 350px;
    4.     background-color: rgba(255,255,255,0.8);
    5.     border-radius: 10px;
    6. }
    7. .login-container h3{
    8.     text-align: center;
    9.     font-size: 30px;
    10.     padding:  50px 0;
    11. }
    12.  
    13. .login-container .row{
    14.     height: 50px;
    15.     display: flex;
    16.     justify-content: center;
    17.     align-items: center;
    18. }
    19.  
    20. .login-container .row span{
    21.     display: block;
    22.     width: 100px;
    23.     font-weight: 700;
    24. }
    25.  
    26. #username,
    27. #password{
    28.     border: none;
    29.     outline: none;
    30.     border-radius: 10px;
    31.     text-indent: 10px;
    32.     line-height: 40px;
    33.     font-size: 24px;
    34.     width: 200px;
    35.     height: 40px;
    36. }
    37.  
    38. #submit{
    39.     width: 300px;
    40.     height: 50px;
    41.     border: none;
    42.     border-radius: 10px;
    43.     color: white;
    44.     background-color: green;
    45. }
    46.  
    47. #submit:active {
    48.     background-color: #666;
    49. }

    实现博客编辑页

    引入导航栏

    实现编辑区

    HTML代码

    1. <div class="blog-edit-container">
    2.         <form action="blog" method="post" style="height:100%">
    3.             <div class="title">
    4.                 <input type="text" placeholder="在此处输入标题" name="title" id="title">
    5.                 <!-- <button>发布文章</button> -->
    6.                 <input type="submit" value="发布文章" id="submit">
    7.             </div>
    8.             <!-- 放置 md 编辑器 -->
    9.             <div id="editor">
    10.                 <!-- 为了进行 form 的提交, 此处搞一个 textarea 多行编辑框, 借助这个编辑框来实现表单的提交 -->
    11.                 <!-- 可以设置 editor.md, 让编辑器把 markdown 内容也同步的保存到这个隐藏的 textarea 中, 从而可以进行 form 提交 -->
    12.                 <textarea name="content" style="display:none"></textarea>
    13.             </div>
    14.         </form>
    15.     </div>

    CSS

    1. .blog-edit-container {
    2.     width: 1000px;
    3.     height: calc(100% - 50px);
    4.     margin: 0 auto;
    5. }
    6.  
    7. .blog-edit-container .title {
    8.     width: 100%;
    9.     height: 50px;
    10.  
    11.     display: flex;
    12.     align-items: center;
    13.     justify-content: space-between;
    14. }
    15.  
    16. .blog-edit-container .title #title {
    17.     width: 895px;
    18.     height: 40px;
    19.     border-radius: 10px;
    20.     border: none;
    21.     outline: none;
    22.     font-size: 22px;
    23.     line-height: 40px;
    24.     padding-left: 10px;
    25.  
    26.     background-color: rgba(255, 255, 255, 0.8);
    27. }
    28.  
    29. .blog-edit-container .title #submit {
    30.     width: 100px;
    31.     height: 40px;
    32.     border-radius: 10px;
    33.     color: white;
    34.     background-color: orange;
    35.     border: none;
    36.     outline: none;
    37.     font-size: 18px;
    38. }
    39.  
    40. .blog-edit-container .title #submit:active {
    41.     background-color: #666;
    42. }
    43.  
    44. #editor {
    45.     border-radius: 10px;
    46.  
    47.     /* background-color: rgba(255, 255, 255, 0.8); */
    48.     opacity: 80%;
    49. }

    引入editor.md

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

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

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

    D:blog-system-前端\editor.md\css

    引入editor.md的依赖

    1. <link rel="stylesheet" href="editor.md/css/editormd.min.css" />
    2.     <script src="js/jquery.min.js"></script>
    3.     <script src="editor.md/lib/marked.min.js"></script>
    4.     <script src="editor.md/lib/prettify.min.js"></script>
    5.     <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中

    初始化编辑器

    1. <script>
    2.         // 初始化编辑器
    3.         let editor = editormd("editor", {
    4.             // 这里的尺寸必须在这里设置. 设置样式会被 editormd 自动覆盖掉. 
    5.             width: "100%",
    6.             // 设定编辑器高度
    7.             height: "calc(100% - 50px)",
    8.             // 编辑器中的初始内容
    9.             markdown: "# 在这里写下一篇博客",
    10.             // 指定 editor.md 依赖的插件路径
    11.             path: "editor.md/lib/",
    12.             // 此处要加上一个重要的选项, 然后 editor.md 就会自动把用户在编辑器输入的内容同步保存到 隐藏的 textarea 中了!
    13.             saveHTMLToTextarea: true,
    14.         });
    15.     </script>


     

    完~

  • 相关阅读:
    Data-Efficient Backdoor 论文笔记
    MR混合现实情景实训教学系统模拟历史情景
    苹果手机备份软件哪个好用？有哪些免费的第三方备份软件
    TCP连接
    在 SEO 中，一个好的网页必须具备哪些 HTML 标签和属性？
    【Newman+Jenkins】实施接口自动化测试
    拥抱电大新时代，助力学业攀升——广东开放大学电大搜题微信公众号助您一臂之力
    节省时间，创造价值：人工智能在工作中的实际应用
    一些思想概念（分布式 ）
    Dockerfile 镜像创建
  • 原文地址：https://blog.csdn.net/qq_59689127/article/details/125621718