Question

我的水平滚动条有以下HTML代码。我已经能够输入文本，但无法弄清楚如何更改font-size和font-family：

<div id="left_upper2">
       <div class="links_body1">
            <div class="items">
                <img src="http://placehold.it/300x100/bb0000/ffffff&text=Help"/>
                <img src="http://placehold.it/300x100/00274c/ffcb05&text=Me"/>
                <img src="http://placehold.it/300x100/bb0000/ffffff&text=Please"/>
            </div>
        </div>
    </div>

Answer 1

如果您粘贴＆＃39; clean＆＃39;可以看到正确的placehold.it url文字大小。将网址（例如http://placehold.it/WIDTHxHEIGHT/foreground/background?text=blah）添加到浏览器中 - 它会将您重定向到实际提供图像的内容，并列出所有参数;具体来说，您需要txtsize参数。但是，对于字体系列来说，它似乎并不存在。

https://placeholdit.imgix.net/~text?txtsize=120&txtclr=3498db&bg=9b59b6&txt=My+Flat+Test+Image&w=480&h=600&txttrack=0

Answer 2

@CodeUniquely我最终确实更改了水平滚动的结构，是的，我只是使用生成的图像作为占位符。以下是我的观点：

<div id="left_upper2">
       <div class="links_body1">
            <div class="items">
                <div class="scroll"><span5><img src="images.png" /></span5><span4><br />content</span4></div>
                <div class="scroll"><span7><img src="images.png" /></span7><span6><br />content</span6></div>
                <div class="scroll"><span5><img src="images.png" /></span5><span4><br />content</span4></div> 
            </div>
        </div>
    </div>

和CSS：

.scroll {
    background-color: white;
    width: 300px;
    height: 100px;
    float: left;
    line-height: 19px;
}

.scroll span4 {
    color: black;
    font-size: 14px;
}
.scroll span5 {
    width: 100px;
    height: 100px;
    display: inline-block;
    float: left;
    background-color: #d6d6d6;
}
.scroll span6 {
    color: black;
    font-size: 14px;
}
.scroll span7 {
    width: 100px;
    height: 100px;
    display: inline-block;
    float: left;
    background-color: #00274c;
}

.scroll img {
    height: 50px;
    text-align: left;
    margin-top: 25px;
    text-align: center;
}

.items {    
    width: 1200px;
    -webkit-animation: hscroll 20s infinite;
    -moz-animation: hscroll 20s infinite;
    -ms-animation: hscroll 20s infinite;
}

@-webkit-keyframes hscroll {
    0%   { margin-left: 0; }
    27.33%  { margin-left: 0 }
    33.33%  { margin-left: -300px; }
    60.66% { margin-left: -300px; }
    66.66% { margin-left: -600px; }
    94.99% { margin-left: -600px; }
    100%  { margin-left: 0 }
}
@-webkit-keyframes hscroll {
    0%   { margin-left: 0; }
    27.33%  { margin-left: 0 }
    33.33%  { margin-left: -300px; }
    60.66% { margin-left: -300px; }
    66.66% { margin-left: -600px; }
    94.99% { margin-left: -600px; }
    100%  { margin-left: 0 }
}
@-webkit-keyframes hscroll {
    0%   { margin-left: 0; }
    27.33%  { margin-left: 0 }
    33.33%  { margin-left: -300px; }
    60.66% { margin-left: -300px; }
    66.66% { margin-left: -600px; }
    94.99% { margin-left: -600px; }
    100%  { margin-left: 0 }
}


.links_body1  {
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    margin-left: 0px;
    width: 300px;
    height: 100px;
    padding: 0;
    background-color: white;
    position: relative;
    overflow: hidden;
    text-align: center;    
}

如何为水平滚动条的以下html代码设置font-size和font-family？

2 个答案: