<!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8">

         <meta http-equiv="X-UA-Compatible" content="IE=edge">

         <meta name="viewport" content="width=device-width, initial-scale=1">

         <title>图片轮播+底部居中搜索框</title>

         <link href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">

         <link href="//cdn.bootcss.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">

         <script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>

         <script src="/mobile/addon/jquery.mmenu.min.all.js"></script>

         <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

 <style type="text/css">

     *{

         margin:0px;

         padding:0px;

     }

     #carousel-example-generic{

         width:680px;

         height:480px;

     }

     #search{

         position:relative;

         width:680px;   　　<!--可以设置为100%，以适应窗口变化，始终居中对齐-->

         height:24px;

     }

     #search-wrap{

         position:absolute;

         margin-top:-10px;　<!--达到覆盖图片轮播底部的作用-->　

         left:50%;　　　　　　<!--这部分是搜索框居中显示的关键。-->

         margin-left:-130px;

         width:260px;　　　　

         height:36px;　　　　

         border-radius:18px;

         box-shadow: 0 0 3px rgba(0,0,0,.14);

         background-color:#FFF;

     }

     #search-wrap .search-content{

         box-shadow: none;

         border:0 none;

         font-family: "Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",Arial,Helvetica,sans-serif;

         margin-top:3px;

         margin-left:18px;

         width:190px;

         height:30px;

     }

     #search-wrap .search-btn{

         border:0px;

         float:right;

         margin:4px 4px 4px 0;

         width:46px;

         height:28px;

         border-radius:14px;

         background-color:#2980b9;

         color:#FFF;

         text-align:center;

         line-height:28px;

     }

 }

 </style>

 </head>

 <body>

 <div class="content">

 <!-- bootstrap  轮播-->

 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

       <!-- Indicators -->

       <ol class="carousel-indicators">

         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>

         <li data-target="#carousel-example-generic" data-slide-to="1"></li>

         <li data-target="#carousel-example-generic" data-slide-to="2"></li>

       </ol>

       <!-- Wrapper for slides -->

       <div class="carousel-inner" role="listbox">

         <div class="item active">

           <img src="/mobile/img/jordan1.png" alt="first"> <!--自行添加图片 -->

           <div class="carousel-caption">

            <h1> Micheal Jordan</h1>

           </div>

         </div>

         <div class="item">

           <img src="/mobile/img/jordan2.png" alt="second"> <!--自行添加图片 -->

           <div class="carousel-caption">

                <h1> Micheal Jordan</h1>

           </div>

         </div>

         <div class="item">

           <img src="/mobile/img/jordan3.png" alt="third"> <!--自行添加图片 -->

           <div class="carousel-caption">

              <h1>Micheal Jordan</h1>

           </div>

         </div>

       </div>

       <!-- Controls -->

       <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

         <span class="sr-only">Previous</span>

       </a>

       <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

         <span class="sr-only">Next</span>

       </a>

 </div>

 <!-- 搜索框 -->

 <div id="search">

 <div id="search-wrap">

     <input class="search-content"  type="text" placeholder="输入搜索内容" name="word">

     <button class="search-btn" type="submit">搜索</button>

 </div>

 </div>

         </div> <!-- content end -->

     </body>

 </html>

图片轮播（bootstrap）与 圆角搜索框(纯css)的更多相关文章

  1. 纯javaScript、jQuery实现个性化图片轮播

    纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...

  2. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  3. Jquery图片轮播和CSS图片轮播

    学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...

  4. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  5. jQuery - 广告图片轮播切换

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. 利用bootstrap写图片轮播

    利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...

  7. 基于bootstrap的图片轮播效果展示

    <!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...

  8. bootstrap 图片轮播效果

    <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...

  9. 全面解析Bootstrap图片轮播效果

    http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...

随机推荐

  1. 立体角的单位——立体弧度（sr）

    国际单位制(SI)中,关于物理量 发光强度 的介绍: 1cd(坎德拉)为一光源在给定方向的发光强度,该光源发出频率为540×1012Hz(赫兹)的单色辐射,且在此方向上的辐射强度为 1/683 W/s ...

  2. Topcoder SRM570 900 CurvyonRails

    题意:给定一个网格,一些格子是障碍不用管,剩余的格子是城市,你可以修建铁路,铁路的形状可以是直的或者弯的,也就是说可以以这个点为节点连接它四联通的其中两个方块.要求用一个或多个环来覆盖所有城市.对于有 ...

  3. 基于UDP协议模拟的一个TCP协议传输系统

    TCP协议以可靠性出名,这其中包括三次握手建立连接,流控制和拥塞控制等技术.详细介绍如下: 1. TCP协议将需要发送的数据分割成数据块.数据块大小是通过MSS(maximum segment siz ...

  4. 端口限制情况下php+xdebug环境配置

    PHP程序在开发的时候调试是比较方便的,大体情况下,输出,打log是可以解决几乎所有问题. 但是还不够,有些问题,用打log的形式定位问题是相当痛苦的事情,有些时候测试环境没配好的话,你可能需要做许多 ...

  5. AOP基础—代理模式

    代理模式是常用的java设计模式,他的特征是代理类与委托类有同样的接口,代理类主要负责为委托类预处理消息.过滤消息.把消息转发给委托类,以及事后处理消息等.代理类与委托类之间通常会存在关联关系,一个代 ...

  6. Dev 13.2 汉化教程（提供汉化cs文件下载）

    主要为了汉化 FindPanel里的Find和Clear控件名称,研究了一些时间. 废话不说.直接上干货. 1.已将cs文件分享,下载放到项目里. 下载链接: http://pan.baidu.com ...

  7. sqlmap的学习以及使用

    PDF.NET(PWMIS数据开发框架)之SQL-MAP目标和规范 将复杂查询写到SQL配置文件--SOD框架的SQL-MAP技术简介 PDF.NET数据开发框架 之SQL-MAP使用存储过程 不懂还 ...

  8. 简单的DropDownButton(Winform)

    public class DropDownButton : System.Windows.Forms.Control { private System.ComponentModel.Container ...

  9. MySQL workbench 中文乱码 显示口口

    Edit-->perference...-->Apperance  如下图 即可 转载自:http://blog.csdn.net/shxluwei/article/details/802 ...

  10. i2c之at24c08驱动及应用程序

    1-->修改板级文件arch/arm/mach-s3c2440/mach-mini2440.c 步骤: ->添加引用 #include <linux/i2c.h> ->添 ...