第八十八節，html5+css3pc端固定佈局，搜索區，插入大圖，搜索框

html5+css3pc端固定佈局，搜索區，插入大圖，搜索框

 

設置一個div做爲搜索區域

1.寬度爲百分之百

2.最小寬度爲1263，由於要考慮到手機，等小屏幕縮小後寬度會自適應，致使破壞佈局，將最小寬度設置爲1263後，當縮小低於1263時，就是1263的寬度不破壞佈局

 

插入大圖

將圖片做爲背景插入div區域，背景顯示一次，背景居中顯示

 

搜索框

在插入背景的div作搜索框，用定位方式居中

 

完成

 

html代碼

<!--搜索區域-->
<div class="sou-suo">
    <h2>搜索</h2>
    <div class="sou-suo2"></div>
    <div class="sou-suo3">
        <input type="text" placeholder="請輸入搜索內容">
        <button>搜索</button>
    </div>
</div>

css代碼

/*搜索區域*/
.sou-suo{
    width: 100%;
    min-width:1263px;
    height: 600px;
    background: url("../img/search.jpg") no-repeat center;
    position: relative;
}
.sou-suo h2{
    display: none;
}
.sou-suo .sou-suo2{
    width: 600px;
    height: 60px;
    background-color: #000000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -30px;
    border-radius: 8px;
    opacity: 0.7;
}
.sou-suo .sou-suo3{
    width: 600px;
    height: 60px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -300px;
    margin-top: -30px;
    border-radius: 8px;
}
.sou-suo .sou-suo3 input{
    width: 500px;
    height: 50px;
    border: none;
    border-radius: 8px;
    margin: 5px 0 5px 5px;
    padding: 0 5px 0 5px;
    font-size: 22px;
    line-height: 50px;
}
.sou-suo .sou-suo3 button{
    width: 70px;
    height: 50px;
    border: none;
    border-radius: 8px;
    float: right;
    margin: 5px 8px 5px 0;
    font-size: 22px;
    line-height: 50px;
    cursor: pointer;
}
.sou-suo .sou-suo3 button:hover{
    background-color: #C6C6C6;
}