第 31 章 項目實戰-PC 端固定佈局[3]

學習要點：

1.搜索區

2.插入大圖

3.搜索框

主講教師：李炎恢

本章主要開始使用學慣用 HTML5 和 CSS3 來構建 Web 頁面，第一個項目採用 PC 端固定佈局來實現。

一．搜索區

本節課，我們接著 header 頭部往下，來設計一塊搜索區。這個區域，可以是廣告大圖，也可以是用戶註冊，也可以是一個搜索條，都是一個大幅背景，內嵌一個表單。具體造型如下：

從錶面上來分析，就是插入一張背景大圖，然後居中一個搜索條。但是，我們要求最小在 1280 解析度、最大在 1920 解析度能保持最佳的觀看效果。而對於超過 1920 解析度還要保持大圖的位置合理。

二．插入大圖

首先，為了滿足最小的 1280 解析度，大圖本身的寬度必須大於 1280。而主流解析度一般小於 1920，所以圖片寬度設置為 1920 即可滿足幾乎所有用戶。註：超過 1920 解析度，即 2k+以上的解析度一般不適合瀏覽網頁了，會眼瞎。

我們從網上搜索一張風景圖，原圖的解析度為：1920 x 1200。我們截取了中間一段變成：1920 x 600。那麼被插入的背景區塊應該怎麼設置長度呢？

//創建一個搜索區域

<div id="search"></div>

//可以直接設置寬度為 1920 嗎？

#search {
    width: 1920px;
    height: 600px;
}

如果使用 1920 的寬度，勢必在底部產生滾動條，非常的難看。那不採用 1920 的寬度，整張大圖無法全面顯示。那麼我們的設計理念是，1280 解析度顯示大圖中部區域的圖片內容，而瀏覽器不斷增大，就顯示的內容越多。超過 1920 解析度，讓圖片居中，兩邊空白即可。

//使用 100%，並插入背景圖片

#search {
    width: 100%;
    height: 600px;
    background: url(../img/search.jpg);
}

當我們故意縮小解析度時，小於 1280 時，底部會出現滾動條。當我們拉動滾動條時，發現右側出現的大量空白。這時由於之前採用了 100%自適應導致的，那我們強行設置這裡雖然是 100%。但如果小於 1280 解析度，就必須固定在 1280 即可。

//不能小於 1280 解析度

#header {
    min-width: 1263px;
}

#search {
    min-width: 1263px;
}

對於大於 1920 的解析度，我們將背景圖片居中顯示即可，兩邊留白。當然，還有一種方式，是專門設計這張大圖的過渡漸變，兩邊快要接近純色是，添加背景過渡。

//大於 1920 解析度時 

#search {
    background: url(../img/search.jpg) no-repeat center;
}

三．搜索框

我們希望在大圖中間安插一個搜索框，先安插一個半透明的區塊。

//創建一個區塊

<div id="search">
    <div class="center"></div>
    <input type="text" class="search" placeholder="請輸入旅游景點或城市">
    <button class="button">搜索</button>
</div>

//將區塊半透明且居中

#search .center {
    width: 600px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -300px;
    border-radius: 10px;
    opacity: 0.6;
}

//父元素設置相對點

#search {
    position: relative;
}

//搜索框和按鈕樣式

#search .search {
    width: 446px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -27px 0 0 -296px;
    border-radius: 10px;
    border: 1px solid #666;
    font-size: 24px;
    color: #666;
    outline: none;
    padding: 0 10px;
}

#search .button {
    width: 120px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    cursor: pointer;
    margin: -27px 0 0 175px;
    font-size: 22px;
    border-radius: 10px;
    border: none;
    color: #666;
    font-weight: bold;
    outline: none;
}