Question

我在我的页面中集成ResponsiveSlider时遇到了一些麻烦，因为我整合它的每种类型设计都搞砸了。下面的div上升并隐藏在滑块下，文本下降等......实际上是整页。

您可以找到实时版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;
}

远非完美，但它完成了工作，如果你有任何可以添加的东西，可以放心使用。

Answer 1

您的内容类和滑块类重叠，但滑块的内容正在推送内容的内容。滑块的ul支架的大小小于滑块中的大小，内容div与此对齐，而不是li标签中的内容。

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

Answer 2

您的图片浮动，您需要清除其下方的容器。

.content {
clear: both;
}

集成jQuery Slider搞砸了设计

2 个答案: