電商項目實戰第二節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【搜索框那一欄】

【考拉海購網站】之【搜索框那一欄】

第一步，分析佈局

這是佈局的具體情況 >>>

左邊一個勞拉網的logo圖案
中間一個圓角邊的div，div裏面包裹了一個沒有邊線的input輸入框和一個放大鏡搜索按鈕

右邊一個圓角的購物車提交框按鈕

---

接上一篇文章(電商項目實戰第一節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【頂部導航】)的代碼後面開始寫

第二步，在html代碼裏面補全需要的標籤

這些標籤的佈局結構是根據個人對網頁的分析得來的，爲了減少文章內容過長造成閱讀疲勞，我會把 分析過程註釋在代碼裏面 >>>

   <!-- 主要內容 -->
    <div class="container">
        <!-- 搜索欄那一欄 -->
        <div class="searchBar">
            <a href=""><img src="./logo.png" alt=""></img></a>
            <a href="" class="shopCar"><i class="shopIcon"></i> 購物車</a>
            <div class="searchText">
                <span class="zoomIcon"></span>
                <input type="text" placeholder="數據庫爆破工具">
                <span class="searchButton"><i></i></span>
            </div>
        </div>
    </div>

第三步，寫CSS樣式美化html

/* ---------------搜索框那一欄---------------------*/
/* 搜索框整體 */
.searchBar {
    width: 1090px;
    height: 100px;
    margin: 0 auto;
    margin-top: -12px;
}

/* 左邊的logo圖案，是一個超鏈接 */
.searchBar a {
    display: block;

}

/* 設置左邊logo圖案 */
.searchBar a img {
    float: left;
    width: 210px;
    height: 68px;
    cursor: pointer;
    margin-top: 20px;
    z-index: 9;
}

/* 搜索輸入框部分 */
.searchText {
    float: right;
    width: 510px;
    height: 36px;
    padding-left: 1px;
    margin-top: 28px;
    margin-right: 62px;
    background-color: #ffffff;
    border: 2px solid #ff2337;
    border-radius: 40px;
}

/* 輸入框樣式設置 */
.searchText input[type="text"] {
    display: block;
    width: 80%;
    margin-top: 9px;
    margin-left: 36px;
    border: 0px;
}

/* 輸入框的提示字段字體樣式，這裏設置爲italic，表示斜體 */
.searchText input[type="text"]::placeholder {
    font-style: italic;
}

/* 當時點擊輸入框時，輸入框默認的外邊框會別隱藏 */
.searchText input[type="text"]:focus {
    outline: none;
}

/* 購物車 */
.shopCar {
    display: block;
    float: right;
    width: 106px;
    height: 36px;
    margin-top: 28px;
    margin-right: 75px;
    line-height: 36px;
    border: 2px solid #ff1e32;
    border-radius: 36px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
}

/* 當鼠標移動到購物車標籤上時，購物車標籤的字體顏色和底色的變化 */
.shopCar:hover {
    color: #ff1e32;
    background-color: #fff4f5;
}

/* 購物車icon圖標 */
.shopIcon {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    margin-bottom: -5px;
    background: url(./購物車.png) no-repeat 0 0;
}


.searchText img {
    transform: scale(0.5);
    border: 1px solid;
    margin-top: -4px;
    background-color: rgb(214, 214, 214);
}

/* 設置輸入框左邊的那個小放大鏡，這裏有個細節 */
/* all_Icon.png實際是一個很大的雪碧圖，我們這裏使用css3的背景定位，設置要裁剪的區域爲-466px,-677px這個位置 */
.searchText .zoomIcon {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-left: 10px;
    margin-top: 11px;
    background-position: -466px -667px;
    background-image: url('./all_Icon.png');
    border: 1px;
}

/* 搜索按鈕 */
.searchButton {
    display: block;
    float: right;
    width: 56px;
    height: 38px;
    margin-right: -4px;
    margin-top: -29px;
    background-color: #ff2337;
    border-radius: 30px;
    cursor: pointer;
}

/* 搜索按鈕的放大鏡圖標 */
.searchButton i {
    display: block;
    width: 56px;
    height: 38px;
    margin-right: -4px;
    margin-top: 0px;
    background-image: url('./放大鏡大.png');
    background-repeat: no-repeat;
    background-position: 50%;
    border-radius: 30px;
}

/* 當鼠標移動到搜索按鈕上時會發生的變化 */
.searchButton:hover {
    background: linear-gradient(270deg, #f85a7d, #ff3234);
}

代碼部署情況參考 >>>

上面的CSS代碼有個細節之處，是關於雪碧圖的 >>>

要從雪碧圖從裁剪出所需要的圖標，需要用到 background-position 屬性進行定位
然後設置需要背景的.ZoomIcon類的標籤具有一定的 寬和高 能容納下所裁剪的圖標
圖標被裁剪後會根據寬高自動填充該 .ZommIcon類的標籤

---

最終效果演示