我目前正在使用html5blank作为父主题的Wordpress上建立一个网站。我已经在HTMl/CSS上构建了所有的前端文本页面。当我将所有文件转移到很多样式上时 - 我已经修复了大部分文件,但有一部分我无法修复。这是它应该如何看 -WordPress的CSS样式不适用于行
,这是它的外观在WordPress网站 -
当我通过开发工具实地察看了它好像这些规则不适用 -
.agencyproducts {
position: relative;
display: inline-block;
text-align: center;
}
此外,前端网站中的行正在应用高度t规则,但不是在WordPress的网站。我已经着眼于应用特殊性规则和!重要但没有(这也破坏了网站其他部分的其他样式规则)。我真的坚持这一点,并会感谢任何帮助。
下面是部分的完整代码 -
section#products {
\t height: 800px;
\t max-width: 100%
}
.agencyproducts {
\t position: relative;
\t display: inline-block;
\t text-align: center;
}
.agencyproducts p {
\t text-align: center;
\t margin: 30px;
}
.agencyproducts img {
\t width: 70px;
\t height: 70px;
\t position: relative;
\t line-height: 1;
\t top: 50%;
}
figure {
\t text-align: center;
\t display: inline-block;
\t max-width: 80px;
\t height: 100px;
\t vertical-align: top;
\t margin: 5px;
\t font-size: 9px;
\t margin-bottom: 60px;
\t
}
figure img {
\t padding-bottom: 5px;
}
.four {
\t padding: 0;
\t margin: 0;
\t border: 0;
}
.images {
\t margin-top: 30px;
\t border-bottom: 10px;
}
.images img {
\t margin-left: 20px;
\t padding: 10px;
\t
}
.chevron {
\t height: 150px;
}
.chevron figcaption {
\t margin-top: 20px;
\t font-size: 13px;
\t color: #d3d3d3;
\t
}
hr.hragency {
display: block;
width: 250px;
margin-top: 0em;
margin-bottom: 0em;
margin-left: auto;
margin-right: auto;
border-style: inset;
border-width: 1px;
border-color: #F0F0F0;
}
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<p>WHAT PRODUCT ARE YOU INTERESTED IN?</p>
<a href="2k4kproduction.html">
<figure>
<img src="images/production.png" alt="Production">
<figcaption>2K/4K PRODUCTION</figcaption>
</figure>
</a>
<a href="postproduction.html">
<figure>
<img src="images/post-production.png" alt="Post-Production">
<figcaption>POST PRODUCTION</figcaption>
</figure>
</a>
<a href="2d3danimation.html">
<figure>
<img src="images/animation.png" alt="Animation">
<figcaption>2D/3D ANIMATION</figcaption>
</figure>
</a>
<a href="adhoc.html"><figure>
<img src="images/ADHOC.png" alt="ADHOC">
<figcaption>ADHOC</figcaption>
</figure>
</a>
<a href="interactive.html">
<figure>
<img src="images/interactive.png" alt="Interactive">
<figcaption>INTERACTIVE & PERSONALISED</figcaption>
</figure>
</a>
<a href="tvadverts.html">
<figure>
<img src="images/tv-adverts.png" alt="TV ADVERTS">
<figcaption>TV ADVERTS</figcaption>
</figure>
</a>
<a href="360video.html"><figure>
<img src="images/360.png" alt="360 Video and VR">
<figcaption>360 VIDEO & VIRTUAL REALITY</figcaption>
</figure>
</a>
</div>
</div>
<hr class="hragency">
<div class="row">
<div class="images">
<div class="four columns">
<img src="images/VIDEO.jpg" alt="Video">
<img src="images/blog.jpg" alt="blog">
</div>
<div class="four columns">
<img src="images/faq.jpg" alt="FAQ">
<img src="images/VIDEO.jpg" alt="Video">
</div>
<div class="four columns">
<img src="images/blog.jpg" alt="blog">
<img src="images/faq.jpg" alt="FAQ">
</div>
</div>
</div>
</div>
</section>
<section class="chevron">
<div class="container">
<div class="row">
<figure>
<figcaption>SEE MORE</figcaption>
<i class="fa fa-chevron-circle-down fa-3x" aria-hidden="true"></i>
</figure>
</div>
</div>
</section>
是否加载了您的样式表? – Morpheus