图片轮播(bootstrap)与 圆角搜索框(纯css)
<!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)的更多相关文章
- 纯javaScript、jQuery实现个性化图片轮播
纯javaScript实现个性化图片轮播 轮播原理说明<如上图所示>: 1. 画布部分(可视区域)属性说明:overflow:hidden使得超出画布部分隐藏或说不可见.position: ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- Jquery图片轮播和CSS图片轮播
学习Jquery以后,很多时候觉得比写源生代码要简单一点.我们用JQuery做了一个图片轮播的动画,感觉比写CSS要简单一些.下面我来具体讲一下是怎么用JQuery来写. <body> & ...
- 纯js写图片轮播插件
最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...
- jQuery - 广告图片轮播切换
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 利用bootstrap写图片轮播
利用bootstrap写图片轮播 缺点是轮播没有固定样式图片样式会改变外框的大小,所以要再设置 以及左右按钮的style也要从新设置 <div class="carousel slid ...
- 基于bootstrap的图片轮播效果展示
<!DOCTYPE html><html lang="zh-CN"> <head> <meta charset="utf-8&q ...
- bootstrap 图片轮播效果
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="http: ...
- 全面解析Bootstrap图片轮播效果
http://www.jb51.net/article/75806.htm 一 . 结构分析 一个轮播图片主要包括三个部分: ☑ 轮播的图片 ☑ 轮播图片的计数器 ☑ 轮播图片的控制器 第一步:设计轮 ...
随机推荐
- iOS系统网络抓包方法
转到自己的博客收藏. 1. 网络共享 + 可视化抓包工具 基本原理 原理比较简单,ios设备通过代理方式共享连接mac电脑的无线网卡,使用抓包工具抓包,然后进行分析(我们推荐使用Wireshark,在 ...
- koa框架异步返回值的操作(co,koa-compose)
最近在做demo的时候使用了koa框架,自己做了一个静态服务器,首先判断访问文件是否存在,在回调函数中设置了this.body,run之后,各种404,花了N长的时间把koa-compose和co模块 ...
- mysql sql 分页
mysql SELECT * FROM TT LIMIT 1,20 少量 数据 大量数据(百万级) select * from news where id>=(select id from ne ...
- oc--UINavigationController控制器
UINavigationController导航控制器 UINavigationController导航控制器,是多个界面间跳转的重要元素,可以理解为它存储着多个viewController,它的存储 ...
- 人工智能交互集成在线语音合成能力的Tips
在线语音合成就是在联网的场景下将文字转换成声音,实现机器向人的声音交互.这个概念应该是比较好理解的,下面就结合官网的Android在线合成的Demo讲解一下合成的流程以及大家经常遇到的一些问题. 到官 ...
- runtime学习实战一:类的属性进行归档解档
#import <Foundation/Foundation.h> @interface PYPerson : NSObject @property (nonatomic, assign) ...
- liquibase的使用
前言 liquibase是一个数据库持续集成插件.独立于数据库存在,oracle,mysql,db2,h2,sql server,postgresql都能使用.它使用配置文件来更新数据库结构,并加入版 ...
- @font-face 的用法
现在很多设计用的字体都是五花八门的.我们切图又不能很好的让搜索爬虫搜索.就会使用@font-face方法: @Font-face目前浏览器的兼容性: Webkit/Safari(3.2+):TrueT ...
- jQuery原生框架-----------------属性操作
// 添加一个处理兼容获取样式的静态方法jQuery.getStyle = function( dom, styleName ) { // dom不是dom,styleName不是字符串,直接打走 i ...
- Java HttpGet
String urlStr ="https://qyapi.weixin.qq.com/cgi-bin/gettoken?a=a&b=b"; URL url = null; ...