gpt4 book ai didi

javascript - 集成 jQuery Slider 搞乱了设计

转载 作者:太空宇宙 更新时间:2023-11-04 13:59:58 25 4
gpt4 key购买 nike

我在将 ResponsiveSlider 集成到我的页面时遇到了一些麻烦,因为我集成它的每种类型的设计都一团糟。下面的 div 上升并隐藏在 slider 下,文本下降等等......实际上是所有页面。

你可以找到一个实时版本here

抱歉,我正在努力学习,但保持代码整洁并不是我的首要任务:/

HTML:

<div class="container">
<div id="head">
<header>
<img src="http://html5hub.com/wp-content/uploads/2013/07/default-share1.png" alt="photo profile">
<ul>
<li><h1>Jack Foster</h1></li>
<li>7 Beer Street, London</li>
<li>Phone : 00000456789</li>
<li>contact@youdontknowjack.com</li>
</ul>
</header>
<nav>
<ul>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
</ul>
</nav>
<!--Problem down here-->
<ul class="rslides">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
</ul>
</div>
<div class="content">
<div id="history-back">
<div id="history">
<h2>History & Profile</h2>
<p>...</p>
</div>
</div>
<div id="skill">
<h2>Skillset</h2>
<p>...</p>
</div>
<div id="studies-back">
<div id="studies">
<h2>Studies</h2>
<p>...</p>
</div>
</div>
<div id="work">
<h2>Work</h2>
<p>...</p>
</div>
<footer>
<div>
<ul style="list-style: none">
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
</ul>
</div>
<div>
<ul style="list-style: none">
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
</ul>
</div>
<div>
<ul style="list-style: none">
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">About me</a></li>
</ul>
</div>
</footer>
</div>
<script>
$(function() {
$(".rslides").responsiveSlides();
});
</script>

还有我写的糟糕的 CSS:

*{
margin:0;
padding:0;
}
.container {
width: 960px;
margin: 0 auto;
margin-left: 15%;
margin-right: 15%;
background: #ffffff;
-moz-box-shadow: 0px 0px 8px #bbbbbb;
-webkit-box-shadow: 0px 0px 8px #bbbbbb;
box-shadow: 0px 0px 8px #bbbbbb;
height: 100%
}
body {
color: black;
background: #eacece;
background: url(../images/tilepng.png);
}
body h2 {
font: ;
margin-bottom: 1em;
}
header {
position: relative;
}
header h1 {
font-style: ;
}
header ul {
padding: 3px;
float: right;
vertical-align: middle;
margin-right: 2em;
margin-top: 4em;
}
header li {
display: block;
}
nav ul {
padding: 10px;
background: #F9F9F9;
}
nav li {
display: inline;
padding: 0px 10px 0px 10px;
}
#history-back {
min-height: 150px;
max-height: 200px;
background: url(../images/tilegif.gif);
}
#history {
margin: 3em;
display: inline-block;
}
#skill {
background: #ffffff;
margin: 3em 3em 3em 3em;
}
#studies-back {
min-height: 150px;
max-height: 200px;
background: url(../images/tilegif.gif);
}
#studies {
height: 100%;
margin: 3em 3em 3em 3em;
display: inline-block;
}
#work {
background-color: #ffffff;
margin: 3em;
margin-bottom: 3em;
}
footer { background: #313131; width: 960px; height: 100%}
footer div { background: #313131; width:290px; padding: 15px; float:left; text-align: center}

/* rslides styles */
.rslides {
position: relative;
list-style: none;
width: 100%;
padding: 0;
margin: 0 0 20px 0;
}

.rslides li {
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}

.rslides li:first-child {
position: relative;
display: block;
float: left;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}

远非完美,但它完成了工作,如果您有任何要添加的内容以缓解它,请随时添加。

最佳答案

您的内容类和 slider 类重叠,但 slider 的内容将内容的内容向下推。 slider 的 ul 支架的尺寸小于 slider 中的尺寸,内容 div 与其对齐,而不是 li 标签中的尺寸。

对于样式修复,您可以在内容的顶部应用填充以快速修复,或者为您的 ul 提供您要滑过的图片的适当大小。不过我不熟悉这个特定的插件,所以我不确定是否有脚本修复程序。您可以在初始化时指定容器高度。

关于javascript - 集成 jQuery Slider 搞乱了设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21586006/

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