如何在Weebly网站中添加彩色文本框

Weebly 已经有一些内置元素可以将文本内容添加到您的网站。提供的元素非常简单，没有额外的选项来添加个性化文本框。好吧，本教程介绍了如何在 Weebly 网站中添加彩色文本框。

在 Weebly 网站中添加彩色文本框

我们列出了在 Weebly 网站中添加彩色文本框的两种简单方法：

- 通过 CSS 样式

- 通过嵌入 CSS 样式

这是彩色文本框的现场演示

通过内联CSS

内联 CSS 用于设置单个 CSS 元素的样式。我们现在将设置段落元素的样式。以下代码允许您向网站添加彩色文本框：

<p align=justify style="background-color:#02f3e5;
border-radius:4px;
font-size:16px;
padding:15px;
margin:5px;"><b>
This is a Sample Textbox</b>
</p>

颜色代码可以是十六进制，如#808080，也可以使用直接颜色，如“天蓝色”或“灰色”。

您需要使用“ Weebly 嵌入代码元素”并将代码粘贴到元素内。下面显示了各种颜色的示例文本框：

具有背景颜色的示例文本框：#02f3e5

背景颜色示例文本框：粉红色

背景颜色示例文本框：浅蓝色

通过嵌入 CSS 样式

您可以将以下代码复制并粘贴到嵌入代码元素中以创建文本框：

<p class="weeblytutorials_quote">
<em>
"Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed 
diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat."
</em>
</p>
<style>
.weeblytutorials_quote {
    background: #c97e69 none repeat scroll 0 0;
    border-color: #808080;
    border-style: inset;
    border-width: 0px 0px 0px 15px;
    color: #ffffff;
    font-size: 20px;
    padding: 5px;
    font-family: monospace;
}
</style>

这是下面的结果

“Lorem ipsum dolor sat amet，consectetuer adipiscing elit，sed diam nonummy nibh euismod Tincidunt ut laoreet dolore magna aliquamerat volutpat。”

如何在Weebly网站中添加彩色文本框