[英]How to align a label to the top middle of the div control and draw a rectangle around it?
我在div控件中有一个标签。我想将其与div控件的顶部中间对齐并在该文本周围绘制一个矩形。我也想从左到右逐一显示该标签文本的字符。
我该如何实现?
要将文本居中放置在div水平线的中间,您只需要使用以下样式即可
div#ctrl {
text-align: center
}
要在文本周围有一个矩形,您需要定义一个边框,可能带有填充和边距:
div#ctrl span {
border: 1px #333 solid;
padding: 5px;
}
您需要使用javascript来为文本设置动画,而使用jQuery则更容易。 这是一个工作示例的链接,我在这里鞭打了您要寻找的内容:
将来尝试做更多的研究,并就以前未曾回答的特定问题提出问题。 所有这些都是基本的,有据可查的东西。
在这里,你去的第一部分:
http://fiddle.jshell.net/VdmFV/
第二部分,您需要一些精美的javascript / jQuery,您应该首先尝试一下,然后再回到这里获取指针。
<style>
#control {
width:200px;
height:200px;
background:#ddd;
text-align: center
}
#label {
border:1px solid red;
}
</style>
<div id='control'>
<span id='label'></span>
</div>
<script>
var label = document.getElementById("label");
var msg = "Message";
var i = 0;
var interval = setInterval( function() {
label.innerHTML = msg.substr(0,i);
i++;
if ( i == msg.length ) {
clearInterval(interval);
}
}, 1000)
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.