有路网页面拆解--搜索栏

先上效果

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