• 博客系统前端页面

    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

    文章目录

    目录

                                                            博客系统

    前言

    一.预期效果

    博客列表页效果

    博客正文页效果

    博客登录页效果

    博客编辑页效果

    二.实现博客列表页

    实现导航栏

    实现版心

    实现个人信息

    实现博客列表

    三.实现博客正文页

    引入导航栏

    引入版心

    引入个人信息

    实现博客正文

    四.实现博客登录页

    引入导航栏

    实现版心

    实现登录框

    五.实现博客编辑页

    引入导航栏

    实现编辑区

    引入editor.md

    总结

    前言

    这几篇文章先是实现博客系统的前段部分，顺便用来巩固html,css，js知识

    提示：以下是本篇文章正文内容，下面案例可供参考

    一.预期效果

    • 博客列表页效果

    • 博客正文页效果

    • 博客登录页效果

    • 博客编辑页效果

     

    二.实现博客列表页

    注意这里的博客列表页相当于一个模板，后面的登录，编辑...都依赖于该实现的基本结构

    • 实现导航栏

    html部分：

    1.排列本是杂乱无章，引入弹性布局优点：

    子元素不再按照块元素行内元素规则排布，统一都会安排成一个横行

    子元素可以使用justify-content来控制元素在水平方向如何排列

    子元素可以使用align-item控制元素在垂直方向如何排列 

    修改后： 

    2.中间有很大的空白区域可以使用一个div来占位置，利用css来改变其宽度和高度

    3.设置导航栏高度为50px,但是浏览器窗口大小可能会变，还要设置html,body的高度根据浏览器适应浏览器窗口大小，这样我们的背景图片才能更好适应窗口

    4.注意导航栏的背景颜色应该是透明的

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <link rel="stylesheet" href="common.css">
    11.     <div class="nav">
    12.         <img src="../img/doggy.png" alt="糟糕，糟糕，图片卡主了">
    13.         <span class="title">我的博客系统span>
    14.         
    15.         <div class="spacer">div>
    16.         <a href="blog.list.html">主页a>
    17.         <a href="blog.edit.html">写博客a>
    18.         <a href="#">注销a>
    19.     div>
    20. body>
    21. html>

    css部分：

    1.  清楚浏览器的默认样式 */
    2. *{
    3.     margin: 0;
    4.     padding: 0;
    5.     box-sizing: border-box;
    6. }
    7. html,body{
    8.     height: 100%;
    9.     background-image: url(../img/cat.jpg);
    10.     background-position: center center;
    11.     background-size: cover;
    12.     background-repeat: no-repeat;
    13. }
    14. /* 上方导航栏 */
    15. .nav{
    16.     width:100%;
    17.     height: 50px;
    18.     background-color: rgba(51,51,51,0.4);
    19.     color:#fff;
    20.  
    21.     display: flex;
    22.     justify-self: flex-start;
    23.     align-items: center;
    24.  
    25.  
    26. }
    27. /* 导航栏的图标 */
    28. .nav img{
    29.     width: 40px;
    30.     height: 40px;
    31.     margin-top: 5px;
    32.     margin-left: 25px;
    33.     margin-right: 15px;
    34.     border-radius: 50%;
    35. }
    36. /* 导航栏中的占位器 */
    37. .nav .spacer{
    38.     /* 宽度为父元素的70% */
    39.     width: 70%;
    40.     height: 40px;
    41. }
    42. /* 导航栏中的按钮 */
    43. .nav a{
    44.     color:#fff;
    45.     text-decoration:none ;
    46.     padding: 0 10px;
    47. }

    • 实现版心

    有三个部分，版心体为container记录一整块版心,版心左侧为个人信息c-l ， 版心右侧c-r为博客正文这俩中间存在一定的缝隙，设置左侧右侧为圆角矩形,因为左侧右侧是div标签，独占特性，设置其遵循版心排列的弹性布局，使其能正常显示，版心整体设置宽度，上下间距根据公式calc(100% - 50px)注意这是库函数，-中间遵循蛇形命名俩边存在空格，意思是窗口大小-导航栏高度就是整个版心大小

    html部分

    1. <div class="container">
    2.         
    3.         <div class="container-left">
    4.             
    5.             <div class="card">
    6.                 
    7.                 <img src="../img/kunkun.jpg" alt="这是坤坤">
    8.                 
    9.                 <h3>西安we坤坤h3>
    10.                 <a href="#">github地址a>
    11.                 <div class=" counter">
    12.                     <span>文章span>
    13.                     <span>分类span>
    14.                 div>
    15.                 <div class=" counter">
    16.                     <span>2span>
    17.                     <span>1span>
    18.                 div>
    19.             div>
    20.         div>
    21.         
    22.         <div class="container-right">
    23.             
    24.             <div class="blog">
    25.                 <div class="title">我的第一篇博客div>
    26.                 <div class="data">2022-11-20 12.00.01div>
    27.                 <div class="desc">
    28.                     从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, laudantium voluptatem
    29.                     cupiditate distinctio fuga voluptate aspernatur soluta, minus magni eius non in. Sed aspernatur
    30.                     cumque nisi pariatur atque sit repellat.
    31.                     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi voluptatibus officiis enim iusto
    32.                     aspernatur, aperiam ipsam impedit accusantium obcaecati maiores dolores similique excepturi,
    33.                     suscipit a possimus facilis, qui asperiores saepe.
    34.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, fuga unde cupiditate libero esse
    35.                     assumenda reprehenderit quos eveniet, consequuntur necessitatibus at. Repellat est delectus ipsam
    36.                     facilis saepe tempore et? Quis.
    37.  
    38.                 div>
    39.                 <a href="blog_detail.html">查看全文 >>a>
    40.             div>
    41.             
    42.             <div class="blog">
    43.                 <div class="title">我的第一篇博客div>
    44.                 <div class="data">2022-11-20 12.00.01div>
    45.                 <div class="desc">
    46.                     从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, laudantium voluptatem
    47.                     cupiditate distinctio fuga voluptate aspernatur soluta, minus magni eius non in. Sed aspernatur
    48.                     cumque nisi pariatur atque sit repellat.
    49.                     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi voluptatibus officiis enim iusto
    50.                     aspernatur, aperiam ipsam impedit accusantium obcaecati maiores dolores similique excepturi,
    51.                     suscipit a possimus facilis, qui asperiores saepe.
    52.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, fuga unde cupiditate libero esse
    53.                     assumenda reprehenderit quos eveniet, consequuntur necessitatibus at. Repellat est delectus ipsam
    54.                     facilis saepe tempore et? Quis.
    55.  
    56.                 div>
    57.                 <a href="blog_detail.html">查看全文 >>a>
    58.             div>
    59.             
    60.             <div class="blog">
    61.                 <div class="title">我的第一篇博客div>
    62.                 <div class="data">2022-11-20 12.00.01div>
    63.                 <div class="desc">
    64.                     从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, laudantium voluptatem
    65.                     cupiditate distinctio fuga voluptate aspernatur soluta, minus magni eius non in. Sed aspernatur
    66.                     cumque nisi pariatur atque sit repellat.
    67.                     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi voluptatibus officiis enim iusto
    68.                     aspernatur, aperiam ipsam impedit accusantium obcaecati maiores dolores similique excepturi,
    69.                     suscipit a possimus facilis, qui asperiores saepe.
    70.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, fuga unde cupiditate libero esse
    71.                     assumenda reprehenderit quos eveniet, consequuntur necessitatibus at. Repellat est delectus ipsam
    72.                     facilis saepe tempore et? Quis.
    73.  
    74.                 div>
    75.                 <a href="blog_detail.html">查看全文 >>a>
    76.             div>
    77.             
    78.             <div class="blog">
    79.                 <div class="title">我的第一篇博客div>
    80.                 <div class="data">2022-11-20 12.00.01div>
    81.                 <div class="desc">
    82.                     从今天起，我要认真敲代码Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, laudantium voluptatem
    83.                     cupiditate distinctio fuga voluptate aspernatur soluta, minus magni eius non in. Sed aspernatur
    84.                     cumque nisi pariatur atque sit repellat.
    85.                     Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sequi voluptatibus officiis enim iusto
    86.                     aspernatur, aperiam ipsam impedit accusantium obcaecati maiores dolores similique excepturi,
    87.                     suscipit a possimus facilis, qui asperiores saepe.
    88.                     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, fuga unde cupiditate libero esse
    89.                     assumenda reprehenderit quos eveniet, consequuntur necessitatibus at. Repellat est delectus ipsam
    90.                     facilis saepe tempore et? Quis.
    91.  
    92.                 div>
    93.                 <a href="blog_detail.html">查看全文 >>a>
    94.             div>
    95.  
    96.  
    97.         div>
    98.     div>
    • css部分：
      1. .container{
      2.     width: 1000px;
      3.     /* 水平居中 */
      4.     margin: 0 auto;
      5.     /* 设置高度 */
      6.     height: calc(100% - 50px);
      7.     /* 为了让里面的left 和 right水平排列弹性布局 */
      8.     display: flex;
      9.     justify-content: space-between;
      10.  
      11. }
      12. .container .container-left{
      13.     height: 100%;
      14.     width: 200px;
      15.     /* background-color: rgb(128,0,0); */
      16. }
      17. .container .container-right{
      18.     height: 100%;
      19.     width: 796px;
      20.     background-color: rgb(255,255,255,0.8);
      21.     padding: 20px;
      22.     border-radius: 20px;
      23.     /* 如果内容超出范围了，自动添加滚条 */
      24.     overflow: auto;
      25. }
      26. .card img{
      27.     width: 140px;
      28.     height: 140px;
      29.     border-radius: 70px;
      30.     margin: 0px 30px;
      31. }
      32. .card h3{
      33.     text-align: center;
      34.     padding: 10px;
      35. }
      36. .card a{
      37.     /* a默认是行内元素，默认尺寸和内容是一样的 */
      38.     display: block;
      39.     text-align: center;
      40.     color: #999;
      41.     text-decoration: none;
      42.     padding:10px 0;
      43. }
      44.  
      45. .card .counter{
      46.     display: flex;
      47.     justify-content: space-around;
      48.     padding: 5px;
      49. }

      左右宽度之和1000px,中间留4px的间距，版心和左右板块之间弹性布局，给右侧板块设置滚动条，如果超出页面可以overflow:auto效果。，右侧板块每一段博客段首都有俩个字段的缩进

    这个地方也采取弹性布局的方式，counter俩边都有一定的空隙，上下内间距是5个像素

    三.实现博客正文页

    • 引入导航栏

    • 引入版心

    • 引入个人信息

    • 实现博客正文

    四.实现博客登录页

    html部分

    登录框复用了博客列表页的登录框（一样），新增加了一个表单如图

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>登录页面title>
    9.     <link rel="stylesheet" href="common.css">
    10.     <link rel="stylesheet" href="login.css">
    11. head>
    12.  
    13. <body>
    14.     <div class="nav">
    15.         <img src="../img/doggy.png" alt="糟糕，糟糕，图片卡主了">
    16.         <span class="title">我的博客系统span>
    17.         
    18.         <div class="spacer">div>
    19.         <a href="blog.list.html">主页a>
    20.         <a href="blog.edit.html">写博客a>
    21.         <a href="#">注销a>
    22.     div>
    23.     
    24.     <div class="login-container">
    25.         
    26.         <div class="dialog">
    27.             <h3>登录h3>
    28.             <div class="row">
    29.                 <span>用户名span>
    30.                 
    31.                 <input type="text" id="username">
    32.             div>
    33.             <div class="row">
    34.                 <span>密码span>
    35.                 <input type="password" id="password">
    36.             div>
    37.             <div class="row">
    38.                 <button id="login-btn">登录button>
    39.             div>
    40.         div>
    41.     div>
    42. body>
    43.  
    44. html>

     css修饰部分：

    首先复用

    common.css，

    五.实现博客编辑页

    • 引入导航栏

    • 实现编辑区

    • 引入editor.md

    总结

    提示：这里对文章进行总结：
    例如：以上就是今天要讲的内容，本文仅仅简单介绍了pandas的使用，而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。

  • 相关阅读:
    DllMain 入口点
    Unity技术手册-UGUI零基础详细教程-Button按钮
    开源Excel 处理工具库MyExcel介绍以及简单例子
    MySQL数据库：基础部分
    服务器配置openvpn，ssh连接断开
    Claude是否超过Chatgpt,成为生成式AI的一哥？
    8 迭代与列表生成式
    Java元注解 @Inherited 解析
    管理会计习题集及答案 1-4章
    Redis：事件与事务
  • 原文地址：https://blog.csdn.net/panpanaa/article/details/127970808