中间导航条和滑块

Center navigation bar and slider

本文关键字：导航 中间      更新时间：2023-09-26

我正在自学网页设计，我正在Dreamweaver中建立一个随机的有趣的网站。我试图中心的容器，在那里的图像滚动，自动调整取决于屏幕大小的中心(所以左边和右边可以是偶数)。我不知道该怎么做。另外，图像之间有一些延迟，可以看到容器的黄色背景是正常的吗??有没有办法让我的(UL)占据网站的顶部，所以顶部是白色的，然后底部是黑色的，我怎么能把我的导航栏居中对齐??

这就是我要做的…

好的，这里是链接到代码唯一的事情是我不知道为什么jquery代码不运行的图像应该自动滚动或点击橙色框("箭头")http://codepen.io/anon/pen/jPXEWd

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>

</head>
<body>
<div class="Head">

<div class="Nav">
        <ul>
            <li><a href="#">HOME</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT US</a></li>
            <li><a href="#">GALLERY</a></li>
        </ul>
</div>


<style>
body{
background:black;
}

.Nav{
background-color:white;
height:40px;

  }
.Nav ul{
color:white;
font-family:"American Typewriter";
padding:0px;
}
.Nav ul li{
  list-style:none;
  margin-left:350px;
}
.Nav ul li a{
  text-decoration:none;
  float:left;
  padding: 10px 40px;
  color:black;
}
.Nav ul li a:hover{
color:orange;
}
</style>
<script src="../Downloads/jquery-1.11.3.min.js"></script>
<script src="../Downloads/jquery.cycle.all.js"></script>
<script type="text/javascript">
$('#slider').cycle({ 
fx:     'scrollHorz', 
speed:  'slow',  
next:   '#next', 
prev:   '#prev ' 
});
</script>

<!--This is where the slider is happening-->
<style type="text/css">
 #wrapper{
display:block;
height:500px;
width:500px;
}
#container{
background-color:#FFC;
display:block;
float:left;
height:500px;
width:1200px;
overflow:auto;
margin-left:25%;
margin-top:50px;
}
#prev{
background-image:url(../Downloads/1438243795_circle_back_arrow.png);
background-repeat:no-repeat;
background-position:center center;
display:block;
float:left;
height:500px;
width:200px;
position:relative;
z-index:99;

}

#next{
background-    image:url(../Downloads/1438243790_circle_next_arrow_disclosure.png);
background-repeat:no-repeat;
background-position:center center;
display:block;
float:right;
height:500px;
width:200px;
position:relative;
z-index:99;

}
#slider{
display:block;
float:left;
height:500px;
width:1200px;
overflow:hidden;
position:absolute;

}
</style>
<div id= "wrapper">
<div id = "container">
    <div class="controller" id="prev" ></div>
    <div id="slider">
    <img src="../Pictures/1910493.jpg" width="1920" height="1080" />
    <img src="../Pictures/1822211.jpg" width="2560" height="1600" /> 
    <img src="../Pictures/old_book_4-wallpaper-1920x1440.jpg" width="1920"       height="1440" /> </div>
  <div class="controller" id="next" ></div> 
  </div>
</div>
<div id = "background">
</div>  


</body>
</html>

关于如何在其容器内水平居中有很多信息，因此我将只解释为什么您的滑块不居中。你可以阅读这些问题和更多的信息:水平居中的div或如何使用CSS轻松水平居中?

你要做的第一件事是从#container中删除float属性，因为它直接说明了要采取的位置。然后，将左右边距设置为"auto"。最后，将#wrapper的宽度改为100%，即删除'500px'。

新的CSS代码为:

#wrapper {
  display: block;
  height: 500px;
}
#container {
  background-color: #FFC;
  display: block;
  height: 500px;
  width: 1200px;
  overflow: auto;
  margin: 50px auto 0 auto;
}

工作演示:http://codepen.io/anon/pen/xGmbqE

PD:为了使您的演示工作，您必须在设置部分(JavaScript选项卡)配置所需的外部JavaScript库。

相关文章：