1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Markdown更改字体 颜色 大小 设置文字背景色 调整图片大小设置居中 插入表格等方法

Markdown更改字体 颜色 大小 设置文字背景色 调整图片大小设置居中 插入表格等方法

时间:2019-08-31 20:56:33

相关推荐

Markdown更改字体 颜色 大小 设置文字背景色 调整图片大小设置居中 插入表格等方法

Markdown更改字体、颜色、大小,设置文字背景色,调整图片大小设置居中,插入表格等方法

Markdown 通过简单标记语法,使普通文本内容具有一定格式。但它本身不支持修改字体、字号与颜色等功能的。

一、更改字体大小、颜色、更改字体

Markdown语法

<font face="逐浪新宋">我是逐浪新宋</font><font face="逐浪圆体">我是逐浪圆体</font><font face="逐浪花体">我是逐浪花体</font><font face="逐浪像素字">我是逐浪像素字</font><font face="逐浪立楷">我是逐浪立楷</font><font color=red>我是红色</font><font color=#008000>我是绿色</font><font color=yellow>我是黄色</font><font color=Blue>我是蓝色</font><font color= #871F78>我是紫色</font><font color= #DCDCDC>我是浅灰色</font><font size=5>我是尺寸</font><font size=10>我是尺寸</font><font face="逐浪立楷" color=green size=10>我是逐浪立楷,绿色,尺寸为5</font>

效果如下:

我是逐浪新宋

我是逐浪圆体

我是逐浪花体

我是逐浪像素字

我是逐浪立楷

我是红色

我是绿色

我是黄色

我是蓝色

我是紫色

我是浅灰色

我是尺寸

我是尺寸

我是逐浪立楷,绿色,尺寸为5

二、为文字添加背景颜色

由于 style 标签和标签的 style 属性不被支持,所以这里只能是借助 table, tr, td 等表格标签的 bgcolor 属性来实现背景色。这里对于文字背景色的设置,只是将那一整行看作一个表格,更改了那个格子的背景色(bgcolor)

Markdown语法

<table><tr><td bgcolor=green>背景色yellow</td></tr></table>

效果如下:

三、Markdown创建表格

1、极简模式

水果名称| 价格 | 数量 -|-|-香蕉 | $1 | 5 |苹果 | $1 | 6 |草莓 | $1 | 7 |

效果如下:

2、简单方法

name | 111 | 222 | 333 | 444- | :-: | :-: | :-: | -:aaa | bbb | ccc | ddd | eee| fff | ggg| hhh | iii | 000|

效果如下:

3、原生方法

name | 111 | 222 | 333 | 444:-: | :-: | :-: | :-: | :-:aaa | bbb | ccc | ddd | eee| fff | ggg| hhh | iii | 000|

效果如下:

常用的颜色

三种方法的区别

简单方法虽然是稍微简单了些,但是前后因为没有格式所以第一列和最后一列没有居中,对于极简方式来说还相当繁琐。极简方式简单,但是都是左对齐。原生方式格式更美观。个人意见强迫症患者请用原生方式,其他请随意。

表格语法说明

1)|、-、:之间的多余空格会被忽略,不影响布局。

2)默认标题栏居中对齐,内容居左对齐。

3)-:表示内容和标题栏居右对齐,:-表示内容和标题栏居左对齐,:-:表示内容和标题栏居中对齐。

4)内容和|之间的多余空格会被忽略,每行第一个|和最后一个|可以省略,-的数量至少有一个。

四、设置图片大小

1、设置设置图片百分比

Markdown语法

<img src="/Template/office/style/images/home_product_phone09.png" width="50%" height="50%">

效果如下:

2、设置图片大小

Markdown语法

<img src="/Template/office/style/images/home_product_phone09.png" width="251" height="350" >

效果如下

3、设置图片居中

Markdown语法

<div align=center><img src="/Template/office/style/images/home_product_phone09.png" width="50%" height="50%"></div>

效果如下

PS:位置显示三个属性:center,left,right

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。