2024年Web前端最新前端综合项目-个人博客网页设计，web开发平台

2401_84434331

已于 2024-05-06 10:20:20 修改

阅读量669

点赞数 28

分类专栏：程序员文章标签：前端

于 2024-05-06 10:20:18 首次发布

本文链接：https://blog.csdn.net/2401_84434331/article/details/138485313

版权

程序员专栏收录该内容

187 篇文章 0 订阅

订阅专栏

css

1，盒模型
2，如何实现一个最大的正方形
3，一行水平居中，多行居左
4，水平垂直居中
5，两栏布局，左边固定，右边自适应，左右不重叠
6，如何实现左右等高布局
7，画三角形
8，link @import导入css
9，BFC理解

js

1，判断 js 类型的方式
2，ES5 和 ES6 分别几种方式声明变量
3，闭包的概念？优缺点？
4，浅拷贝和深拷贝
5，数组去重的方法
6，DOM 事件有哪些阶段？谈谈对事件代理的理解
7，js 执行机制、事件循环
8，介绍下 promise.all
9，async 和 await,
10，ES6 的 class 和构造函数的区别
11，transform、translate、transition 分别是什么属性？CSS 中常用的实现动画方式,
12，介绍一下rAF(requestAnimationFrame)
13，javascript 的垃圾回收机制讲一下,
14，对前端性能优化有什么了解？一般都通过那几个方面去优化的？

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

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

<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自动生成
- 大于号不能被正常打印出来，得用转义字符>

<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源码到根目录下

css

js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务](https://bbs.csdn.net/topics/618166371)

在这里插入图片描述

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

css

[外链图片转存中…(img-VZ38YHcT-1714962000530)]

js

[外链图片转存中…(img-sAWwDJQn-1714962000530)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84434331

关注

28
点赞
踩
18

收藏

觉得还不错? 一键收藏
0
评论
2024年Web前端最新前端综合项目-个人博客网页设计，web开发平台

11，transform、translate、transition 分别是什么属性？11，transform、translate、transition 分别是什么属性？14，对前端性能优化有什么了解？14，对前端性能优化有什么了解？14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,13，javascript 的垃圾回收机制讲一下,13，javascript 的垃圾回收机制讲一下,别被吓着了，content标签内的是我随便写的，5，两栏布局，左边固定，右边自适应，左右不重叠。
复制链接

扫一扫