gpt4 book ai didi

html - 简单的 HTML/CSS 幻灯片无法正常工作

转载 作者:行者123 更新时间:2023-11-28 13:38:41 25 4
gpt4 key购买 nike

我正在尝试使用 HTML/CSS 创建一个简单的图片幻灯片,但是我在显示来自服务器的图像时遇到了一个小问题。前两张图片从左上角出现,但它们应该出现在缩略图列表下方。

这是一个 jsfiddle 演示 http://jsfiddle.net/qHyAG/

你能帮我解决一下吗

HTML:

<div class="slideshow">
<ul>
<li>

<img src="http://farm9.staticflickr.com/8288/7843768142_531a2de876_m.jpg" />
<!--
The slide contents inside DIV.
Put anything you like to show.
-->
<div>
<img src="http://farm9.staticflickr.com/8288/7843768142_531a2de876_m.jpg" /> <p>Relaxing calm waters back home in <a href="http://ilo.wikipedia.org/wiki/Samboan,_Cebu" target="_blank">Samboan</a>, Cebu, Philippines.</p>
</div>
</li>
<li>

<img src="http://farm9.staticflickr.com/8319/7988784175_f662ddb020_m.jpg" />
<div>

<img src="http://farm9.staticflickr.com/8319/7988784175_f662ddb020_m.jpg" alt="Summer Pebbles" />

<p>What a nice place to spend summer. Those mountains belong to Bais, Negros, Philippines</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />

<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/church_cross.jpg" />
<div>
<a href="images/church_cross.jpg" title="Click to see full image" target="_blank">
<img src="images/church_cross.jpg" alt="Church Cross" />
</a>
<p>Not sure where we took this picture but it's magestic.</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
<li>
<img src="images/fluvial_parade.jpg" />
<div>
<a href="images/fluvial_parade.jpg" title="Click to see full image" target="_blank">
<img src="images/fluvial_parade.jpg" alt="Fluvial Parade" />
</a>
<p>The fluvial parade commemorating the arrival of Child Jesus Christ in Cebu City and the birth of Christianity in the Philippines.</p>
</div>
</li>
</ul>
</div>

CSS:

.slideshow {
font-family:Arial, Helvetica, sans-serif;
width:840px; /* changed */
height:500px;
overflow:hidden;
background-color:#000000;
color:#FFFFFF;
border:5px solid #99CC00;
}
.slideshow > ul {
margin: 0;
padding: 0;
}
.slideshow > ul > li {
display:inline;
margin:0px;
padding:0px;
font-size:1px;
margin-right: -1px;
}
.slideshow > ul > li > div {
display: none;
text-decoration: none;
float:left;
}
.slideshow > ul > li > div > p {
font-size:11px;
text-align:center;
padding:10px 0px 0px 0px;
margin:0px;
color:#FFFFFF;
}
.slideshow > ul > li > div > a > img {
border:2px solid #FFFFFF;
width:532px; /* changed */
height:300px;
}

.slideshow > ul > li > div > img {
border:2px solid #FFFFFF;
width:532px;
height:300px;
}

[id^="my_video"] {
width:500px;
height:250px;
}

.slideshow > ul > li > img {
border:2px solid #FFFFFF;
margin:0px;
padding:0px;
width:80px;
height:60px;
}
/* Shows slides when mouse pointer is over a thumbnail image */
.slideshow > ul > li:hover > div {
display: block;
}
/* Highlights the thumbnail image when mouse pointer is over it */
.slideshow > ul > li:hover > img {
border-color:#FF6600;
}

最佳答案

.slideshow > ul > li > div {
display: none;
text-decoration: none;
float:left;
position:absolute;
}

DEMO

关于html - 简单的 HTML/CSS 幻灯片无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12670587/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com