html – 占位符框的CSS(设计时所见即所得)

2023年8月5日 297次阅读

这是一个“愚蠢”,但希望合法,如果不是特别需要的挑战,一个可以被设计师在任何地方重复使用,我敢肯定,如果可以得到答案.

我正在使用WYSIWYG-ish编辑器(MS Expression Web 4),并且正在尝试生成基于HTML的线框,我打算将其作为实际生产的基础.由于原始/干净HTML是第一目标,我希望有一个占位符模式,我可以指定以下HTML(除了高度,宽度和文本之外别无其他),它应该显示为矩形通过它的“X”和文本(在本例中为“徽标”)出现在底部,或者在文本后面带有白色背景的中间的框：

<div class="placeholder" style="width: 200px; height: 50px;">Logo</div>

我的问题是什么是CSS和最小量的HTML mucking(例如img标签)是实现我想要的？例如,如果使用以下HTML：

<div class="placeholder">
    <img src="placeholder-xbox.png" width="200" height="200"/>
    Logo
</div>

要么

<div class="placeholder">
    Logo
    <img src="placeholder-xbox.png" width="200" height="200"/>
</div>

这在HTML方面是一个可接受的折衷方案,但那么什么是使这个工作的CSS？

我知道我可以使用jQuery来劫持干净的HTML以生成肮脏的HTML来实现我想要做的事情,但我在设计时需要这个.

下面这个虚假的截图是我正在寻找的.我想删除一小块干净的HTML,并可能使用WYSIWYG界面中的锚点来缩放占位符,而标签则保留在中心 – 底部或中间 – 中间.

我的图像是白色的,黑色的X通过它.

我非常怀疑CSS会支持我想要的东西而不会弄乱HTML.但是,我想知道是否有人知道它是否可行.这是我开始使用的,当然这不起作用,因为背景图像不会缩放,文本不会垂直对齐等等.

.placeholder { 
 display: inline;
 background-image: url('placeholder-xbox.png');
 border: 2px solid black;
    vertical-align: bottom;
}

所以现在我必须弄清楚要做出什么样的妥协.我讨厌弄乱HTML并且不介意搞乱CSS,因为CSS类是可重用的.

最佳答案 当我想要这样的占位符时,我倾向于做类似的事情：

< div id =“logo”> logo< / div>和#logo {background：#ccc;边框：1px实心红色}.

所以,它看起来像这样：

<div class="placeholder" style="width: 200px; height: 50px">
    Logo
</div>

.placeholder {
    background: #ccc;
    border: 1px solid red;
    text-align: center
}

需要额外的标记才能将文本放在底部：

<div class="placeholder" style="width: 200px; height: 50px">
    <span>Logo</span>
</div>

.placeholder {
    background: #ccc;
    border: 1px solid red;
    text-align: center;
    position: relative
}
.placeholder span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}

Live Demo

刚写完这一切之后,我意识到将它修改为你所描述的创作是多么容易;试试这个：

Live Demo

<div class="placeholder" style="width: 200px; height: 50px">
    <img src="http://i.stack.imgur.com/yZlqh.png" />
    <span>Logo</span>
</div>

.placeholder {
    background: #ccc;
    border: 1px solid #000;
    text-align: center;
    position: relative;
    font-weight: bold
}
.placeholder span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%
}
.placeholder img {
    width: 100%;
    height: 100%
}
点赞