網頁布局介紹

首先需要在網頁上顯示一個大盒子，内容一般為圖檔。

其次在大盒子左右各有一個箭頭，作用是控制圖檔的播放順序。

最後在大盒子下方有小圓點的圖檔導航，作用是顯示圖檔排列位置，也可以點選圓點來顯示對應位置的圖檔。

今天主要實作定位網頁布局，切換圖檔的功能先不做。

代碼實作：

<div class="bigBox">
        <!-- 廣告圖檔 -->
        <img src="../images/tb1.jpg" alt="" class="fl">
        <!-- 左箭頭 -->
        <a href="#" class="aStyle aPl"><</a>
        <!-- 左箭頭 -->
        <a href="#" class="aStyle aPr">></a>
        <!-- 小圓點圖檔導航 -->
        <ul>
            <li><a href="#" class="aCircle selected"></a></li>
            <li><a href="#" class="aCircle"></a></li>
            <li><a href="#" class="aCircle"></a></li>
            <li><a href="#" class="aCircle"></a></li>
            <li><a href="#" class="aCircle"></a></li>
        </ul>
    </div>

<style>
* { 
  margin: 0;
  padding: 0;
}
.bigBox {
  width: 520px;
  height: 280px;
  margin: 100px auto;
  position: relative;
}
img {
  width: 520px;
  height: 280px;
}
a {
  text-decoration: none;
  color: white;
}
/* 箭頭樣式 */
.aStyle {
  position: absolute;
  top: 50%;
  /* 有絕對定位，行元素可以直接設定寬高 */
  width: 20px;
  height: 30px;
  background: rgba(0, 0, 0, 0.7);
  /* 字型水準垂直居中 */
  text-align: center;
  line-height: 30px;
}
/* 左箭頭定位 */
.aPl {
  left: 0;
  /* 右上角和右下角設定圓角 */
  border-radius: 0 15px 15px 0;
}
/* 右箭頭定位 */
.aPr {
  right: 0;
  /* 右上角和右下角設定圓角 */
  border-radius: 15px 0 0 15px;
}
/* 圖檔導航顯示 */
ul {
  position: absolute;
  bottom: 15px;
  left: 50%;  
  width: 70px;
  height: 13px;
  /* 按照小盒子寬度一半向左移動，才可以使小盒子在大盒子中水準居中 */
  margin-left: -35px; 

  background: rgba(255, 255, 255, 0.3);
  border-radius: 7px;
}
li {
  float: left;
  list-style: none;
}
.aCircle {
  display: block;
  width: 8px;
  height: 8px;
  background-color: white;
  border-radius: 50%;
  margin: 3px;
}
/* 原點被選中的狀态 */
.selected {
  background-color: #ff5000;
}

網頁布局小總結

标準流：塊級盒子從上到下按照順序排列。

應用場景：網頁布局的垂直塊級大盒子。

浮動：可以讓多個塊級元素一行顯示或者左右對齊盒子。

應用場景：導航欄、内容展示塊等。

定位：可以讓多個塊級元素前後疊壓來顯示，元素自由在某個盒子内移動就使用定位布局。

應用場景：特别功能的小盒子，如左右控制箭頭，傳回頂部等。

初識CSS——定位實用小案例

網頁布局介紹

網頁布局小總結