1. Toy模板网首页
  2. > Toy博客

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

10月前 作者：s:103 分类：Toy博客 阅读(54) 违法举报

这篇具有很好参考价值的文章主要介绍了前端综合项目-个人博客网页设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

个人博客前端部分设计

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

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

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;
}
  1. 对html设置高度，否则其设置背景大小的时候没有参考
    • 100%的含义是，与占父类元素的比例
html {
  height: 100%;
}
  1. 设置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>1</span>
    </div>
</div>

common.css中对其进行修饰：

  • 后代选择器，每个.【class名】之间要有空格分割
  • 一些基本操作，在之前的博客已讲，就不做介绍了

补充：card的大小固定，如果设置为页面的百分百，太不合理了

.card {
  margin-top: 10px;
  height: 333px;
  width: 100%;
  background-color: rgba(255, 255, 255, 0.618);

  border-radius: 30px;
}

.card img {
  margin: 20px 40px;
  /* 上下20 左右40 */
  width: 120px;
  height: 120px;
  border-radius: 60px;
}
.card h3 {
  text-align: center;
}
.card a {
  display: block;
  text-decoration: none;
  color: rgba(251, 114, 153, 0.5);
  font-weight: 900;
  font-family: "微软雅黑";

  text-align: center;
  padding: 5px;
  margin-bottom: 20px;
}

.card .counter {
  display: flex;
  padding: 5px;
  justify-content: space-around;
}
.card .counter .h {
  font-weight: 900;
}

效果：

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

2.3.3 右侧article内容

他们的共同部分：板心~

  • 而这一部分有个重点：无论是列表还是详情，这里的内部信息可能很多，导致溢出页面

  • overflow: auto这一操作，一旦出现溢出，自动将滚动条交给这个板心，而不是交给浏览器~

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

.article {
  margin-top: 10px;
  height: calc(100% - 10px);
  width: 100%;
  background-color: rgba(255, 255, 255, 0.618);

  border-radius: 10px;
  padding: 20px;
  overflow: auto;
  /* 内容溢出，滚动条放入这里 */
}

效果：

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

3. 博客列表页

就差右侧板心了：

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

博客列表页.html中：

  • 每篇博客又是一个子元素blog，一个blog有标题日期内容，以及跳转链接（跳转到博客详情页.html）

  • 别被吓着了，content标签内的是我随便写的，打Lorem自动生成

    • 大于号不能被正常打印出来，得用转义字符&gt;
<div class="container-right">
    <div class="article">
        <div class="blog">
            <div class="title">我的第一篇博客</div>
            <div class="date">2023-05-17 23:00:00</div>
            <!-- 用lorem生产随机字符串 -->
            <div class="content">
                从今天起我要认真敲代码，写博客。 Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Pariatur veniam ad repellat maxime
                quia, eum vitae. Nobis dolores officiis fugiat est possimus animi
                hic quos minima similique vero! Dolorem, natus.
            </div>
            <a href="博客详情页.html"> 查看全文 &gt;&gt;</a>
        </div>
        <div class="blog">
            <div class="title">我的第二篇博客</div>
            <div class="date">2023-05-17 23:00:00</div>
            <!-- 用lorem生产随机字符串 -->
            <div class="content">
                从今天起我一定不会再尿床。 Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Pariatur veniam ad repellat maxime quia, eum
                vitae. Nobis dolores officiis fugiat est possimus animi hic quos
                minima similique vero! Dolorem, natus.
            </div>
            <a href="博客详情页.html"> 查看全文 &gt;&gt;</a>
        </div>
        <div class="blog">
            <div class="title">我的第三篇博客</div>
            <div class="date">2023-05-17 23:00:00</div>
            <!-- 用lorem生产随机字符串 -->
            <div class="content">
                从今天开始我要自己上厕所。 Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Pariatur veniam ad repellat maxime quia, eum
                vitae. Nobis dolores officiis fugiat est possimus animi hic quos
                minima similique vero! Dolorem, natus.
            </div>
            <a href="博客详情页.html"> 查看全文 &gt;&gt;</a>
        </div>
    </div>
</div>

列表页专门的css文件，list.css中：

  • 别忘了link， <link rel="stylesheet" href="list.css"> 

.blog {
    padding: 10px;   
}

.blog .title {
    font-weight: 900;
    font-size: 18px;
    text-align: center;


}
.blog .date {
    text-align: center;
    color: rgb(12, 54, 114);
    font-weight: 450;
    padding: 20px;
}

.blog .content {
    text-indent: 2em;
    color: rgba(0,0,0,0.618);
    /* 自动匹配的单位em！ em就是一个汉字的大小 */
}
.blog a {
    display: block;
    color: black;
    text-decoration: none;
    text-align: center;
    width: 120px;
    height: 40px;
    font-weight: 900;
    border: black 2px solid;
    line-height: 40px;
    /*当行高对于height的时候，恰好文本水平居中*/
    margin: 20px auto;
    transition: all 0.618s;
    /* 对所有的变化都缓慢持续2s
    1. 悬停于按钮
    2. 离开按钮 */
}
/* 伪类选择器 ，选中的是元素的状态，
hover就是获取鼠标悬停的状态*/
.blog a:hover {
    /*选中后的改变的属性*/
    background-color: rgb(147,210,253);
    color: rgb(76, 66, 136);
}

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

效果：

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

4. 博客详情页

就差右板心了：

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

博客详情页.html中：

  • 标题日期内容
<div class="container-right">
    <div class="article">
        <h3>我的第一篇博客</h3>
        <div class="date">2023-05-17 23:00:00</div>
        <div class="content">
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
                ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
                perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
                tempore doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid!
            </p>
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
                ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
                perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
                tempore doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid!
            </p>
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
                ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
                perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
                tempore doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid!
            </p>
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
                ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
                perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
                tempore doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid!
            </p>
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
                ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
                perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
                tempore doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid!
            </p>
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!
            </p>
            <p>
                从今天起我要认真敲代码，写博客。Lorem ipsum dolor, sit amet
                consectetur adipisicing elit. Repellendus perferendis ea
                voluptatem quae architecto. Nam aut animi, est ut, tempore
                doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid! Lorem ipsum dolor, sit amet consectetur
                adipisicing elit. Repellendus perferendis ea voluptatem quae
                architecto. Nam aut animi, est ut, tempore doloremque in ipsam
                numquam voluptate placeat non eveniet distinctio. Aliquid!Lorem
                ipsum dolor, sit amet consectetur adipisicing elit. Repellendus
                perferendis ea voluptatem quae architecto. Nam aut animi, est ut,
                tempore doloremque in ipsam numquam voluptate placeat non eveniet
                distinctio. Aliquid!
            </p>
        </div>
    </div>
</div>

在详情页专门的css文件，details.css中：

.article h3 {
    font-size: 22px;
    text-align: center;
    font-weight: 900;
    padding: 10px 0;
}
.article .date {
    text-align: center;
    color: rgb(12, 54, 114);
    font-weight: 450;
    padding: 20px;
}
.article .content p {
    text-indent: 2em;
    margin-bottom: 10px;
}
/* 如果内容太多，浏览器会出现滚动条，从而背景给滚没了 */
/* 把滚动条放入左侧板心即可*/

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

5. 博客登录页

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

画出设计稿：
前端综合项目-个人博客网页设计

博客登录页中：

<div class="login-Container">
    <div class="dialog">
        
    </div>
</div>

5.1 页面划分css设计

登录页特定的css文件，logIn.css中：

  • 因为这个要按页面居中，用弹性布局即可
  • 别问了link哦！
.login-Container {
  width: 100%;
  height: calc(100% - 50px);
  /*为了dialog能垂直水平居中*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.dialog {
  width: 600px;
  height: 400px;

  background-color: rgba(255, 255, 255, 0.618);
  border-radius: 20px;
}

效果：

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

5.2 卡片设计

在博客登录页.html中：

  • 标题，用户名输入，密码输入，登录按钮，跳转到主页
  • label优化手感
<div class="login-Container">
    <div class="dialog">
        <form action="博客列表页.html">
            <h3>登录</h3>
            <div class="row">
                <label for="username">用户名</label>
                <input type="text" id="username" />
            </div>
            <div class="row">
                <label for="password">密码</label>
                <input type="password" id="password" />
            </div>
            <div class="r">
                <input type="submit" id="submit" value="登录" />
            </div>
        </form>
    </div>
</div>

对导航栏的一些修改：

  • 头像和文字，去掉退出登录的链接
<div class="navigation">
    <!-- 头像 -->
    <img
         src="https://img1.baidu.com/it/u=4205447136,2730860147&fm=253&fmt=auto&app=138&f=JPEG?w=300&h=300"
         alt="未登录"
         />
    <div class="title">未登录</div>

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

    <a href="博客列表页.html">主页</a>
    <a href="博客编辑页.html">写博客</a>
</div>

在logIn.css中：

  • 值得注意的是，input通过标签选择器是不能有效的，因为input的样式优先级高，得用id选择器才行！
.dialog h3 {
  font-size: 24px;
  font-weight: 900;
  text-align: center;
  margin-top: 60px;
  margin-bottom: 40px;
}
.dialog .row {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.dialog .r {
  height: 50px;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin: 40px 0;
}
.row label {
  font-size: 20px;
  width: 60px;
  font-weight: 900;
}
/* input不能直接用标签选择器直接修改，优先级不够 */
#username {
  width: 400px;
  height: 45px;
  font-size: 23px;
  text-indent: 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border: rgba(251, 114, 153, 0.5) 2px solid;
}
#password {
  width: 400px;
  height: 45px;
  font-size: 23px;
  text-indent: 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.7);
  border: rgba(251, 114, 153, 0.5) 2px solid;
}
.r #submit {
  width: 270px;
  height: 40px;
  color: rgba(255, 255, 255, 0.618);
  font-weight: 900;
  background-color: rgb(251, 114, 153);
  line-height: 40px;
  text-align: center;
  border-radius: 10px;
  border: none;
  transition: all 0.618s;
}
.r #submit:hover {
  background-color: rgb(101, 94, 252);
  color: rgba(0, 0, 0, 0.618);
}

效果：

  • 谷歌的密码框不带“小眼睛”

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

6. 博客编辑页

  • 博客编辑页我们需要用到markdown编辑器，当然不需要我们自己写，而是去获得现成的，随后演示如何获取并导入！

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

画出设计稿：

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

在博客编辑页.html中：

    <div class="blog-edit-container">
      <!-- 标题编辑区 -->
      <form action="博客列表页.html">
        <div class="title">
            
        </div>
        <!-- 创建一个id为editor的div id！代表编辑器-->
        <div id="editor"></div>
      </form>
    </div>

6.1 页面划分css设计

编辑页特有的css文件，edit.css中：

  • 弹性布局水平排列去给元素留缝~
  • 别忘了link哦！
.blog-edit-container {
  width: 1000px;
  height: calc(100% - 50px);
  margin: 0 auto;
}
.blog-edit-container .title {
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

6.2 标题与提交按钮设计

在博客编辑页.html中：

  • 提交后跳转到主页
<!-- 标题编辑区 -->
<form action="博客列表页.html">
    <div class="title">
        <input type="text" id="text" />
        <input type="submit" id="submit" />
    </div>
    <!-- 创建一个id为editor的div id！-->
    <div id="editor"></div>
</form>

在edit,css中：

#text {
  height: 40px;
  width: 896px;
  border-radius: 10px;
  border: none;
  font-size: 20px;
  text-indent: 15px;
  color: rgb(251, 114, 153);
}
#submit {
  height: 40px;
  width: 100px;
  border-radius: 10px;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 900;
  background-color: rgb(251, 114, 153);
  transition: all 0.618s;
}
#submit:hover {
  background-color: rgb(101, 94, 252);
  color: rgba(0, 0, 0, 0.618);
}
.blog-edit-container form {
  height: 100%;
}

效果：

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

6.3 markdown编辑器导入

  • 这些就是一些强制要求的步骤了
6.3.1 editor.md的依赖
  • 就是导入一个jquery.js
  • 用网络地址就行了

jquery (v3.6.4) - jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

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

6.3.2 下载editor.md源码到根目录下

Editor.md - 开源在线 Markdown 编辑器 (pandao.github.io)

滑下去点击即可
前端综合项目-个人博客网页设计

  • 我将解压后放人html同级目录下，并改名为editor.md
    前端综合项目-个人博客网页设计
6.3.3 引入操作以及构造markdown编辑器对象并初始化

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

源码：

  • 如果editor.md位置或者名字跟我不一样，那么写法也不一样，保证路径能访问到对应的文件即可！
<!-- 引入jQuery依赖 -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>

<!-- 引入editor.md的依赖，路径不同，写法不同 -->
<!-- 一个css 三个js -->
<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="editor.md/lib/marked.min.js"></script>
<script src="editor.md/lib/prettify.min.js"></script>
<script src="editor.md/editormd.js"></script>

构造和初始化编辑器：

  • 这也是为什么那个div编辑器对象，必须要用id而不是class的原因

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

<script>
    // editormd函数构造编辑器对象，参数则是编辑器元素的id，以及js对象，初始化量
    // 这一步重点在于默默帮你构建了对象！
    //其他属性在这里设置就行了，因为这里的优先级会更高！
    //由于不能有-号，所以圆角矩形不能在这里设置
    // 这个构造器，默认会溢出将滚动条给markdown编辑器！
    var editor = editormd("editor", {
        width: "100%",
        height: "calc(100% - 50px)",
        markdown: "# 在这里写下一篇博客",
        path: "editor.md/lib/",
    });
</script>

在css中做额外修饰：

  • opacity去调整透明的，殃及子元素
/* 由于编辑器是多层元素覆盖的效果，所以仅仅在这里bgc调颜色是不够的 */
#editor {
  border-radius: 10px;
  /* background-color: rgba(255, 255, 255, 0.618); */
  opacity: 80%;
  /* 不是小数而是百分数
    这里设置的透明，不涉及颜色，并且殃及子元素！ */
}

效果：

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

7. 页面跳转测试

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

文章到此结束！谢谢观看
可以叫我 小马，我可能写的不好或者有错误，但是一起加油鸭🦆！

这个页面还可以做得更好看，由你接手吧！

这是我的本文章的代码地址：马HTML/博客页面 · 游离态/马拉圈2023年5月 - 码云 - 开源中国 (gitee.com)文章来源地址https://www.toymoban.com/news/detail-449768.html

到了这里，关于前端综合项目-个人博客网页设计的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包