网页搜索模块

技术要点:Bootstrap表单、Bootstrap按钮
结构布局
网页搜索模块_第1张图片
主要步骤:
在这里插入图片描述
代码展示:

<!DOCTYPE html>
<html>
<head>
<title>网页搜索模块</title>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<script src="lib/html5shiv/html5shiv.min.js"></script>
<script src="lib/respond/respond.min.js"></script>
<![endif]-->
<style>
    .reservation{
        background-color:rgba(255,255,255,0.5);
    }
    .btn-default{
        background-color: red;
        width: 100px;
        height: 40px;
    }
    .form-control{
        height: 50px;
        margin:0 auto;
    }

#background{
    background:url("image/食物.jpg") repeat;
    width: 100%;
    height: 400px;
    border: 1px red solid;

}
.container{
    margin-top:30px;
}
.form-group select{
    width: 400px;
}
.form-group input{
    width: 400px;
    margin: 0 auto;
}

body,select,button,input{
    font-family:'Courier New', Courier, monospace;
}
@media (max-width:992px){
  #background{
    background:url("image/食物.jpg") repeat;
    width: 100%;
    height: 400px;
    border: 1px red solid;
     }  
     .reservation{
        width:400px;
        height: 250px;
        margin: 0 auto;
        padding-top: 30px;
    }
}
@media screen and (min-width:992px){
      #background{
    background:url("image/食物.jpg") repeat;
    width: 100%;
    height: 400px;
    border: 1px black solid;
     }  
     .reservation{
        width:500px;
        height: 250px;
        margin: 0 auto;
        padding-top: 30px;
    }
}
@media screen and (max-width:768px){
    .reservation{
        width:400px;
        height: 200px;
        margin: 0 auto;
        padding-top: 30px;
    }
    .form-group select{
       width: 250px;
    }
     .form-group input{
    width: 250px;
    margin: 0 auto;
     }
     
    .form-group button{
      margin-left:130px;
    }
     .form-control{
        height: 30px;
    }
    .btn-default{
        width: 80px;
        height: 30px;
        background:lightcoral;
    }
}
</style>
</head>
<body>
    <div id="background">
    <div class="container">
        <div class="reservation">
            <form class="form-horizontal">
                <div class="form-group">
                  <div class="col-sm-12">
                    <input type="email" class="form-control" id="inputEmail3" placeholder="请输入餐厅名称">
                  </div>
                </div>
                <div class="form-group">
                    <select class="form-control">
                      <option>四川</option>
                      <option>北京</option>
                      <option>上海</option>
                      <option>云南</option>
                      <option>重庆</option>
                    </select>
                  </div>
                <div class="form-group">
                  <div class="col-sm-offset-4 col-sm-12">
                    <button type="submit" class="btn btn-default"><div class="glyphicon glyphicon-search"></div></button>
                  </div>
                </div>
              </form>
        </div>
    </div>
</div>
      
    <script src="bootstrap-3.3.7/js/jquery.min.js"></script>
    <script src="bootstrap-3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

当浏览器窗口大于等于992px时:

当浏览器窗口小于768px时:
网页搜索模块_第2张图片

你可能感兴趣的:(html)