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>

图片轮播（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. PHP基础教程-54课-问题

    question: $arr = array(1,2,3,4); /*如何通过foreach 将数组变成 $arr = arry(2,4,6,8) */ 起初用: $arr = array(1,2,3 ...

  2. 杭电1597--find the nth digit--假设：S1 = 1,S1=12,S3=123,S4=1234...

    我是把它分层来求的,也就是说第一层是1,第二层是12,第三层是123......你们该懂的!! #include <iostream>#include <cmath>using ...

  3. linux中用户的主目录～

    -在Linux中代表用户主目录 对一般用户,-表示/home/(用户名) 对于root用户,-表示/root 如果要查看-的真实面貌,可以先进入-目录,然后用pwd -P命令查看-的绝对路径 cd ~ ...

  4. android学习之ListView

    移通152余继彪 该组件用于显示列表的view  包含了三个关键元素 listView 适配器 以及数据,适配器主要是用于将数据映射到listview,适配器数据主要是有hasmap 配合list对每 ...

  5. CentOS 安装VNC Server

    环境 服务器:192.168.10.181 系统:CentOS 6.0 安装过程 1.切换至root用户 2.检测系统是否安装VNC [root@Nginx canyouNgx]# rpm -q vn ...

  6. android 测试 Monkey 和 MonkeyRunner 的使用

    一.Monkey的使用 Monkey使用起来比较简单,简而言之就是模拟手机点击效果,随机发送N个点击动作给手机,主要对于程序的稳定和承受压力的测试. 1.首先连接上你的手机或者启动模拟器: 2.运行C ...

  7. Unity3D之C# yield waitforseconds

    Wait for seconds requires a couple things in order to work properly and chances are if it's not work ...

  8. 进程间通信--fork函数

    #include <unistd.h> pid_t fork(void); fork() creates a new process by duplicating the calling ...

  9. 设置DIV块元素在浏览器页面中垂直居中

    任务目标 实践HTML/CSS布局方式 深入了解position等CSS属性 任务描述 实现如 示例图(点击打开) 的效果 灰色元素水平垂直居中,有两个四分之一圆位于其左上角和右下角. 任务注意事项 ...

  10. svn co

    svn  co  的用法经常有两种:    第一种:  直接  svn  co    http://svnserver/mypro/trunk                 此时, 会在你的当前目录 ...