【发布时间】：2014-07-19 16:32:19
【问题描述】：
我确定我只是错过了一些简单的东西，但它正在逃避我。我正在尝试让 CSS 手风琴工作并将每个部分链接到一个页面。
这里是来源http://www.webarti.com/css3-horizontal-accordion-slider/content-slider/
这是我当前的测试站点：http://g6t.test-lca-website.com/
我的手风琴部分正在工作（只有一个奇怪的怪癖，当您移动到第二个小节时，第一个小节会消失，但这可以稍后处理）但图片根本不会显示。现在我只有一张分配给“付款处理”滑块的图片没有显示。
这是我的代码：
<!-- CSS3 Accordion -->
<div class="accordion">
<!--[if IE ]><ul class="accordion-ie"><![endif]-->
<!--[if !IE]>--><ul><!--<![endif]-->
<li>
<a href="##"><span>Payment Processing </span></a>
<div>
<img border="0" alt="" src="img/blank-card-bills.jpg">
</div>
</li>
<li>
<a href="##"><span>Prepaid VISA/Mastercard cards </span></a>
<div>
<
</div>
</li>
<li>
<a href="##"><span>Banking Software </span></a>
<div>
</div>
</li>
<li>
<a href="##"><span>FX Trading </span></a>
<div>
</div>
</li>
<li>
<a href="##"><span>Equities Trading</span></a>
<div>
</div>
</li>
<li>
<a href="##"><span>CFD Trading</span></a>
<div>
</div>
</li>
</ul>
</div>
<!--CSS3 Accordion -->
我在站点的根目录中有一个名为img 的文件夹，权限设置为755。我什至尝试将这个文件夹放在wp-content/ 文件夹中，看看是否有什么不同。它没有。
我已经尝试使用正常工作的图像（即徽标），它不会在滑块中加载徽标。对于徽标，我使用了带有 http 的完整 URL（目前使用的）。
更新：使用的图像可以通过它的 URL 轻松获得（我不能在此处放置超过 2 个链接，直到达到 10 个代表，但只需将基本站点 URL 添加到 /img/blank-card-bills .jpg)
欢迎和赞赏任何/所有建议！
忘记包含 CSS：
/* CSS3 Horizontal Accordion Slider / Video Gallery Version: 1.0
Author: Webarti
Author URL: http://www.webarti.com/
*/
/*********** Global Styles ***********/
body {
background-color:#1a77b8;
color:#1E1C21;
font-family:Arial;
font-size:13px;
padding:0 0 15px 0;
margin:0;
}
.container {
-moz-border-radius:8px;
-webkit-border-radius:8px;
background-color:#111111;
border:1px solid #2c2c2c;
margin:90px auto 25px auto;
padding:30px;
width:830px;
}
.header {
color:#666;
font-family:verdana;
font-size:30px;
font-style:italic;
height:65px;
letter-spacing:-1px;
margin:0 0 0 -20px;
padding:25px 0 0 8px;
position:absolute;
text-shadow:-1px -1px 0 #000000;
top:7px;
width:900px;
word-spacing:5px;
}
/*********** Theme Styles ***********/
.accordion {font-family: Arial, Helvetica, sans-serif;}
.accordion>ul>li>a {
-moz-box-shadow:inset 1px 0px 0px 0px #485CBD;
-webkit-box-shadow:inset 1px 0px 0px 0px #485CBD;
box-shadow:inset 1px 0px 0px 0px #485CBD;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320BB8', endColorstr='#320078');
background:-webkit-gradient( linear, right top, left top, color-stop(0.05, #320BB8), color-stop(1, #320078) );
background:-moz-linear-gradient( right center, #320BB8 5%, #320078 100% );
background-color:#320BB8;
border-style:solid;
border-color:#321D85;
color:#FFFFFF;
font-size:15px;
font-weight:bold;
text-decoration:none;
text-shadow:-1px -1px 0px #3227B0;
}
.accordion>ul>li>a:hover{
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#320078', endColorstr='#320BB8');
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #320078), color-stop(1, #320BB8) );
background:-moz-linear-gradient( top center, #320078 5%, #320BB8 100% );
background-color:#9B0629;
}
.accordion>ul>li>div {
background-color:#000000;
color:#FFFFFF;
}
/******** Theme Structure *********/
.accordion>ul>li>div {
height:304px;
padding:10px;
width:600px;
}
.accordion>ul>li>a {
border-width:0 1px 0 0;
width:40px;
}
ul.accordion-ie>li>a>span { /* IE only */
margin-left:10px;
/* This value is necessary for centering rotated texts in Internet Explorer. */
}
.accordion {
width:825px;
/* This value refers to the total width of visible components
width = accordion>ul>li>div ( width + paddingRight + paddingLeft )
+ accordion>ul>li>a ( number of accordions x ( width + borderRrightWidth ) )
width = ( 600px + 10px + 10px ) + ( 5 x ( 40px +1px ) )
width = 825px
*/
}
.accordion, .accordion>ul>li>a {
height:324px;
/* This value refers to the total height of visible area
height = accordion>ul>li>div ( height + paddingTop + paddingBottom )
width = ( 304px + 10px + 10px )
width = 324px
*/
}
.accordion>ul>li {
margin-right:-620px;
/* This value refers to the negative of total width of content <div>
margin-right = accordion>ul>li>div (width + padding-right + padding-left)
margin-right = 600px + 10px + 10px
margin-right = 620px
*/
width:661px;
/* width = .accordion>ul>li>div ( width + padding-right + padding-left )
+ .accordion>ul>li>a ( width + border-right )
width = ( 600px + 10px + 10px ) + ( 40px + 1px )
width = 661px
*/
/* Transition Effect */
transition: margin-right 0.3s ease 0.2s;
-moz-transition: margin-right 0.3s ease 0.2s;
-webkit-transition: margin-right 0.3s ease 0.2s;
-o-transition: margin-right 0.3s ease 0.2s;
}
/******* Do not change folllowing properties **********/
.accordion {overflow:hidden;}
.accordion>ul {list-style:none;padding:0;margin:0;width:9999em;}
.accordion>ul>li {float:left;overflow:hidden;}
.accordion>ul>li>a {float:left;position:relative;z-index:1;-moz-outline-style:none;outline:none;}
.accordion>ul>li>a>span{ /* Text Rotation for all browsers */
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-ms-writing-mode:lr-bt;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
bottom:20px;display:block;position:absolute;width:100%;white-space:nowrap;
}
ul.accordion-ie >li>a>span {cursor:pointer;width:auto;} /* IE only */
.accordion>ul>li>div {float:left;overflow:auto;}
.accordion>ul>li:hover {margin-right:0px;}
ul.accordion-ie>li:hover {margin-right:0px;} /* IE only */
【问题讨论】：
标签： html css wordpress image accordion