1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 8 <title>图片轮播+底部居中搜索框</title> 9 10 <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> 11 <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"> 12 13 <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> 14 <script src="/mobile/addon/jquery.mmenu.min.all.js"></script> 15 <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 16 <style type="text/css"> 17 *{ 18 margin:0px; 19 padding:0px; 20 21 } 22 #carousel-example-generic{ 23 width:680px; 24 height:480px; 25 26 } 27 #search{ 28 position:relative; 29 width:680px; <!--可以设置为100%，以适应窗口变化，始终居中对齐--> 30 height:24px; 31 } 32 #search-wrap{ 33 position:absolute; 34 margin-top:-10px; <!--达到覆盖图片轮播底部的作用--> 35 left:50%; <!--这部分是搜索框居中显示的关键。--> 36 margin-left:-130px; 37 width:260px; 38 height:36px; 39 border-radius:18px; 40 box-shadow: 0 0 3px rgba(0,0,0,.14); 41 background-color:#FFF; 42 43 } 44 45 #search-wrap .search-content{ 46 box-shadow: none; 47 48 border:0 none; 49 font-family: "Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Helvetica,sans-serif; 50 margin-top:3px; 51 margin-left:18px; 52 width:190px; 53 height:30px; 54 } 55 #search-wrap .search-btn{ 56 border:0px; 57 float:right; 58 margin:4px 4px 4px 0; 59 width:46px; 60 height:28px; 61 border-radius:14px; 62 background-color:#2980b9; 63 color:#FFF; 64 text-align:center; 65 line-height:28px; 66 67 } 68 } 69 70 </style> 71 </head> 72 73 <body> 74 75 <div class="content"> 76 77 <!-- bootstrap 轮播--> 78 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> 79 <!-- Indicators --> 80 <ol class="carousel-indicators"> 81 <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li> 82 <li data-target="#carousel-example-generic" data-slide-to="1"></li> 83 <li data-target="#carousel-example-generic" data-slide-to="2"></li> 84 </ol> 85 86 <!-- Wrapper for slides --> 87 <div class="carousel-inner" role="listbox"> 88 <div class="item active"> 89 <img src="/mobile/img/jordan1.png" alt="first"> <!--自行添加图片 --> 90 <div class="carousel-caption"> 91 <h1> Micheal Jordan</h1> 92 </div> 93 </div> 94 <div class="item"> 95 <img src="/mobile/img/jordan2.png" alt="second"> <!--自行添加图片 --> 96 <div class="carousel-caption"> 97 <h1> Micheal Jordan</h1> 98 </div> 99 </div> 100 <div class="item"> 101 <img src="/mobile/img/jordan3.png" alt="third"> <!--自行添加图片 --> 102 <div class="carousel-caption"> 103 <h1>Micheal Jordan</h1> 104 </div> 105 </div> 106 </div> 107 108 <!-- Controls --> 109 <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"> 110 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span> 111 <span class="sr-only">Previous</span> 112 </a> 113 <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"> 114 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> 115 <span class="sr-only">Next</span> 116 </a> 117 </div> 118 119 <!-- 搜索框 --> 120 <div id="search"> 121 <div id="search-wrap"> 122 <input class="search-content" type="text" placeholder="输入搜索内容" name="word"> 123 <button class="search-btn" type="submit">搜索</button> 124 </div> 125 </div> 126 127 </div> <!-- content end --> 128 </body> 129 </html>