Question

我的任务是使用CSS创建一个如下所示的程式化文本框：

desired stylized green multi-line text region

我曾经是许多网站的服务器开发人员，偶尔会跳转到CSS，并且通常会以相当干净的方式解决问题。然而，我真的坚持这个 - 它已经慢慢地拖延了几个小时的事情，开始实现这一目标。

我还没有开始着色或边框。现在，我一直试图将第一行文本垂直放置。我宁愿不强制任何文本行的高度或宽度，因为如果文本/大小稍微改变，我觉得这样做有风险。

相反，我宁愿使用语义，例如居中和 vertical-align：top; （等）（至少部分）。

绿色着色对于这个问题是可选的。我更关心文本的定位。另外，请不要担心字体的选择（我希望能够自己解决这个问题） - 但字体大小（和粗体）很重要。

我尝试的CSS的当前状态如下所示 - 这不起作用。我当前的CSS（下面）将页面上的图像保留为：

bad CSS attempt

（蓝色着色只是Chrome网站开发人员突出显示，我已经提供了它来指示包含第一行文本的div的大小。实际背景颜色为白色。）< / p>

在上图中，我还没有开始担心着色或边框。上面这张图片的当前状态就是我只是试图获取文字＆＃34;点击这里以便＆＃34; 出现在其div的顶部 - 如上所述，没有将div的高度或宽度设置为＆＃34;崩溃＆＃34;如果可能的话，在文本上。

我目前无法定位＆＃34;点击此处垂直播放＆＃34; 文字只是我一直在处理的问题。我想为这个图像提供一个完整的，有效的文本和文本定位样本，完成＆＃34;正确的方式＆＃34; （或者至少以不坏的方式完成）。也许正确的方式确实是设置click-here-for-a div的宽度和高度（请参阅下面的CSS）几乎等于文本维度，以强制其absolute定位（但如上所述，除非答案在这里纠正我，否则告诉我这是一个很好的方法））。

以下是上述（不正确）图片的HTML / CSS：

HTML：

<div class="smooth-click-region">
    <div class="click-here-for-a">
        CLICK HERE for a
    </div>
    <div class="intro-offer-on-home-delivery">
        <div class="intro-offer">Special Introductory Offer</div>
        <div class="on-home-delivery">on Home Delivery</div>
    </div>
    <div class="discount-description">2 weeks @ 30% off - as low as $78/week</div>
</div>

CSS：

.intro-offer-smooth-click-region {
    position: relative;
    display: inline-block;
    overflow: hidden;
    width: 258px;
    height: 61px;
}

.click-here-for-a {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    top: 0;
    vertical-align: top;
    font-size: 8pt;
}

.intro-offer-on-home-delivery {
    font-size: 9pt;
    text-align: center;
}

.intro-offer {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.on-home-delivery {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.discount-description {
    position: absolute;
    font-size: 9pt;
    height: 12px;
}

使用CSS创建上面图像的正确方法是什么 - 至少在文本格式和定位方面？

Answer 1

在这里，您可以轻松获得http://jsfiddle.net/1dmhLm9c/

.smooth-click-region{
    text-align: center;
    width: 300px;
    background: green;
    padding: 10px;
}
p, h2{
    margin: 0px;
}

您可以根据需要设置样式：）

Answer 2

你可以找到一些有类似盒子的网站运行良好，并用firebug进行检查。这将显示html布局..您可以获得一些关于如何创建自己的想法的好主意。

Answer 3

很简单。

演示 http://jsfiddle.net/7xtf1f8m/

CSS：

.smooth-click-region {
    display: inline-block;
    border: 2px solid #aa6;
    padding: 2px;
    background-color: #cc0;
    box-sizing: border-box;
    text-align: center;
    font-family: Arial;
}
.smooth-click-region span {
    font-weight: 700;
}
.inner {
    padding: 0.3em 3em;
    background-color: #aa6;
}
.click-here-for-a {
    font-size: 0.8em;
}
.intro-offer-on-home-delivery {
    font-weight: 700;
}
.discount-description {
    font-size: 0.7em;
}

HTML：

<div class="smooth-click-region">
    <div class="inner">
        <div class="click-here-for-a"><span>CLICK HERE</span> for a</div>
        <div class="intro-offer-on-home-delivery">
            Special Introductory Offer<br/>
            on Home Delivery
        </div>
        <div class="discount-description">2 weeks @ 30% off - as low as $78/week</div>
    </div>
</div>

Answer 4

您可以使用CSS3 box-shadow属性创建多个边框。 HTML标记默认具有一些CSS属性，因此您不必在CSS中定义它们。例如，代码<div>是一个块级元素，默认情况下为display: block;（您为div.click-here-for-a定义了它）。

你不必写太多不必要的CSS。这是我的例子：

.smooth-click-region {
    background:#acb014;
    width:260px;
    padding:5px;
    position:relative;
    box-shadow: 0 0 0 5px #FFF,0 0 0 10px #acb014;
    text-align:center;
}

<div class="smooth-click-region">
    <div class="click-here-for-a">
        CLICK HERE for a
    </div>
    <div class="intro-offer-on-home-delivery">
        <div class="intro-offer"><strong>Special Introductory Offer</strong></div>
        <div class="on-home-delivery"><strong>on Home Delivery</strong></div>
    </div>
    <div class="discount-description">2 weeks @ 30% off - as low as $78/week</div>
</div>

我没有更改您的HTML代码，但我建议您使用其他具有默认css的HTML标记。使用h1，h2，h3作为标题，使用p作为段落等。

Answer 5

根据您的要求发布答案。它有助于在您想要独立样式的单行文本周围添加span标记。

<强> JSFiddle Example

HTML：

<div class="smooth-click-region">
    <div class="click-here-for-a">
        <span>CLICK HERE</span> for a
    </div>
    <div class="intro-offer-on-home-delivery">
        <div class="intro-offer">Special Introductory Offer</div>
        <div class="on-home-delivery">on Home Delivery</div>
    </div>
    <div class="discount-description">2 weeks @ 30% off - as low as $78/week</div>
</div>

CSS：

.smooth-click-region {
    display: inline-block;
    overflow: hidden;
    width: 258px;
    height: 61px;
    background: #cebd44;
    border: inset 1px dotted;
    border-style: double;
}

.click-here-for-a span {
    font-weight: bold;
}

.click-here-for-a {
    display: block;
    text-align: center;
    vertical-align: top;
    font-size: 8pt;
}

.intro-offer-on-home-delivery {
    font-size: 9pt;
    text-align: center;
    font-weight: bold;
}

.intro-offer {
    margin-left: auto;
    margin-right: auto;
}

.on-home-delivery {
    margin-left: auto;
    margin-right: auto;
}

.discount-description {
    font-size: 9pt;
    height: 12px;
    text-align: center;
}

如何使用CSS创建特定的程式化多行文本框？

5 个答案: