第八十八节，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;

}

巴特西

第八十八节，html5+css3pc端固定布局，搜索区，插入大图，搜索框

最新文章

热门文章