H5C3,  网页制作

11个可以直接引用的文本框代码

第一个,用直线圈起来。

<div style="padding: 1em 1.5em;margin: 2em 0;border: solid 2px #000000;">
    <p>请输入文本</p>
</div>

第二个,很细的两条线

<div style="padding: 1em 1.5em;margin: 2em 0;border: double 4px #ff69b4;">
    <p>请输入文本</p>
</div>

第三个,纯色的背景

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#b0e0e6;color:#000000;">
    <p>请输入文本</p>
</div>

第四个,带背景的虚线。

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#fff0f5;border: dashed 2px #773d50;color:#000000;">
    <p>请输入文本</p>
</div>

第五个,点点。

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#ffffe0;border: dotted 6px #ffa500;color:#000000;">
    <p>请输入文本</p>
</div>

第六个,抹茶色书签。

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#f6faee;border-left: solid 10px #6b8e23;color:#000000;">
    <p>请输入文本</p>
</div>

第七个,圆角+背景。

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#fff0f5;border:1px solid #9370db;color:#000000;border-radius: 10px;">
    <p>请输入文本</p>
</div>

第八个,带阴影的框。

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#f4f9ff;border:1px solid #84c1ff;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);color:#000000;">
    <p>请输入文本</p>
</div>

第九个,红底白字。

<div style="padding: 1em 1.5em;margin: 2em 0;background-color:#b22222;color:#ffffff;font-weight:bold;">
    <p>请输入文本</p>
</div>

第十个,商务风。

<div style="padding: 1em 1.5em;margin: 2em 0;background: linear-gradient(to bottom, #ffffff, #eeeeee);background: -webkit-linear-gradient(top, #fffff, #eeeeee);border: 1px solid #eeeeee;border-top: 4px solid #00008b;box-shadow: 0 -1px 0 rgba(255, 255, 255, 1) inset;color:#000000;">
    <p>请输入文本</p>
</div>

第十一个

副标题:便签

请输入文本

<div style="width: 260px;padding: 15px;margin: 2em auto;background: #f7f092;color: #000;box-shadow: 4px 4px 4px rgba(0,0,0,0.03);transform: rotate(2deg);word-break: break-all;">
<div style="width: 50%;height: 35px;margin: -25px auto 0;background: #989898;transform: rotate(-3deg);opacity: 0.1;"> </div>
    <p style="text-align: center;font-size: 1.3em!important;margin: 0;margin-top: 10px!important;">标题</p> 
    <p style="text-align: center;font-size: 0.7em!important;margin-bottom: 1em!important;">副标题</p><p style="text-align: center;font-size: 0.9em;margin: 0;padding: 0;">正文</p>
</div>

Leave a Reply

您的邮箱地址不会被公开。 必填项已用 * 标注