簡體   English   中英

中心導航欄和滑塊

[英]Center navigation bar and slider

我正在自學網頁設計,並在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在其容器中水平居中有很多信息,因此,我將僅解釋為什么滑塊未居中。 您可以閱讀以下問答以獲取更多信息: 在div中水平居中div如何輕松地在CSS中水平居中?

您要做的第一件事是從#container刪除float屬性,因為它直接說明了要采取的位置。 然后,將左右邊距設置為auto 最后,將#wrapper的with更改為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庫。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM