主页 > 发展人像 >BOX 的自订与设计 – 创作者学苑 >

BOX 的自订与设计 – 创作者学苑

2020-05-21 热度846
阅读584

有时站长会需要在文章中置入一些额外文字内容,例如:延伸阅读、相关文章、推荐、优惠资讯、店家资讯 等等,为了让读者可以将这些资讯与内文简单明了的区分,我们可以建立额外的 CSS外观将其区隔开来!

这种方式也可以应用在段落标题,有兴趣的站长也可以参考这篇:段落标题的自订与设计

Table of Contents

段落标题设定方式準备 HTML 标籤準备 class 名称与 CSS 样式设置方式操作範例(1) 準备好一个 BOX 样式与 html 标籤(2)将代码贴到外观>>自订>>CSS 后并按下发布(3)至编辑器输入文字内容,选择编辑器右上角「文字」(4)将HTML的标籤包在文字前后快速为文章添加 html标籤的方法(5) 在预览草稿看到结果~段落标题设定方式準备 HTML 标籤

放文字内容準备 class 名称与 CSS 样式

※只影响有使用该class 名称的区块
结构如以下:

.自订的名称 {   自订的样式}设置方式

于网站后台>>外观>>自订>>附加的 CSS,贴上CSS代码

※ 富盈数据搬家伙伴,可以直接将需求提交给客服窗口代为放置

操作範例

先简单示範一个简单的 BOX ,其它範本会陆续更新喔!

範本请参考

简单的 BOX 样本-虚线、虚线、双线简单的 BOX 样本-附带底色的外框简单的 BOX 样本-附带标题的外框简单的 BOX 样本-延伸变化

颜色选择可以参考这篇 免费线上选色工具

(1) 準备好一个 BOX 样式与 html 标籤

.zi_box_1 { margin: 2em auto;padding: 1em;width: 90%;border: 1px solid #ccc; /* 框线颜色 */}

放文字内容(2)将代码贴到外观>>自订>>CSS 后并按下发布(3)至编辑器输入文字内容,选择编辑器右上角「文字」(4)将HTML的标籤包在文字前后

如以下:

快速为文章添加 html标籤的方法

可以参考这篇 使用 AddQuicktag 快速在文章中插入html标籤
让自定义的代码快速完成添加,不拖慢写文的时间!

(5) 在预览草稿看到结果~box标籤简单自订css文字準备标题资讯样本样式
精选推荐

乐豪炸金花ios_dafabet门户|早报数字|探险人类|网站地图 l申博sunbet官网 申博信誉怎么样 申博Sunbet(官网) 申博包输网 申博33gvg 申博sunbet网址 申博8国际 金沙2278jscom 申博在线充值 申博沙龙