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

先上效果

image.png

1 HTML骨架

1.左侧有路网logo
2.中间部分文本框加搜索按钮，下面是热门搜索的超链接列表
3.右侧购物车小图片加两个超链接

    

        

            
                
            
        
        

            

                网站购物车
                    0本
                
                店铺购物车
                    0本
                
            
            

            


                

                

                    
                

            
        
            

            热门搜索：
            公务员考试
            四六级
            高等数学
            自考
        

        

    

当前效果

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