HTML 选取框 - 静态文本
HTML Marquee - Static text
我想知道 HTML 选取框是否允许在控件(或容器)的开头使用静态文本,以便当文本向左滑动时它会滑过文本?
例如
我正在查看要静态左对齐的日期,数据库中的文本将滑过它,然后从右侧重新出现。
HTML:
<marquee onmouseover="this.stop();" onmouseout="this.start();"
class="html-scroller" direction="left" behavior="scroll" scrollamount="12">
<p style="color:#626060; font-weight:bold">24/05/2015 - Some Infor here</p>
CSS:
.html-scroller
{
height:30px;
border:solid;
}
当然,上面的代码会使包含日期幻灯片的文本通过控制器的边缘。
查看字幕示例没有任何内容,所以如果我必须更改它,创建我自己的会更容易吗?
我认为不存在用于选取框的部分静态文本解决方案。
我会这样做:
HTML
<div class="container">
<div class="date">24/05/2015</div>
<div>
<marquee
onmouseover="this.stop();"
onmouseout="this.start();"
direction="left"
behavior="scroll"
scrollamount="12">
<p>
Some Infor here
</p>
</marquee>
</div>
</div>
CSS
.container
{
position: relative;
border: 2px solid #626060;
box-sizing: border-box;
}
.container,
.container .date {
padding: 10px;
background-color: #fff;
color: #626060;
font-weight: bold;
}
.container .date {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.container marquee {
line-height: 0.8;
}
.container marquee p {
margin: 0;
}
我想知道 HTML 选取框是否允许在控件(或容器)的开头使用静态文本,以便当文本向左滑动时它会滑过文本?
例如
我正在查看要静态左对齐的日期,数据库中的文本将滑过它,然后从右侧重新出现。
HTML:
<marquee onmouseover="this.stop();" onmouseout="this.start();"
class="html-scroller" direction="left" behavior="scroll" scrollamount="12">
<p style="color:#626060; font-weight:bold">24/05/2015 - Some Infor here</p>
CSS:
.html-scroller
{
height:30px;
border:solid;
}
当然,上面的代码会使包含日期幻灯片的文本通过控制器的边缘。
查看字幕示例没有任何内容,所以如果我必须更改它,创建我自己的会更容易吗?
我认为不存在用于选取框的部分静态文本解决方案。 我会这样做:
HTML
<div class="container">
<div class="date">24/05/2015</div>
<div>
<marquee
onmouseover="this.stop();"
onmouseout="this.start();"
direction="left"
behavior="scroll"
scrollamount="12">
<p>
Some Infor here
</p>
</marquee>
</div>
</div>
CSS
.container
{
position: relative;
border: 2px solid #626060;
box-sizing: border-box;
}
.container,
.container .date {
padding: 10px;
background-color: #fff;
color: #626060;
font-weight: bold;
}
.container .date {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
.container marquee {
line-height: 0.8;
}
.container marquee p {
margin: 0;
}