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

乱跑的泰兰德 · 五月 10, 2019

34 分钟前, 草泥馬说道:

這是不存在的www

:mx040: 明明都外焦里嫩了，我好馋啊。

QJJ · 五月 10, 2019

今天也来给大佬打call了 :mx003:

baima · 五月 10, 2019

大佬这种操作，我还是列一个有生之年计划表好了 :SS01:

apollorange · 五月 10, 2019

于 2019/3/20 于 PM8点56分, Dorothy 说道:
✨ ✨✨   ✨



⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

欢迎来到次元魔女的魔法表格教室！

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

聊聊排版吧~

新旧更替——一点关于新框架下排版的初步概念引导

萌新指路牌（排版部分）

泰兰德的表格教学

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

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

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

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

基础部分：（如果觉得内容太多了不想看，可以直接跳到帖子底部的整理要点快速掌握教学内容哟！）

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

（这里已经开始进行教学了哟，到情况二的时候基本上就把这节课的主要内容学完了哟！）

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

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

三、不用论坛编辑的表格，用其他地方制作的表格（如：word）

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

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

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

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

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

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

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

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





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

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

做出来的表格如下：

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

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

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

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

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

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

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

很快很容易素不！

（终于可以下课了的说！不用再努力了！谢谢大家的捧场！散啦散啦！）

教学结束感谢支持

THE END！THANKS！

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙
⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐

⭐
嗯哼！当然还没完呐！

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

要素还有兴趣可以继续往下看，也许下面的才素重头戏（？）

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

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

不过这个方式确实过于硬核，所以不建议使用。但咱还素稍微给大家科普一下，没兴趣可以直接跳过的说。
显示隐藏内容
那么想进行此类操作的话说明素要在做完表格后再加入文字咯，当然想直接加入文字也可以，但效果可能就不那么好，因为想用代码排版什么的咱现在也没做到呐！（或者缩太麻烦了不想做）

先把下面这个代码拷贝然后右键空白区域的审查元素一般是<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，那就这么缩吧：如果李想跟咱玩，在楼里素完全可以的哟！咱这里不素完全就不局限提问题和讨论什么的说（毕竟素广场来着），想聊什么都可以呐；如果素想委托咱帮忙的话，首先要看咱的心情，其次要看时间，最后素看报酬哟。（建议自己动手，因为很多时候不一定能等到咱，而且这魔法并不难）

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

拓展部分：

显示隐藏内容

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

首先按照正常的召唤魔法操作（@+空格+名字）得到召唤名片，

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

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

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

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

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

就比如咱这段话：早起的鸟儿有虫吃！（华康娃娃体W5）

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

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

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

至此，所有的教学内容就结束啦，感谢李愿意看到最后，相信大家今后的主题贴也会变得越来越好看的说！

要点整理：（包含拓展部分）

显示隐藏内容

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

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

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

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

召唤阵：

显示隐藏内容

@星霜の言葉 @mylifeyouwill @格林的黑羊 @jhvnhjv @堕落之瞳 @失禁少女 @时间旅行者 @竹水微澜 @磨米叽 @軍事肥宅 @草泥馬 @希纳酱 @凌若 @秋野鈴 @圣白莲 @真笑春风 @奏章 @adebus @友人A陈煜 @呜喵呜喵

@绊城烟沙〞绊城雨 @水克火 @Dark ♂ 芬奇 @eg13 @fdffd @s1e2c3df556678 @Shepherd爱 @Sola君丶 @wanyun没错，这里什么都没有哟！@崩爹的ta

@yinshi@shenle @zzc1565545 @啥梦？ @夜夜赤兔 @小新QAQ @白烛 @尸体 @世界atlast @辉BOY @鎏白丶 @街饮 @霄月 @secass @linjinhai @伊弗列姆 @無路 @白蓝王 @信奈的野望 @坂田诚三 @随便起个能注册

@赤紅の涙 @辉夜の桐 @予鲤倾碧塘 @天之泪 @JeroMN@Dzero @c24009 @逝去王女
🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙

🌙