我目前正在使用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