前端综合项目-个人博客网页设计

个人博客前端部分设计

文章目录

• 前端综合项目-个人博客网页设计
• • 1. 预计效果
  • 2. 公共样式设计
  • • 2.1 背景设计
    • 2.2 导航栏设计
    • 2.3 博客列表页和博客详情页的共同内容
    • • 2.3.1 页面划分css设计
      • 2.3.2 左侧card内容
      • 2.3.3 右侧article内容
  • 3. 博客列表页
  • 4. 博客详情页
  • 5. 博客登录页
  • • 5.1 页面划分css设计
    • 5.2 卡片设计
  • 6. 博客编辑页
  • • 6.1 页面划分css设计
    • 6.2 标题与提交按钮设计
    • 6.3 markdown编辑器导入
    • • 6.3.1 editor.md的依赖
      • 6.3.2 下载editor.md源码到根目录下
      • 6.3.3 引入操作以及构造markdown编辑器对象并初始化
  • 7. 页面跳转测试

前端综合项目-个人博客网页设计

1. 预计效果

从零设计一个页面太难了，我们可以通过预预计的效果去写代码实现！

• 总不能没头没脑的边写边设计吧，总得有个参考
• 前端知识不做赘述了，大家可以去看看我之前写的前端博客

这只是我的设计，css更多定制内容，您可以灵活变通！

我的博客系统分为四个页面：

1. 博客列表页
2. 博客详情页
3. 博客登录页
4. 博客编辑页

博客列表页

博客详情页

博客登录页

博客编辑页

• 依次建立四个html文件：

• 我用的是外部样式的css写法
• 为每个html建立各自的css文件去定制特别的内容

• 四个页面显然是有重复的样式的，建立一个公共的css文件~

2. 公共样式设计

2.1 背景设计

• 在common.css文件中

1. 去除浏览器默认样式，省去一些意料之外的麻烦

* {
   
   
  box-sizing: border-box;
  /* 个别的标签有特殊要求
    只需要层叠这个效果就行了 */
  padding: 0;
  margin: 0;
}

2. 对html设置高度，否则其设置背景大小的时候没有参考
   • 100%的含义是，与占父类元素的比例

html {
   
   
  height: 100%;
}

3. 设置body背景即可，这样所有的html元素都叠在其上了

body {
   
   
  background-image: url(海.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  /*尽可能填满body,在不改变比例的情况下是contain，这个是一定会填满*/
  background-size: cover;
  /*body得设置高度才能正确显示，这是规定，没有为什么*/
  /* 我也不知道为什么刚才就显示的出来，可能是原本不对背景进行大小要求，位置要求
        默认以图片原大小为准  -
    要求背景大小和位置则需要body的高度作为参考，才能得到正确判断！！！ */
  height: 100%;
  /* 100%当前元素跟父元素一样高 */
}

效果：

• css文件记得要link进来！

2.2 导航栏设计

• 本文章的主思想就是先一个大的div套住，作为一个板心，再向版心里面写div等一块一块的元素
  • 这样设计的话，可以让各个模块尽量的不干扰
  • 让一个模块里面的元素“内斗”
    • 内层元素的全世界，就是其父元素

• 依照参考图，分为头像+文字+主页+写博客+退出
  • 主页：跳转到博客列表页
  • 写博客：跳转到博客编辑页
  • 退出：跳转到博客登录页

在博客列表页.html中：

<div class="navigation">
    <!-- 头像 -->
    <img src="病人.png" alt="病人" />
    <div class="title">我的博客系统</div>

    <div class="space"></div>

    <a href="博客列表页.html">主页</a>
    <a href="博客编辑页.html">写博客</a>
    <a href="博客登录页.html">退出登录状态</a>
</div>

效果：

• css内未对此进行修饰

现在，在common.css文件中去修饰它：

1. 栏： 高度50px，字粗默认300，设置字体，字体颜色白，背景颜色透明深灰，弹性布局，子元素相当于这个栏垂直居中
2. 图片： 40px*40px的，左外边距30px，有外边距10px
3. 超链接： 透明白粗体，去除下划线，左右内边距10px
   • 内边距是为了增加顾客体验，增加点击范围
4. space： 导航链接应该偏右侧才对
   • space是一个标签，空的，占位置而已，这里设置宽度占70%的栏宽

.navigation {
   
   
  height: 50px;

  font-weight: 300;
  font-family: "Courier New", Courier, monospace;
  color: white;

  background-color: rgba(50, 50, 50, 0.618);
  display: flex;
  align-items: center;
}
.navigation img {
   
   
  width: 40px;
  height: 40px;
  margin-left: 30px;
  margin-right: 10px;

  border-radius: 20px;
}
.navigation a {
   
   
  color: rgba(255, 255, 255, 0.7);
  font-weight: 900;
  font-family: "微软雅黑";

  text-decoration: none;
  padding: 0px 10px;
  /* 按偏了也能选中，扩大点击范围， 更加号的体验*/
}

.navigation .space {
   
   
  width: 70%;
}

效果：

2.3 博客列表页和博客详情页的共同内容

画出设计稿：

在博客列表页.html中：

<!-- 页面主体 -->
<div class="container">
    <div class="container-left">
        <div class="card">
		
        </div>
    </div>
    <div class="container-right">
        <div class="article">

        </div>
    </div>

</div>

2.3.1 页面划分css设计

• 宽度设计为固定宽
• 注意：由于导航栏的存在，这里container不应该height设置为100%，而是要设置为calc(100% - 50px)
  • calc是css的一种语法（类似函数的用），可以计算（100% - 50px）的减法操作
  • 注意“-”左右有空格，这是为了与元素命名区分
  • （css是脊柱命名法：XXX-XXX）

.container {
   
   
  /* 固定宽度 */
  width: 1000px;
  margin: 0 auto;
  height: calc(100% - 50px);

    /*开启弹性布局，水平排列为等距排列，左右不留空*/
  display: flex;
  justify-content: space-between;
}

/* 增加可读性 */
.container .container-left {
   
   
  height: 100%;
  width: 20%;
}

/* 设置为79%留出一条缝 */
.container .container-right {
   
   
  height: 100%;
  width: 79%;
}

2.3.2 左侧card内容

• 头像，名称，码云链接，文章信息

<div class="card">
    <img src="病人.png" alt="病人" />
    <h3>s:103</h3>
    <a target="_blank" href="https://gitee.com/carefree-state"
       >我的码云链接</a
        >
    <div class="counter">
        <span class="h">文章</span>
        <span class="h">分类</span>
    </div>

    <div class="counter">
        <span>3</span>
        <span