网页搜索模块
技术要点：Bootstrap表单、Bootstrap按钮
结构布局：
主要步骤：
代码展示：
<!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时：
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！