将css应用于Liferay中的Web内容显示Portlet

我在页面上使用了Web内容显示Portlet来显示一些文本。我必须应用css并插入一些图像。我已将html代码放入源代码中。我如何为它应用css

以下是我的Web内容显示Portlet中的源代码

   <div class="products" style="width:1000px;">



  <div class="tvc box">
  <img alt="ADVISORY" title="ADVISORY" src="Index_files/ADVISORY.PNG">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 78px; height: 16px;" alt="ADVISORY" class="cufon cufon-canvas"><canvas style="width: 85px; height: 16px; top: 1px; left: -1px;" height="16" width="85"></canvas><cufontext>ADVISORY</cufontext></cufon></p>

  </div>
  <a href="http://tt.com/Forms-Brochure/Advisory_for_ALL_SITES.pdf" title="Know More">Know More</a> </div>

  <div class="tvc box">
  <img alt="Branch Locator" title="Branch Locator" src="Index_files/branchlocator.jpg">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 68px; height: 16px;" alt="BRANCH " class="cufon cufon-canvas"><canvas style="width: 82px; height: 16px; top: 1px; left: -1px;" height="16" width="82"></canvas><cufontext>BRANCH </cufontext></cufon><br><cufon style="width: 73px; height: 16px;" alt="LOCATOR" class="cufon cufon-canvas"><canvas style="width: 80px; height: 16px; top: 1px; left: -1px;" height="16" width="80"></canvas><cufontext>LOCATOR</cufontext></cufon></p>
  <p>Use our branch locator to find the branch closest to you!</p>
  </div>
  <a href="http://www.t.com/quickylink/branchlocater.htm" title="Know More">Know More</a> </div>


  <div class="tvc box">

  <img alt="EMI Calculator" title="EMI Calculator" src="Index_files/emicalculator.jpg">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 30px; height: 16px;" alt="EMI " class="cufon cufon-canvas"><canvas style="width: 44px; height: 16px; top: 1px; left: -1px;" height="16" width="44"></canvas><cufontext>EMI </cufontext></cufon><br><cufon style="width: 102px; height: 16px;" alt="CALCULATOR" class="cufon cufon-canvas"><canvas style="width: 109px; height: 16px; top: 1px; left: -1px;" height="16" width="109"></canvas><cufontext>CALCULATOR</cufontext></cufon></p>
  <p>Knowing your home loan EMI is just a click away!</p>
  </div>
  <a href="http://www.t.com/quickylink/emicalculator.htm" title="Know More" class="sec">Know More</a> </div>
  <div class="tvc box">

  <img alt="FAQs" title="FAQs" src="Index_files/faqs.jpg">
  <div class="txt">
  <p class="hdtxt"><cufon style="width: 39px; height: 16px;" alt="FAQs" class="cufon cufon-canvas"><canvas style="width: 48px; height: 16px; top: 1px; left: -1px;" height="16" width="48"></canvas><cufontext>FAQs</cufontext></cufon></p>
  <p>Get the answers to frequently asked questions here.</p>
  </div>
  <a href="http://www.t.com/loancentre/faqs.htm" title="Know More" class="sec">Know More</a> </div>
  </div>

咨询

分支定位器

使用我们的分支定位器查找离您最近的分支

电磁干扰计算器

了解您的住房贷款EMI只需点击一下

常见问题解答

在此处获取常见问题的答案

“tvc盒”类的每个div都必须水平依次出现

---

如何为其应用css？

作为管理员，您可以访问yout portlet的外观配置。 单击“选项”图标，然后选择“外观”。 您可以看到几个选项卡：文本样式、背景样式、边框样式、高级样式。 “高级样式”选项卡允许您输入CSS代码以自定义portlet。 您可以在以下内容中找到如何做到这一点：

你也可以为你的网站做一个新的主题，然后把你的custom.css放在那里（我认为这是最好的选择，因为你需要放图片）