转跳到内容

次元🌟魔女的表格魔法🌌教室【第N期】


Dorothy

只显示该作者

只有该作者的内容显示中。 返回到主题

推荐贴

22 小时前, Dorothy 说道:

 

 

                                                                                                                                                                                               1553071276hw9163befe991b22ac0579.png                                                                                                                                                                                                

        fb385e0735fae6cd4e1133ed03b30f2443a70fac.gif                   QQ20190320114607.gif       c58312d8be1667aa4ddc8570f9cc91ea.gif      QQ20190320114607.gif QQ20190320114607.gif c58312d8be1667aa4ddc8570f9cc91ea.gif c58312d8be1667aa4ddc8570f9cc91ea.gif    QQ20190320114607.gif       c58312d8be1667aa4ddc8570f9cc91ea.gif                  3a5d1858d109b3de4ece028cc0bf6c81810a4cf1.gif

 

332183849_QQ20190221215309.png.6dcf70f7cfef9af33004f1787b335735.png欢迎来到次元魔女的魔法表格教室!

在正式进入之前先说明一下关于表格的使用,已经有大佬们做了详尽的介绍,咱这里就不再细说啦,大家有兴趣可以通过传送门去学习哟!都相当实用的说!

                                                                             萌新指路牌(排版部分)   

                                                                                 泰兰德的表格教学

而在这里你将会学到如何用非常规的方式制作带有背景图的表格哟!(其实就素用F12代码啦)

 

首先要感谢 @Kami丶米@河城乃藥还有 @喵了个喵,咪 给予咱灵感才得以发现这个制作背景图的方法!

然而这个方法实际上并不难,只素一种稍特别点插入图片外链的新途径,本质上其实和正常的插入外链一样的说,基本上如果经常用一个背景的话直接复制就不需要再插入了的!

那么话不多说就开始进行教学部分吧!

 

基础部分:(如果觉得内容太多了不想看,可以直接跳到帖子底部的整理要点快速掌握教学内容哟!)

首先当然就素要创建表格咯,在创建表格时,要注意下列五种情况:

(这里已经开始进行教学了哟,到情况二的时候基本上就把这节课的主要内容学完了哟!)

 

                   一、没有选好图片但素想要看看背景图搭配文字效果

                      二、选好了图片可以直接用上

                         三、不用论坛编辑的表格,用其他地方制作的表格(如:word

                            四、我想直接用代码制作表格+背景图,一气呵成

                               五、太麻烦了,我想魔女帮我做

                             (咱感觉你不是来学习的,没关系呐,先交1ooo节操做订金吧ʕ•̀ω•́ʔ✧

情况一的话因为尝试图片一直调整大小确实比较麻烦,那么建议在word先进行试验,比如像咱这种:

QQ20190218232427.png

这素在word上看背景图的效果,虽然素直接在背景上贴的图片,但是基本上和在论坛加入背景图的效果相差不大。

(注意:这里周围的边框其实也素表格制作出来的,可以单独加入背景图哟!但多数情况只使用单一颜色较为合适。)

 

情况二的话当然就素正常地进行背景图插入咯,制作表格前要注意调整好大小和做好之后用鼠标右键+ctrl进行改动。

比如像咱这种300×300的大小的背景图

               u29367368421051144fm26gp0.jpg                                  IOUZNWBU9I33DPUP9H9I.png

  

点击表格出现弹窗输入相应的数据,特别素长宽一定要注意,如果不设置的话会显示原图大小的一部分内容。

(表格里的图片不会根据表格的大小缩小,所以没有失真的问题,而且如果超过了图片本身的大小只能平铺哟!所以如果觉得自己的文章难以确定相应大小的背景图的话,本魔女这里推荐用平铺类型的图片更加美观的说!

 

做出来的表格如下:

QQ20190319194338.png

对框内右键审查元素或者F12(如果没有的话,建议下个360浏览器什么的)

找到<table border="1"....>这一行

在style="height: 300px; width: 300px;后面粘贴代码background-image:url(你的图片外链地址)

HG_2L0W9DJ2K_CHQWYL.png

就得到如下的背景图表格啦!

QQ20190319194511.png

 

到这里保存的话就能正常显示有背景图的表格咯,建议在word打完字后粘到表格内再插入背景图哟。

(在实验的过程中发现,有时候在没输入文字时制作出来后,双击这个表格会出现创建表格的内容,也就素相当于它完全变成了一张无法编辑的背景图,似乎代码也无法删去,形成了锁定的状态。这个时候只能重新再做一次了,不过如果拷贝了原来的背景图表格的话,在原编辑页上粘贴还会重新出现哟!)

 

 

 

到这里基本上李已经学会了如何使用背景图的表格魔法啦!直接就可以上手了哟!

很快很容易素不!

 

(终于可以下课了的说!不用再努力了!谢谢大家的捧场!散啦散啦!1083933379_QQ20190221215305.png.31244293596b2af60640c175983bc9ad.png

 

 

 

 

教学结束   感谢支持

 THE END!THANKS!

 

 

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

 
QQ20190320151118.png

 

                                                                                                           

QQ20190320155409.png

 

 

嗯哼!当然还没完呐!1220815349_QQ20190221215303.png.fa463cc6dfea6965d0fa55798ca88d88.png

如果有任何问题都可以找咱提哟!(不论在本帖回复还素私聊都欢迎哟!)

要素还有兴趣可以继续往下看,也许下面的才素重头戏(?)

 

 

 

情况三的话其实是比较推荐的表格插入方法咯,在其他非论坛的编辑器中把长宽设置好,填好文字内容,再粘贴到论坛编辑栏中,再按照情况二咱教学的方法那样插入对应的表格就能达到想要的背景图效果了呐!

 

情况四话说明李素大佬!不需要咱教了…

不过这个方式确实过于硬核,所以不建议使用。但咱还素稍微给大家科普一下,没兴趣可以直接跳过的说。

  显示隐藏内容

那么想进行此类操作的话说明素要在做完表格后再加入文字咯,当然想直接加入文字也可以,但效果可能就不那么好,因为想用代码排版什么的咱现在也没做到呐!(或者缩太麻烦了不想做)

先把下面这个代码拷贝然后右键空白区域的审查元素一般是<p></p>这种类型然后右键它点Edit as HTML把代码覆盖上去,然后在再点编辑界面就会出来表格+背景图啦,然后就可以进行文字编辑咯!

就能在文章出现背景图加表格的状态啦,



<table border="1" cellspacing="1" cellpadding="1"
 style="height: 500px; width: 500px; background-image:url(你的图片外链地址)"">
 <tbody><tr><td>想要输入文字可以在这里添加</td></tr></tbody></table>

 

小科普:

Border:间距 cellpadding:边距   height; width:长宽

Cellspacing:边框

tr:

td:单元格

tbody:tr和td的主体

 

情况五的话emmm,那就这么缩吧:如果李想跟咱玩,在楼里素完全可以的哟!咱这里不素完全就不局限提问题和讨论什么的说(毕竟素广场来着),想聊什么都可以呐;如果素想委托咱帮忙的话,首先要看咱的心情,其次要看时间,最后素看报酬哟。(建议自己动手,因为很多时候不一定能等到咱,而且这魔法并不难)

 

创建完表格之后就没事了呀,因为到这里就相当于该教的课程都教完了呐,下面如果还有想要进一步学习的话可以去翻翻拓展部分,最后感谢各位的围观和学习,有机会下次本魔女的魔法教室还会再开课哟!届时也请大家多多暖场啦!1162635516_QQ20190221215301.png.0376805e7b8e6c47d30465e662191d3a.png~开溜咯!咻💫~~🌟

 

拓展部分:

  显示隐藏内容

这里主要讲的就素background系列的活用啦,用于召唤魔法中哟!当然也还额外加入了如何让文章拥有各种各样的字体的魔法教学!呼呼!很棒有没有!咱们就从召唤魔法开始吧!(这里教的素隐藏召唤的技巧哟)

首先按照正常的召唤魔法操作(@+空格+名字)得到召唤名片,

QQ20190319184605.png

然后点击右键审查元素,将contenteditable="false"false改成true,即contenteditable="true",如下图所示:

QQ20190319184642.png

(此时召唤名片变成了可编辑状态,也就素说无论素文字背景还素文字本身都可以用编辑器上的按钮变色哟),接着就可以复制 background-color: #fff (放在剧透里则素background-color: #f8f8f8)这段代码粘贴到右侧这里

QQ20190319184413.png

然后就发现召唤的字消失了哟!隐藏召唤也就成功咯!

QQ20190319184801.png

 

 

好咯,现在开始教大家怎么改变字体的说,

其实非常简单,直接在word文档里调整好的字体粘过去就可以了!

就比如咱这段话早起鸟儿虫吃!(华康娃娃体W5)

在论坛就可以直接显示哟!不过要注意有的字体可能浏览器不支持所以要测试一下能不能顺利使用哟!

所以今后想要把文字做得好看一些,那在word操作就可以了哟!

(当然如果用代码来完成也可以不过确实比较麻烦,实用性不高,远远不如word来得效率,所以这里就不教大家怎么操作啦)

至此,所有的教学内容就结束啦,感谢李愿意看到最后,相信大家今后的主题贴也会变得越来越好看的说!1162635516_QQ20190221215301.png.0376805e7b8e6c47d30465e662191d3a.png

要点整理:(包含拓展部分)

  显示隐藏内容

 

1️⃣创建表格并输入完文字内容后注意选取适合长宽或不完全显示也无伤大雅的背景图(使用平铺图片则无需调整)

2️⃣插入背景图的步骤:对表格右键审查元素→找到<table border="1"....>→在style="height: 300px; width: 300px; 之后粘贴这段代码background-image:url(图片外链地址)→显示出背景图即成功

3️⃣隐藏召唤的制作:@+空格+名字→右键召唤名片的审查元素→找到contenteditable="false"false改成true→把代码 background-color: #fff(放在剧透里则素background-color: #f8f8f8复制粘贴到右侧小窗口的element.style中→召唤名片消失   (隐藏)

4️⃣多字体的操作:直接在word上改变字体并粘贴到论坛中,要注意字体是否可用。

召唤阵:

 

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

QQ20190320155206.png

               

                                                                                                               

是可爱的魔女!

adebus 获得了红包 7.36节操

链接到点评
  • Dorothy将标题更改为次元🌟魔女的表格魔法🌌教室【第一期】​
  • Dorothy将标题更改为次元🌟魔女的表格魔法🌌教室【第一期】​
  • Dorothy将标题更改为次元🌟魔女的表格魔法🌌教室【第N期】
  • 軍事肥宅精选了本主题
  • 左林锁定了本主题
  • 牛奶咖啡解锁了本主题
×
×
  • 新建...

重要消息

为使您更好地使用该站点,请仔细阅读以下内容: 使用条款