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;
}