先上效果

image.png

1 HTML骨架

1.左側有路網logo
2.中間部分文本框加搜索按鈕，下面是熱門搜索的超鏈接列表
3.右側購物車小圖片加兩個超鏈接

<div class="searchWrap">
    <div class="searchBar">
        <h1 class="logo">
            <a href="">
                <img src="../有路網圖片/logo.jpg" alt="">
            </a>
        </h1>
        <div class="search">
            <div class="bookCart">
                <a href="" target="_blank">網站購物車
                    <span class="counts">0</span>本
                </a>
                <a href="#" target="_blank">店鋪購物車
                    <span class="counts">0</span>本
                </a>
            </div>
            <div class="searchFrame">
            <form action="" method="">

                <input type="text" name="bookName" placeholder="書名、作者、出版社、ISBN、文具">

                <div class="search-btn">
                    <input type="submit" name="keyBtn" value="搜索">
                </div>

            </form>
        </div>
            <div class="search_hot">
            <span>熱門搜索：</span>
            <a href="" target="_blank">公務員考試</a>
            <a href="" target="_blank">四六級</a>
            <a href="" target="_blank">高等數學</a>
            <a href="" target="_blank">自考</a>
        </div>

        </div>

    </div>
</div>

當前效果

image.png

2 引入外部重置樣式

這里就不粘貼代碼了，和頂部外部樣式相同

image.png

3 添加整體樣式

.searchBar {
            width: 1200px;
            margin: 0 auto;
            padding-top: 40px;
        }

image.png

4 添加logo圖片樣式

.searchBar .logo {
            float: left;
            width: 472px;
        }

image.png

5 添加中間部分整體樣式

.search{
            margin-left: 472px;
        }
        .searchFrame {
            width: 500px;
            height: 36px;
            border: 3px solid #de0304;
            position: relative;
        }
        .search_hot{
            font-size: 16px;
            padding-top: 4px;
        }

image.png

6 添加輸入框長寬、行高樣式

.searchFrame input {
            width: 100%;
            padding: 9px 0;
            line-height: 18px;
            background-color: #fff;
            border: 0;
            font-size: 14px;
        }

image.png

7 按鈕外部包裹的div樣式

.searchFrame .search-btn {
            width: 100px;
            height: 36px;
            position: absolute;
            top: 0;
            right: 0;
        }

image.png

8 將按鈕填充成紅色

.searchFrame .search-btn input {
            width: 100px;
            height: 36px;
            background-color: #de0304;
            font-size: 18px;
            font-weight: bold;
            color: #fff;
            border: 0;
            cursor: pointer;
            text-align: center;
            letter-spacing: 8px;
            text-indent: 8px;
        }

image.png

9 添加右側div樣式和購物車背景圖

.searchBar .bookCart {
            background: url("../有路網圖片/cart.jpg") no-repeat;
            padding: 2px 0 0 48px;
            line-height: 18px;
            float: right;
        }

image.png

10 購物車a標簽樣式

.searchBar .bookCart a {
            display: block;
            height: 18px;
            color: #593b07;
            font-size: 12px;
        }

image.png

11 購物車span標簽樣式，數字的顏色

.searchBar .bookCart .counts {
            color: #dd0001;
            font-size: 14px;
            font-weight: bold;
        }

image.png