前端学习（7）—— HTML + CSS实现博客系统页面

news2025/6/4 0:18:32

目录

一，效果展示

二，实现博客列表页

2.1 实现导航栏

2.2 实现个人信息

2.3 实现博客列表

三，实现博客正文页

3.2 复用

3.4 实现博客正文

四，实现博客登录页

4.1 版心

4.2 登录框

五，实现博客编辑页

5.1 标题编辑项

5.2 编辑区

六，引入markdown编辑区

6.1 下载

6.2 引入

6.3 编写代码

一，效果展示

一共实现了三个页面：

首先是主页面：

然后是登录页面：

然后是博客编辑页面：

需要用到的文件如下，可以先创建好：

注：目前只实现了页面的展示，并没有使用js实现页面行为，因为账号管理、文章内容存储等需要后端服务器支持，我们以后再实现

该文章的代码码云：博客 · 小堃学编程/前端 - 码云 - 开源中国

二，实现博客列表页

2.1 实现导航栏

导航栏就是最上面那灰色的一条

①html结构设计

 导航栏我们用一个div即可，其中包括左边的logo和标题，还有右边三个超链接：

    <!--上方导航栏-->
    <div class="nav">
        <img src="../img/logo.png" alt="">
        <span>我的博客系统</span>
        <span class="space"></span>
        <a href="blog_list.html">主页</a>
        <a href="blog_edit.html">写博客</a>
        <a href="https://www.baidu.com">注销</a>
    </div>

②css样式设计

css代码如下，包含在common.css文件里，其中部分代码作用已在注释中给出： 

* {
    margin: 0; /*消除浏览器默认样式*/
    padding: 0px;
    box-sizing: border-box; /*让内部margin不要撑大盒子*/
}

/*导航栏样式---------------*/
html, body{
    height: 100%; /*让页面布满浏览器*/
    width: 100%; 
    min-width: 1550px; /*设置最小px，防止浏览器页面缩小时导致内容混乱，会生成滑动条*/ 
    min-height: 700px;
    background-image: url(../img/1.png); /*设置背景*/
    background-repeat: no-repeat; /*取消背景图片平铺*/
    background-size: cover; /*背景铺满浏览器页面*/
    margin: 0 auto;
}

.nav{
    width: 100%;
    height: 50px;
    background-color: gray; /*设置灰色导航栏*/
    /*通过弹性布局，使文字显示在中间*/
    display: flex; /*水平方向的居中*/
    justify-content: left; /*让元素水平方向靠左布局*/
    align-items: center; /*垂直方向居中*/
    color:white; /*设置我的博客系统颜色为白色*/
}

.nav .space{
    width: 70%; /*让主题和右边三个链接分开*/
}

/* 设置logo图片大小 */
.nav img{
    width: 40px;
    height: 40px;
    border-radius: 50%; /*变成圆形*/
    /* 设置上下左右边距，让logo图标显示在中间 */
    margin-left: 8px;
    margin-right: 8px;
    margin-top: 6px;
}

.nav a{
    color: white;
    text-decoration: none; /*取消超链接下划线*/
    margin-left: 8px; /*设置内边距，让选项分开*/
    margin-right: 30px;
}

 

记得在html文件里包含CSS文件：

2.2 实现个人信息

①html结构设计

<!--个人信息和博客列表我们用一个div来搞-->
    <div class="container">
        <div class="container-left"> <!--个人信息-->
            <div class="card">
                <img src="../img/hello.png" alt="">
                <h3>你好</h3>
                <a href="https://gitee.com/start-coding-from-scratch">gitee地址</a>
                <div class="counter">
                    <span>文章</span>
                    <span>分类</span>
                </div>
                <div class="counter">
                    <span>1</span>
                    <span>2</span>
                </div>
            </div>
        </div>
        <div class="container-right"> <!--博客列表-->
           
        </div>
    </div>

  • 我们把个人卡片和博客列表用同一个div设置，然后再在这个div里面放左右两个div代表卡片和列表 

②css样式设计

首先我们先搞清楚左右这两个区域是怎样安排的，可以使用颜色覆盖的办法先看下左右布局：

下面是个人卡片css代码，也是包含在common.css 文件里面 

/* 2，设置个人信息卡片样式*/
.card{
    width: 60%; /*原来的card是把左边占完了的，但是实际效果中左边有一点留白，所以我们让card只占据60%的空间*/
    height: 40%;
    background-color: rgba(255, 255, 255, 0.5); /*最后一个数字表示透明度 */
    margin-left: 180px; /*设置左边距，让card靠右显示*/
    margin-right: 10px;
    border-radius: 15px; /*设置圆角*/
    margin-top: 10px;
}

.card img{
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: block;
    margin: 0 auto; /*让图片在浏览器的全屏和小屏环境下都居中显示*/
    margin-top: 20px;
}

.card h3{
    text-align: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

.card a{
    display: block; /*把a链接变成一个块级元素，便于控制*/
    text-align: center;
    color:gray;
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 10px;
}

.card .counter{
    display: flex; /*进入弹性布局*/
    justify-content: space-around;
    margin-top: 20px;
}

2.3 实现博客列表

①html结构设计

<div class="container-right"> <!--博客列表-->
            <div class="blog">
                <div class="title">
                    这是第一篇博客
                </div>
                <div class="date">
                    2025-5-28
                </div>
                <div class="desc">
                    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                </div>
                <a class="detail" href="./blog_content.html?blog=1">查看详情&gt;&gt;</a>
            </div>
        </div>

②css样式设计

.blog {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px; /*设置圆角*/
    margin-top: 20px;
}

.blog .title{
    font-size:20px; /*设置博客标题大小得粗细*/
    font-weight: 900;
    text-align: center; /*让标题居中*/
    padding-top: 20px; /*设置上边距*/
}

.blog .date{
    color: green;
    padding-bottom: 10px; /*设置日期下边距*/
    padding-top: 10px;
    text-align: center; /*让日期也居中*/
}

.blog .desc{
    text-indent: 2em; /*设置缩进*/
    line-height: 20px; /*设置行高*/
    margin-top: 20px; /*设置上边距*/
}

.blog .detail{
    display: block; /*把超链接变成块级元素，方便操作*/
    color: black;
    text-align: center; /*使超链接居中*/
    width: 140px;
    height: 40px;
    margin: 10px auto 0px auto; /*上边距10px，右和左是auto，下边距是0px*/
    border: 2px solid black; /*设置边框为2px，使用实线，颜色是黑色*/
    line-height: 40px; /*让边框里的文字显示在距下位置，去掉这一行则显示在上面*/
}

.blog .detail:active{
    color:blue; /*使用伪类选择器给链接加上一些效果*/
}

三，实现博客正文页

3.2 复用

首先看下效果：

背景，导航栏和左边个人信息卡片是和上面一样的，我们直接搬过来即可

主要是右边博客页面改变了，所以我们单独实现右边的博客页面即可

3.4 实现博客正文

①html结构设计

<div class="container-right"> <!--博客列表-->
            <div class="blog">
                <div class="title">
                    这是第一篇博客
                </div>
                <div class="date">
                    2025-5-28
                </div>
                <div class="desc">
                    <p>
                        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                    </p>
                    <p>
                        你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                    </p>
                </div>
            </div>
        </div>

html和前面是一样的，为了方便演示我们可以在正文位置多加一些内容，效果如下：

②css样式设计

下面代码在content.css文件中： 

/* 3，设置博客列表样式*/
.blog {
    width: 100%;
    height: calc(100% - 50px); /*用整个页面得像素减去导航的像素即可*/
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 15px; /*设置圆角*/
    margin-top: 20px;
    overflow: auto; /*内容很多时出现滚动条*/
}

.blog .title{
    font-size:20px; /*设置博客标题大小得粗细*/
    font-weight: 900;
    text-align: center; /*让标题居中*/
    padding-top: 20px; /*设置上边距*/
}

.blog .date{
    color: green;
    padding-bottom: 10px; /*设置日期下边距*/
    padding-top: 10px;
    text-align: center; /*让日期也居中*/
}

.blog .desc{
    text-indent: 2em; /*设置缩进*/
    line-height: 20px; /*设置行高*/
    margin-top: 20px; /*设置上边距*/
}

四，实现博客登录页

4.1 版心

首先看下效果：

可以看到导航栏和背景啥的都没变，就是中间的登录框，我们需要单独实现一下，像导航栏和html和css代码也是直接复用即可 

4.2 登录框

①html结构设计

 <div class="login-container">
        <div class="login-dialog"> <!--外面的大会话框-->
            <h3>登录</h3>
            <div class="row">
                <span>用户名</span>
                <input class="username" type="text" name="" id="">
            </div>
            <div class="row">
                <span>密码</span>
                <input class="password" type="text" name="" id="">
            </div>
            <div class="row">
                <button>提交</button>
            </div>
        </div>
    </div>

 

②css样式设计

* {
    margin: 0; /*消除浏览器默认样式*/
    padding: 0px;
    box-sizing: border-box; 
}

.login-container {
    height: calc(100% - 50px);
    width: 100%;
    display: flex; /*进入弹性布局*/
    justify-content: center; /*水平方向居中*/
    align-items: center; /*垂直方向居中*/
}

.login-dialog{
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

h3{
    text-align: center; /*直接让标题居中*/
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 25px;
}

.row {
    display: flex; /*进入弹性布局，好让元素在水平和垂直方向都居中*/
    justify-content: center;
    align-items: center;
    height: 80px;
}

.row span{
    font-size: 20px; /*设置字体大小*/
    width: 100px
}

.row input {
    height: 40px;
    width: 250px;
    border-radius: 9px;
    font-size: 20px; /*设置输入时的字体大小*/
    border: none; /*去掉边框*/
}

.row button{
    background-color: rgb(2, 159, 2);
    width: 150px;
    height: 40px;
    border-radius: 9px;
    font-size: 20px;
}

五，实现博客编辑页

5.1 标题编辑项

导航栏是一样的，不再赘述，下面的编辑页面我们也先暂时不管，先来搞定标题编辑项：

①html结构设计

    <div class="edit-blog-container">
        <div class="title">
            <input type="text">
            <button>发布文章</button>
        </div>
        <div id="editor">
        </div>
    </div>

②css样式设计

* {
    margin: 0; /*消除浏览器默认样式*/
    padding: 0px;
    box-sizing: border-box; 
}

.login-container {
    height: calc(100% - 50px);
    width: 100%;
    display: flex; /*进入弹性布局*/
    justify-content: center; /*水平方向居中*/
    align-items: center; /*垂直方向居中*/
}

.login-dialog{
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 10px;
}

h3{
    text-align: center; /*直接让标题居中*/
    margin-top: 20px;
    margin-bottom: 10px;
    font-size: 25px;
}

.row {
    display: flex; /*进入弹性布局，好让元素在水平和垂直方向都居中*/
    justify-content: center;
    align-items: center;
    height: 80px;
}

.row span{
    font-size: 20px; /*设置字体大小*/
    width: 100px
}

.row input {
    height: 40px;
    width: 250px;
    border-radius: 9px;
    font-size: 20px; /*设置输入时的字体大小*/
    border: none; /*去掉边框*/
}

.row button{
    background-color: rgb(2, 159, 2);
    width: 150px;
    height: 40px;
    border-radius: 9px;
    font-size: 20px;
}

5.2 编辑区

对于编辑区，我们其实没必要自己写一个，直接引入即可，可以先打开这个网站：Editor.md - 开源在线 Markdown 编辑器（可能需要梯子）

六，引入markdown编辑区

6.1 下载

首先打开上面的网页，打开后往下滑找到GitHub下载：

下载好后是一个压缩包，解压后是一个文件夹，然后将该文件夹命名为“editor.md”，然后将该文件夹移到项目的html目录下：

然后我们创建一个人js文件夹，就上面图片那个，然后在里面创建一个“jquery.min.js”文件：

然后就是填充这个文件里的内容，首先回到上面的那个网站，滑倒最上，打开“简单示例”：

 然后就是这样一个页面，此时直接鼠标右键打开网页源代码：

 打开后找到下面内容：

这个就是我们前面在js文件夹里创建的那个文件，点开后：

直接 Ctrl + A 选中全部内容，复制到我们本地的 jquery.min.js 文件中，就完成了下载步骤了 

6.2 引入

直接在blog_edit.html文件中添加下列代码：

<link rel="stylesheet" href="editor.md/css/editormd.min.css" />
<script src="js/jquery.min.js"></script>
<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>

6.3 编写代码

引入之后就是使用了，添加下面代码即可：

<script>
    let edit = editormd('editor', {
        width:"100%",
        height: "calc(100% - 50px)",
        path: "./editor.md/lib/"
    })
    //第一个参数表示我们要把 markdown 放到哪里
    //第二个参数以结构化数据传入参数
</script>

保存后就能在页面上显示markdown编辑区了： 

附：就是上面的“在这里开始编辑。。。”原版是英文，可以打开这个文件进行修改：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2395697.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

RuoYi前后端分离框架实现前后端数据传输加密（二）之前端篇

RuoYi前后端分离框架实现前后端数据传输加密（二）之前端篇

一、背景 本文是RuoYi前后端分离框架实现前后端数据传输加密（一）之后端篇文章配套的，主要介绍前端对自定义字段传输加密的实现，两篇文章结合可以完整的完成RuoYi前后端分离框架对API通信过程中实现自定义字段加密传输。前端的加解密实现，不涉及到界面的修改，仅仅是方法的…
阅读更多...
基于视觉的车道线检测完整代码：让驾驶更安全的开源解决方案

基于视觉的车道线检测完整代码：让驾驶更安全的开源解决方案

基于视觉的车道线检测完整代码&#xff1a;让驾驶更安全的开源解决方案 【下载地址】基于视觉的车道线检测完整代码 这是一个基于视觉的车道线检测开源项目&#xff0c;提供完整的代码示例&#xff0c;采用滑动窗口算法实现。项目通过逐行扫描图像&#xff0c;精准识别曲线车道…
阅读更多...
鸿蒙仓颉开发语言实战教程：自定义tabbar

鸿蒙仓颉开发语言实战教程：自定义tabbar

大家周末好呀&#xff0c;今天继续分享仓颉语言开发商城应用的实战教程&#xff0c;今天要做的是tabbar。 大家都知道ArkTs有Tabs和TabContent容器&#xff0c;能够实现上图的样式&#xff0c;满足基本的使用需求。而仓颉就不同了&#xff0c;它虽然也有这两个组件&#xff0c;…
阅读更多...
28 C 语言作用域详解：作用域特性（全局、局部、块级）、应用场景、注意事项

28 C 语言作用域详解：作用域特性（全局、局部、块级）、应用场景、注意事项

1 作用域简介 作用域定义了代码中标识符&#xff08;如变量、常量、数组、函数等&#xff09;的可见性与可访问范围&#xff0c;即标识符在程序的哪些位置能够被引用或访问。在 C 语言中&#xff0c;作用域主要分为三类&#xff1a; 全局作用域局部作用域块级作用域 需注意&am…
阅读更多...
MySQL 事务解析

MySQL 事务解析

1. 事务简介 事务&#xff08;Transaction&#xff09; 是一组操作的集合&#xff0c;它是一个不可分割的工作单位&#xff0c;事务会把所有的操作作为一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 经典案例&#xff1…
阅读更多...
题海拾贝：压缩字符串

题海拾贝：压缩字符串

Hello大家好&#xff01;很高兴我们又见面啦&#xff01;给生活添点passion&#xff0c;开始今天的编程之路&#xff01; 我的博客&#xff1a;<但凡. 我的专栏&#xff1a;《编程之路》、《数据结构与算法之美》、《题海拾贝》、《C修炼之路》 欢迎点赞&#xff0c;关注&am…
阅读更多...
振动力学的三类基本问题

振动力学的三类基本问题

振动问题的分类依赖于分类的出发点&#xff0c;本文从系统论的角度来分析振动问题的分类。如图1&#xff0c;一个振动系统&#xff0c;包括三个方面&#xff1a;输入、系统特性&#xff08;或称为系统模型&#xff09;、输出。其中&#xff0c;输入指外界载荷&#xff0c;包括力…
阅读更多...
移动端 UI自动化测试学习之Appium框架（包含adb调试工具介绍）

移动端 UI自动化测试学习之Appium框架（包含adb调试工具介绍）

文章目录 前言adb调试工具adb组成常用命令获取程序的包名和界面名文件传输发送文件到手机从手机中拉取文件 获取app启动时间获取手机日志其他命令 Appium 简介工作原理图 环境搭建安装客户端库&#xff08;appium lib&#xff09;安装Appium Server安装JDK&#xff08;自行下载…
阅读更多...
CS144 - Lecture 2

CS144 - Lecture 2

CS144 - Lecture 1 TCP 这里就简单讲了一下它的基本性质&#xff0c;没啥好说的 UDP 提供不可靠的传输服务&#xff0c;我们的 DNS 服务和 DHCP 都是用的 UDP 协议。 对于 DNS 我们只是单纯地向 DNS 服务器发送域名&#xff0c;然后返回一个 IP&#xff0c;如果还需要建立…
阅读更多...
B站视频下载器 v1.0.4｜免登录下载1080P视频

B站视频下载器 v1.0.4｜免登录下载1080P视频

核心亮点 ✅ 无需登录下载1080P高清视频✅ 支持Windows/macOS双平台✅ 纯净无广告完全免费✅ 可单独下载视频/音频/弹幕/字幕/封面 三步极简操作 粘贴B站视频链接选择保存位置点击「开始下载」 特色功能 独立下载选项&#xff08;视频/音频/弹幕/字幕/封面&#xff09;登录…
阅读更多...
AIGC学习笔记（8）——AI大模型开发工程师

AIGC学习笔记（8）——AI大模型开发工程师

文章目录 AI大模型开发工程师007 LangChain之Model IO模块1 Model IO核心概念2 Model IO代码实战什么是LCEL&#xff1f;ModelModel的分类LLMsChatModel PromptPrompt templatesExample selectorsOutput parsers AI大模型开发工程师 007 LangChain之Model IO模块 1 Model IO核…
阅读更多...
[蓝桥杯]剪格子

[蓝桥杯]剪格子

剪格子 题目描述 如下图所示&#xff0c;3 x 3 的格子中填写了一些整数。 我们沿着图中的红色线剪开&#xff0c;得到两个部分&#xff0c;每个部分的数字和都是 60。 本题的要求就是请你编程判定&#xff1a;对给定的 mnmn 的格子中的整数&#xff0c;是否可以分割为两个部…
阅读更多...
明远智睿SSD2351开发板：语音机器人领域的变革力量

明远智睿SSD2351开发板：语音机器人领域的变革力量

在人工智能快速发展的今天&#xff0c;语音机器人逐渐成为人们生活和工作中的得力助手。明远智睿SSD2351开发板凭借强大性能与丰富功能&#xff0c;为语音机器人的发展注入新动力&#xff0c;成为该领域的变革力量。 SSD2351开发板的四核1.4GHz处理器具备强劲的运算性能&#x…
阅读更多...
Co-IP—验证蛋白互作的不二之选

Co-IP—验证蛋白互作的不二之选

蛋白互作在细胞生命活动中起着至关重要的作用&#xff0c;并在不同的时空层面上参与多种细胞活动&#xff0c;因此研究蛋白互作对于理解分子调控网络至关重要。而在植物中筛选到潜在的互作蛋白后&#xff0c;大多数情况下&#xff0c;获得表达两种蛋白的稳定转化植株费时又费力…
阅读更多...
数据可视化（第4、5、6次课）

数据可视化（第4、5、6次课）

Matplotlib 折线图 import numpy as np import matplotlib.pyplot as plt import matplotlib # 配置中文格式——保证图中出现中文的时候不会乱码 matplotlib.rcParams[font.sans-serif][SimHei] matplotlib.rcParams[axes.unicode_minus]False # 绘图 x np.linspace(0,2*np…
阅读更多...
DAY 18 推断聚类后簇的类型

DAY 18 推断聚类后簇的类型

目录 DAY 18 推断聚类后簇的类型1.推断簇含义的2个思路&#xff1a;先选特征和后选特征2.通过可视化图形借助ai定义簇的含义3.科研逻辑闭环:通过精度判断特征工程价值作业&#xff1a;参考示例代码对心脏病数据集采取类似操作&#xff0c;并且评估特征工程后模型效果有无提升。…
阅读更多...
结合源码分析Redis的内存回收和内存淘汰机制，LRU和LFU是如何进行计算的？

结合源码分析Redis的内存回收和内存淘汰机制，LRU和LFU是如何进行计算的？

Redis 内存回收 1. 过期 key 处理 Redis 之所以性能强&#xff0c;最主要的原因就是基于内存存储。然而单节点的 Redis 其内存大小不宜过大&#xff0c;会影响持久化或主从同步性能。我们可以通过修改配置文件来设置Redis的最大内存&#xff1a; 当内存使用达到上限时&#…
阅读更多...
ESG体系

ESG体系

文字来自腾讯元宝 ESG是什么&#xff1f; ESG体系是一套综合评估企业在环境&#xff08;Environmental&#xff09;、社会&#xff08;Social&#xff09;和治理&#xff08;Governance&#xff09; 三个维度表现的非财务绩效标准&#xff0c;旨在衡量企业可持续发展能力和长期…
阅读更多...
华为深度学习面试手撕题：手写nn.Conv2d()函数

华为深度学习面试手撕题：手写nn.Conv2d()函数

题目 只允许利用numpy包&#xff0c;实现Pytorch二维卷积函数nn.Conv2d() 解答 此代码考察二维卷积的概念&#xff0c;详见&#xff1a; 6.2. 图像卷积 — 动手学深度学习 2.0.0 documentation 6.3. 填充和步幅 — 动手学深度学习 2.0.0 documentation 6.4. 多输入多输出通…
阅读更多...
归一化相关

归一化相关

归一化相关问题 归一化方式Batch NormalizationLayer NormalizationInstance NormalizationGroup NormalizationRMSNorm（Root Mean Square Layer Normalization）:RMSNorm 和 LayerNorm区别？归一化方式 Batch Normalization 在每一层的输入进行归一化处理，使其在每个批次内…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023