我在为图像下的文本设置样式时遇到问题。我尝试过内联样式,但似乎没有任何效果。我需要产品名称的字体大小大于文本的其余部分。任何建议将不胜感激。
提前致谢。
- 麦克风
我在为图像下的文本设置样式时遇到问题。我尝试过内联样式,但似乎没有任何效果。我需要产品名称的字体大小大于文本的其余部分。任何建议将不胜感激。
提前致谢。
添加
#flip>li>.content{display:none;}
#flip>li.selected>.content{
display:block;
position:absolute;
font-size:11px;
z-index:1;
text-align:center;
width:500px;
padding-left:50%;
margin-left:-250px;
}
#flip>li.selected>.content>.title{font-size:16px;display:block!important;}
#scrollbar{top:320px;}
将您的 HTML 更改为
<ul id="flip">
<li>
<img src="http://mikedemar.com/stromasys/jcoverflip/images/1.png" />
<div class="content">
<p class="title">CHARON-AXP/DS10</p>
<p>Up to two (2) virtual CPUs</p>
<p>Up to 32GB of Alpha memory.</p>
<p>Run OpenVMS or Tru64 with no changes</p>
<p>Supports Windows, Linux and VMware</p>
<p>Pricing starts at $9,500.00 USD</p>
</div>
</li>
<li>
<img src="http://mikedemar.com/stromasys/jcoverflip/images/2.png" />
<div class="content">
<p class="title">CHARON-AXP/GS80</p>
<p>Up to eight (8) virtual CPUs</p>
<p>Up to 32GB of Memory</p>
<p>Run OpenVMS or Tru64 with no changes</p>
<p>Supports Windows, Linux and VMware</p>
<p>Pricing starts at $49,000</p>
</div>
</li>
<li>
<img src="http://mikedemar.com/stromasys/jcoverflip/images/5.png" />
<div class="content">
<p class="title">CHARON-AXP/DS20</p>
<p>Up to two (2) virtual CPUs</p>
<p>Up to 32GB of Alpha memory.</p>
<p>Run OpenVMS or Tru64 with no changes</p>
<p>Supports Windows, Linux and VMware</p>
<p>Pricing starts at $12,200</p>
</div>
</li>
<li>
<img src="http://mikedemar.com/stromasys/jcoverflip/images/4.png" />
<div class="content">
<p class="title">A title for the image</p>
</div>
</li>
<li>
<img src="http://mikedemar.com/stromasys/jcoverflip/images/6.png" />
<div class="content">
<p class="title">CHARON-VAX/6620</p>
<p>Up to six (6) virtual CPUs</p>
<p>Up to 3 GB of Memory</p>
<p>Run OpenVMS with no changes</p>
<p>Supports Windows and VMware</p>
<p>Pricing starts at 65,000</p>
</div>
</li>
<li>
<img src="http://mikedemar.com/stromasys/jcoverflip/images/7.png" />
<div class="content">
<p class="title">A title for the image</p>
</div>
</li>
</ul>
并添加
jQuery('#flip>li.selected').removeClass('selected');
el.addClass('selected');
在currentCss
函数的开头。
试试这个:
您想扩大规模的测试,只需添加一个跨度标签,因为整个文本使用“#flip .ui-jcoverflip--title”css,您无法将其分开。
为更大的文本使用额外的 span 标签,例如:<span style="font-size:15px">CHARON-AXP/DS20 </span>
您可以使用带有 "#flip .ui-jcoverflip--title .myfont" 的附加类,并为其指定 myfont 类名称。希望这会有所帮助。