【电商3】header search

• 小盒子先定位

• placeholder和padding-left

• 因为只有一个.search，前面就不用写别的父级元素了“header”

html

<!-- search模块 -->
        <div class="search">
            <input type="search" placeholder="语言开发">
            <button>搜索</button>
        </div>

common.css

/* 因为只有一个.search，前面就不用写别的父级元素了“header” */
.search {
    position: absolute;
    left: 346px;
    top: 25px;
    width: 538px;
    height: 36px;
    border: 2px solid #b1191a;       /* 2px */
}

.search input {         /* 小盒子先定位 */
    float: left;
    height: 32px;
    width: 454px;
    padding-left: 10px;      /*attention*/
}

.search button {
    float: right;
    height: 36px;
    font-size: 16px;
    width: 82px;
    color: white;
    background-color: #b1191a;
}