欢迎使用CSDN-markdown编辑器

最新推荐文章于 2024-08-16 10:21:04 发布
最新推荐文章于 2024-08-16 10:21:04 发布
阅读量405 收藏
点赞数
分类专栏： css3 文章标签： css3

欢迎使用Markdown编辑器写博客

本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦：

  • Markdown和扩展Markdown简洁的语法
  • 代码块高亮
  • 图片链接和图片上传
  • LaTex数学公式
  • UML序列图和流程图
  • 离线写博客
  • 导入导出Markdown文件
  • 丰富的快捷键

快捷键

  • 加粗 Ctrl + B
  • 斜体 Ctrl + I
  • 引用 Ctrl + Q
  • 插入链接 Ctrl + L
  • 插入代码 Ctrl + K
  • 插入图片 Ctrl + G
  • 提升标题 Ctrl + H
  • 有序列表 Ctrl + O
  • 无序列表 Ctrl + U
  • 横线 Ctrl + R
  • 撤销 Ctrl + Z
  • 重做 Ctrl + Y

Markdown及扩展

Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成格式丰富的HTML页面。 —— [ 维基百科 ]

使用简单的符号标识不同的标题，将某些文字标记为粗体或者斜体，创建一个链接等，详细语法参考帮助？。

本编辑器支持 Markdown Extra , 　扩展了很多好用的功能。具体请参考Github.

表格

Markdown　Extra　表格语法：

项目价格
Computer$1600
Phone$12
Pipe$1

可以使用冒号来定义对齐方式：

项目价格数量
Computer1600 元5
Phone12 元12
Pipe1 元234

定义列表

Markdown　Extra　定义列表语法： 项目１ 项目２
定义 A
定义 B
项目３
定义 C

定义 D

定义D内容

代码块

代码块语法遵循标准markdown代码，例如：

@requires_authorization
def somefunc(param1='', param2=0):
    '''A docstring'''
    if param1 > param2: # interesting
        print 'Greater'
    return (param2 - param1 + 1) or None
class SomeClass:
    pass
>>> message = '''interpreter
... prompt'''

脚注

生成一个脚注1.

目录

用 [TOC]来生成目录：

数学公式

使用MathJax渲染LaTex 数学公式，详见math.stackexchange.com.

  • 行内公式，数学公式为： Γ(n)=(n−1)!∀n∈N 。
  • 块级公式：

x=−b±b2−4ac−−−−−−−√2a

更多LaTex语法请参考 这儿.

UML 图:

可以渲染序列图：

Created with Raphaël 2.1.0 张三 张三 李四 李四 嘿，小四儿, 写博客了没? 李四愣了一下，说： 忙得吐血，哪有时间写。

或者流程图：

Created with Raphaël 2.1.0 开始 我的操作 确认？ 结束 yes no
  • 关于 序列图 语法，参考 这儿,
  • 关于 流程图 语法，参考 这儿.

离线写博客

即使用户在没有网络的情况下，也可以通过本编辑器离线写博客（直接在曾经使用过的浏览器中输入write.blog.csdn.net/mdeditor即可。Markdown编辑器使用浏览器离线存储将内容保存在本地。

用户写博客的过程中，内容实时保存在浏览器缓存中，在用户关闭浏览器或者其它异常情况下，内容不会丢失。用户再次打开浏览器时，会显示上次用户正在编辑的没有发表的内容。

博客发表后，本地缓存将被删除。　

用户可以选择 把正在写的博客保存到服务器草稿箱，即使换浏览器或者清除缓存，内容也不会丢失。

注意：虽然浏览器存储大部分时候都比较可靠，但为了您的数据安全，在联网后，请务必及时发表或者保存到服务器草稿箱。

浏览器兼容

  1. 目前，本编辑器对Chrome浏览器支持最为完整。建议大家使用较新版本的Chrome。
  2. IE９以下不支持
  3. IE９，１０，１１存在以下问题
    1. 不支持离线功能
    2. IE9不支持文件导入导出
    3. IE10不支持拖拽文件导入




面包屑

<style type="text/css">
    * { margin: 0; padding: 0; }
    body { font: 14px Arial, Helvetica; color: #444; margin: 50px auto; padding: 50px; width: 80%; }
    ul { list-style: none outside none; margin-bottom: 15px; }
    ul li { float: left; display: inline; }
    ul a { text-decoration: none; }
    /*Breadcrumbs Zero*/
    #breadcrumbs-zero { overflow: hidden; border: 1px solid #c9c9c9; width: 70%; }
    #breadcrumbs-zero li { float: left; color: #777; padding-left: 1em; }
    #breadcrumbs-zero a { background: url("1.png") no-repeat right center; float: left; padding: 1em 1.5em 1em 0; color: #777; }
    #breadcrumbs-zero a:hover { color: #222; }
    #breadcrumbs-zero li.current { padding: 1em 1.5em 1em 1em; font-weight: bold; color: #222; }

    #breadcrumbs-one {
background-color: #eee;
border: 1px solid #ccc;
border-color: #f5f5f5 #e5e5e5 #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-border-radius: 5px;
border-radius: 5px;
overflow: hidden;
width: 70%;

}

padding: 0.7em 1em 0.7em 2em;
float: left;
color: #444;
position: relative;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
background-color: #ddd;
background-image: -moz-linear-gradient(to right, #f5f5f5, #ddd);
background-image: -webkit-linear-gradient(to right, #f5f5f5, #ddd);
background-image: -o-linear-gradient(to right, #f5f5f5, #ddd);
background-image: linear-gradient(to right, #f5f5f5, #ddd);

}

padding-left: 1em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;

}

background: #fff;

}

content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;
border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid;
right: -1em;

}

z-index: 2;
border-left-color: #ddd;

}

border-left-color: #ccc;
right: -1.1em;
z-index: 1;

}

border-left-color: #fff;

}

font-weight: bold;
background: none;

}





https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-2.png

DEMO二
/Breadcrumbs two/

overflow: hidden;
width: 70%;

}

float: left;
margin: 0 0.5em 0 1em;

}

background: #ddd;
padding: 0.7em 1em;
float: left;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
position: relative;

}

background: #99db76;

}

content: "";
position: absolute;
top: 50%;
margin-top: -1.5em;

}

border-style: solid;
border-width: 1.5em 0 1.5em 1em;
border-color: #ddd #ddd #ddd transparent;
left: -1em;

}

border-color: #99db76 #99db76 #99db76 transparent;

}

border-top: 1.5em solid transparent;
border-bottom: 1.5em solid transparent;
border-left: 1em solid #ddd;
right: -1em;

}

border-left-color: #99db76;

}

font-weight: bold;
background: none;

}

DEMO三
https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-3.png
/breadcrumbs Three/

overflow: hidden;
width: 70%;

}

float: left;
margin: 0 2em 0 0;

}

padding: 0.7em 1em 0.7em 2em;
float: left;
color: #444;
background: #ddd;
position: relative;
z-index: 1;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0);
-moz-border-radius: 0.4em 0 0 0.4em;
-webkit-border-radius: 0.4em 0 0 0.4em;
border-radius: 0.4em 0 0 0.4em;

}

background: #abe0ef;

}

content: "";
background: #ddd;
height: 2.5em;
position: absolute;
right: -1em;
top: 50%;
width: 2.5em;
margin-top: -1.25em;
z-index: -1;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-moz-border-radius: 0.4em;
-webkit-border-radius: 0.4em;
border-radius: 0.4em;

}

background: #abe0ef;

}

font-weight: bold;
background: none;

}

DEMO四
https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-4.png
/Breadcrumbs Four/

overflow: hidden;
width: 70%;
}

float: left;
margin: 0 0.5em 0 1em;
}

float: left;
background: #ddd;
padding: 0.7em 1em;
color: #444;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
position: relative;
}

background: #efc9ab;
}

content: “”;
position: absolute;
top: 0;
bottom: 0;
background: #ddd;
width: 1em;
-moz-transform: skew(-10deg);
-webkit-transform: skew(-10deg);
-o-transform: skew(-10deg);
-ms-transform: skew(-10deg);
transform: skew(-10deg);
}

left: -0.5em;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}

background: #efc9ab;
}

right: -0.5em;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
border-radius: 0 5px 5px 0;
}

background: #efc9ab;
}

font-weight: bold;
background: none;
}

DEMO五
https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-5.png
/Breadcrumbs Five/

overflow: hidden;
width: 70%;

}

float: left;

}

color: #fff;
padding: 0.7em 1em 0.7em 2em;
background: brown;
background: hsla(34, 85%, 35%, 1);
position: relative;
float: left;

}

content: "";
border-top: 2em solid transparent;
border-bottom: 2em solid transparent;
border-left: 1em solid hsla(34, 85%, 35%, 1);
position: absolute;
top: 50%;
margin-top: -2em;
left: 100%;
z-index: 2

}

margin-left: 1px;
z-index: 1;
border-left-color: #fff;

}

padding-left: 1em;

}

background: hsla(34, 85%, 45%, 1);

}

border-left-color: hsla(34, 85%, 45%, 1);

}

background: hsla(34, 85%, 55%, 1);

}

border-left-color: hsla(34, 85%, 55%, 1);

}

background: hsla(34, 85%, 65%, 1);

}

border-left-color: hsla(34, 85%, 65%, 1);

}

background: hsla(34, 85%, 25%, 1);

}

border-left-color: hsla(34, 85%, 25%, 1) !important;

}

font-weight: bold;
background: none;
color: #000;

}

DEMO六
https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-6.png
/Breadcrumb Six/

overflow: hidden;
width: 70%;

}

float: left;

}

float: left;
background: #D61D00;
color: #fff;
padding: 0.7em 1em 0.7em 2.5em;
position: relative;

}

padding-left: 1em;

}

background: #801100;

}

content: "";
position: absolute;
border-style: solid;
border-width: 1.5em 0 1.5em 1.5em;
border-color: transparent transparent transparent #D61D00;
right: -1.4em;
top: 50%;
margin-top: -1.5em;
z-index: 2;

}

border-color: transparent transparent transparent #801100;

}

background: #000;

}

border-color: transparent transparent transparent #000;

}

background: none;
font-weight: bold;
color: #000;

}

DEMO七
https://www.w3cways.com/wp-content/uploads/2013/12/css3-breadcrumbs-7.png
/Breadcrumb Seven/

overflow: hidden;
width: 70%;

}

float: left;
margin-right: 0.8em;

}

float: left;
padding: 2em 1em;
background: hsla(80, 20%, 85%, 1);
color: #000;
position: relative;

}

content: "";
position: absolute;
border: 8px solid hsla(80, 20%, 85%, 1);
border-color: transparent transparent transparent hsla(80, 20%, 85%, 1);
top: 50%;
margin-top: -8px;
z-index: 2;

}

left: 0;
border-left-color: #fff;

}

right: -15px;

}

content: normal;

}

background: hsla(80, 20%, 65%, 1);

}

border-left-color: hsla(80, 20%, 65%, 1);

}

background: hsla(80, 20%, 45%, 1);

}

border-left-color: hsla(80, 20%, 45%, 1);

}

background: hsla(80, 20%, 45%, 1);

}

border-left-color: hsla(80, 20%, 45%, 1);

}

background: hsla(80, 20%, 25%, 1);
color: #fff;

}

border-left-color: hsla(80, 20%, 25%, 1);

}

background: hsla(80, 20%, 25%, 1);
font-weight: bold;
color: #fff;

}

  1. 这里是 脚注 的 内容. ↩
welifeCoder
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
欢迎使用CSDN-markdown编辑器.md
09-24
2019最新csdn自带的介绍范文模板 如果写过一次博客，这个文档就找不到了（没有恢复到本模板的url） 就在这里备份一下 方便查阅
欢迎使用CSDN-markdown编辑器.html
03-31
: csdn博客编写快捷操作，新增各种快捷功能，全新界面，简易操作，多屏幕编辑，焦点写作、预览模式、简介写作模式、左右区域同步滚轮设置等功能。
[CSS3]2D与3D变换技术详解
Kevin ’ s blog
08-14 1026
2D和3D变换为Web设计和开发提供了丰富的视觉效果。掌握这些变换技术，不仅能增强网页的互动性，还能为用户带来更直观、生动的体验。在实际应用中，可以将这些变换与CSS动画结合，创造出更加复杂和有趣的效果。
前端开发工程师面试整理-CSS3的新特性
不务正业的猿
08-16 315
这些CSS3的新特性使得前端开发更加灵活和高效，可以创建更加丰富和互动的网页体验。CSS3引入了许多新特性，大大增强了网页的样式和布局能力。响应式设计:@media 用于根据不同的设备和屏幕尺寸应用不同的样式。vw, vh, vmin, vmax 等，基于视口宽度和高度的单位。:not(selector): 选择所有不匹配指定选择器的元素。:nth-child(n): 选择特定位置的子元素。提供了强大的二维布局系统，可以轻松创建复杂的布局。em: 相对于当前元素字体大小的单位。匹配具有特定属性的元素。
JVC AV-29L31彩电维修手册和图纸.rar
08-19
JVC AV-29L31彩电维修手册和图纸
树状数组：数据结构中的瑞士军刀
08-19
数据结构是计算机科学中的一个基本概念，它指的是数据的组织、管理和存储方式，以及对数据的操作。数据结构使得数据的访问和修改更加高效和有序。常见的数据结构包括： 1. **数组**（Array）：一种线性数据结构，可以存储相同类型的元素，并通过索引访问。 2. **链表**（Linked List）：一种线性数据结构，由一系列节点组成，每个节点包含数据部分和指向下一个节点的指针。 3. **栈**（Stack）：一种后进先出（LIFO, Last In First Out）的数据结构，只能在一端进行添加或删除操作。 4. **队列**（Queue）：一种先进先出（FIFO, First In First Out）的数据结构，允许在一端添加元素，在另一端删除元素。 5. **哈希表**（Hash Table）：通过键值对存储数据的数据结构，可以快速地通过键来访问数据。 6. **树**（Tree）：一种层次结构的数据结构，每个节点有零个或多个子节点，通常用于表示具有层次关系的数据。 7. **图**（Graph）：由顶点（节点）和边组成，可以表示复杂的关系和网络结构。 每种数据结构都有其
JVC AV-21H1E彩电电路原理图.rar
08-19
JVC AV-21H1E彩电电路原理图
基于uniapp+springboot的校园失物招领系统的设计与实现--pf.zip
08-19
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用校园失物招领系统可以有效管理，使信息管理能够更加科学和规范。 校园失物招领系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理校园失物招领系统信息，查看校园失物招领系统信息，管理校园失物招领系统。 总之，校园失物招领系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
基于Android日程管理APP设计与实现.docx
08-19
基于Android日程管理APP设计与实现.docx
Qt点亮开发板的一个LED-思维导图-学习笔记-基于正点原子阿尔法开发板
08-19
使用 Qt 在开发板上控制一个 LED。首先，界面初始化设置在嵌入式系统中根据屏幕大小进行全屏显示，按钮居中显示。由于出厂系统中 LED 的触发方式为心跳方式，为方便控制，需要通过 system() 函数将其触发方式改为 none。接着，描述了设置 LED 的方法，包括写入“0”或“1”来分别关闭和开启 LED，在写入之前先读取其当前状态以防止其他设置冲突。获取 LED 状态的代码负责读取 LED 的当前状态，并显示在按钮上。最后，设置 LED 状态的方法是一个槽函数，由按钮点击触发，负责切换 LED 状态。本文强调 Qt 本身不直接控制硬件，而是通过驱动层提供的接口进行交互，应用开发人员需理解这些接口以有效控制硬件。驱动开发人员则需确保接口的稳定性和高效性，满足应用层需求。
bevdet-4dim-input.zip
08-19
bevdet-4dim-input.zip
JVC AV-29R8B彩电电路原理图.rar
08-19
JVC AV-29R8B彩电电路原理图
智能温湿度监控助手是一款基于STM32F103C8Tx芯片的智能家居解决方案 通过运用STM32CubeIDE进行程序开发，结合
08-19
智能温湿度监控助手是一款基于STM32F103C8Tx芯片的智能家居解决方案。通过运用STM32CubeIDE进行程序开发，结合HAL库的强大功能，实现了多种智能控制和监测功能。本项目采用了一系列先进的硬件模块，包括AHT20温湿度传感器、电机驱动模块DRV8833和OLED显示屏等，以提供全面的家居监控和控制能力。 stm32 HAL IIC
基于微信小程序的高校餐厅食品留样管理系统.zip
08-19
基于微信小程序的高校餐厅食品留样管理系统.zip
基于Android科研经费报销管理信息系统APP设计与实现.docx
08-19
基于Android科研经费报销管理信息系统APP设计与实现.docx
深入探索Media Capture and Streams API：JavaScript中的媒体捕获与流处理
最新发布
08-19
Media Capture and Streams API（媒体捕获和流API）是一个强大的Web API，它允许Web应用程序直接访问硬件设备（如摄像头和麦克风）来捕获音频和视频数据。这个API为开发者提供了一种在网页上实现音视频捕获、处理和传输的能力。本文将详细介绍Media Capture and Streams API的基本概念、如何使用这个API，以及一些实际应用示例。 Media Capture and Streams API为Web应用程序提供了强大的媒体捕获和处理能力。通过合理使用这个API，开发者可以创建丰富的多媒体应用，如视频会议、直播、屏幕共享等，极大地丰富了用户的在线体验。 参考文献 MDN Web Docs - Media Capture and Streams W3C - Media Capture and Streams 请注意，本文为示例性质，实际编写时需要根据具体主题和要求进行调整和补充。
基于Android学生课程表软件APP设计与实现.docx
08-19
基于Android学生课程表软件APP设计与实现.docx
计算机毕业设计SSM共享型汽车租赁系统论文
08-19
计算机毕业设计SSM共享型汽车租赁系统论文
CSDN-markdown编辑器
04-25
CSDN Markdown编辑器是一款由CSDN自主开发的在线Markdown编辑工具，它具有以下特点和功能： 1. 简洁易用：CSDN Markdown编辑...7. 多平台支持：CSDN Markdown编辑器可以在多个平台上使用，包括网页版、移动端应用等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值