图片轮播（bootstrap）与圆角搜索框(纯css)

最新推荐文章于 2024-04-12 22:35:54 发布

weixin_34395205

最新推荐文章于 2024-04-12 22:35:54 发布

阅读量245

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Micheal-G/p/5015617.html

版权

  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>