第一个项目--用bootstrap实现美工设计的首页
主要介绍在首页实现中用到bootstrap实现效果的地方。
- 实现如下的效果:
<li> <div role="group" style="padding-top: 17px;"> <a href="#">登录</a> | <a href="#">注册</a> </div> </li>
- 实现如下效果:输入框里面包含图标
<li class="navbar-form navbar-right"> <div class="form-group has-feedback"> <input class="form-control " placeholder="搜索" type="text"/> <span class="glyphicon glyphicon-search form-control-feedback"></span> </div> </li>
- 实现如下效果:
div2悬浮div1之上:
<div> <div id="navbar3" style="position:absolute;"> <!--背景图片--> </div> <div class="container" style="position:relative;padding-top: 300px;"> </div> </div>
- 实现如下效果:
自己在网上找了半天,基本上都是一次轮询一张图片。自己按照例子实现一次实现轮询四张图片。实现多张图片的效果,可以根据需要动态调整。如下:
<!-- Carousel --> <div id="myCarousel" class="carousel slide" data-ride="carousel"> <!-- Indicators 取消图片下的切换按钮 hidden--> <ol class="carousel-indicators hidden"> <li data-target="#myCarousel" data-slide-to="0"></li> <li class="" data-target="#myCarousel" data-slide-to="1"></li> <li class="" data-target="#myCarousel" data-slide-to="2"></li> <li class="" data-target="#myCarousel" data-slide-to="3"></li> </ol> <div class="carousel-inner" role="listbox"> <!--轮询4张图片第一轮--> <div class="item active" id="myCarouseldiv1"> <ul> <li> <img class="first-slide" onmouseover="this.src='img/sm11.jpg'" onmouseout="this.src='img/0.png'" src="img/0.png" alt="First slide;"></li> <li> <img class="second-slide" onmouseover="this.src='img/sm21.jpg'" onmouseout="this.src='img/1.png'" src="img/1.png" alt="First slide;"></li> <li> <img class="second-slide" onmouseover="this.src='img/sm31.jpg'" onmouseout="this.src='img/2.png'" src="img/2.png" alt="First slide;"></li> <li> <img class="second-slide" onmouseover="this.src='img/sm41.jpg'" onmouseout="this.src='img/3.png'" src="img/3.png" alt="First slide;"></li> </ul> </div> <!--轮询4张图片第二轮--> </div> <div class="center" id="myCarosela"> <a class="left carousel-control" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next"> <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> </div><!-- /.carousel -->
轮询CSS:(根据自己需要调整宽度)
#myCarousel{width:1000px;height:120px;margin:0 auto;} #myCarouseldiv1{height: 120px;background-color: #FFF;} #myCarouseldiv1 ul{float:left;padding-right:40px;margin-left: 5px;} #myCarouseldiv1 ul li{float:left;list-style:none; padding-left: 10px;} <!--#myCarouseldiv2轮询第二轮的四张图片css--> #myCarosela a{margin-top: 50px;background-color: orange;width: 30px;height: 30px;}
- 使用的栅格暂时不做介绍了bootstrap中文网上都有。
第一个项目--用bootstrap实现美工设计的首页的更多相关文章
- 菜鸟成长日记之新手备忘录-IOS开发第一个项目总结
2013年5月3号,开始找IOS开发工作(自学了大半年,做了一个功能不全的Demo,该出去见见世面了!),5月4号面试了第一家公司(是家刚成立一段时间的外包公司),5月5号第一家公司已二轮电话面试,5 ...
- Surprise团队第一周项目总结
Surprise团队第一周项目总结 团队项目 基本内容 五子棋(Gobang)的开发与应用 利用Android Studio设计一款五子棋游戏,并丰富其内涵 预期目标 实现人人模式:2个用户可以在同一 ...
- [Asp.net MVC]Asp.net MVC5系列——第一个项目
目录 概述 创建第一个项目 添加控制器 总结 概述 本教程是个人一步一步学习的总结,希望能帮到正在进入ASP.Net MVC5方向的朋友,个人也是准备进入ASP.NET MVC5领域,虽然艰辛,但是乐 ...
- Bootstrap 响应式设计
本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...
- .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计
这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...
- 第一个项目:Python pygame——外星人大战(心得)
2018年12月,作为一个大学专业是物联网工程,毕业后在一家石油行业国企干了近三年,但内心依然有着一颗技术之心的我,通过一次偶然的机会(也许并不偶然),接触到了python.当时抱着玩一玩的心态开始通 ...
- Vue.js开始第一个项目
前端架构之路:使用Vue.js开始第一个项目 Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...
- Cooperation.GTST团队第一周项目总结
Cooperation.GTST团队第一周项目总结 团队项目 项目内容:我们打算利用Android Studio开发一款博客园的Android APP,初步设想能够实现在Android手机平台使用博客 ...
- ZLYD团队第一周项目总结
ZLYD团队第一周项目总结 团队项目 项目内容:我们打算利用Applet实现一个吃豆子游戏,团队初步设定游戏规则如下: 按空格键,游戏开始: 通过方向键控制吃豆者的运动方向,直到吃光所有金豆子: 吃到 ...
随机推荐
- 如何选择PDA的操作系统? Android OR WINCE?
PDA(Personal Digital Assistant),又称为掌上电脑,可以帮助我们完成在移动中工作,学习,娱乐等.按使用来分类,分为工业级PDA和消费品PDA.当我们需要购买PDA的时候, ...
- WEB标准系列-HTML元素嵌套
转:http://www.smallni.com/element-nesting/ 先来看以下这样一段代码: <ul> <li><h4><a href=&qu ...
- Codeforces Gym 100015B Ball Painting 找规律
Ball Painting 题目连接: http://codeforces.com/gym/100015/attachments Description There are 2N white ball ...
- 约瑟夫圆环的C++实现
转载请注明出处:点我 昨天参加了企鹅的2015年实习生招聘的笔试,编程题第一道题就是约瑟夫圆环问题,要求用C++来实现. 约瑟夫圆环问题其实是一个很有名的问题:问题的描述为: 设有编号为1,2,……, ...
- 5.ScrollView无法填充满屏幕
问题: <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.D ...
- 关于ASP.NET中Button的OnClientClick属性
Button有Click属性和OnClientClick属性,执行顺序上OnClientClick先执行,调用本地脚本,根据返回值确定是否执行Click. 当返回True则执行Click,当脚本错误或 ...
- Errors running builder "Integrated External Tool Builder" on project
Errors during build.Errors running builder "Integrated External Tool Builder" on project p ...
- MHA 安装过程 原创
root@monitor yum.repos.d]# cat CentOS-Base.repo [base]name=CentOS-$releasever - Basefailovermethod=p ...
- Cannot instantiate the type HttpClient问题
看自己动手写爬虫,没想到一上来就跪了. 里面提到用的jar包是apache的http客户端开源项目---HttpClient 就去官网下载了一个版本4.3 当按书上代码敲时 HttpClient ht ...
- Docker 1.12.0将要发布的新功能
Docker 1.12.0将要发布的新功能 导读 按计划,6/14 是1.12.0版本的 feature冻结 的日子,再有两个星期Docker 1.12.0也该发布了.这里列出来的新功能,都是已经合并 ...