第一个项目--用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实现一个吃豆子游戏,团队初步设定游戏规则如下: 按空格键,游戏开始: 通过方向键控制吃豆者的运动方向,直到吃光所有金豆子: 吃到 ...
随机推荐
- thinkphp 3+ 观后详解 (5)
static public function dispatch() { $varPath = C('VAR_PATHINFO'); $varAddon = C('VAR_ADDON'); $varMo ...
- JavaScript闭包——实现
闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 通俗点的说法是: 从理论角度:所有的函数.因为它们都在创建的时候就将上层上下文 ...
- 解决xp搜索“文件中的一个字或者词组”失效
问:我的电脑安装的是Windows XP系统,最近它的文件搜索功能不能用了,打开搜索界面时,输入文件或文件夹名的文本框是灰色的,无法输入.请问该怎么解决? 答:打开注册表编辑器,定位到[HKEY_CU ...
- Flex随笔
-keep-generated-actionscript=true 默认的情况在flex中 对label进行字体加粗的时候,只能对英文的字体加粗,而中文的就不可以加粗: 为了能够使中文能够加粗,需要将 ...
- uva 11324 The Largest Clique(强连通分量缩点+DAG动态规划)
http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=25&page=sh ...
- win8 企业版 安装 .net2.0 .net 3.5
Windows 8 默认集成 .Net Framework 4.5,因此运行一些基于3.5或以前版本的程序时会弹出这个提示. 2012-3-2 15:24 上传 下载附件 (23.91 KB) 这 ...
- ReactNative学习实践--Navigator实践
离上次写RN笔记有一段时间了,期间参与了一个新项目,只在最近的空余时间继续学习实践,因此进度比较缓慢,不过这并不代表没有新进展,其实这个小东西离上次发文时已经有了相当大的变化了,其中影响最大的变化就是 ...
- QML学习笔记之二
//必须要导入,否则以下元素将无效 import QtQuick 1.1 //对象一:矩形Rectangle Rectangle { width: 798 height: 111 //整个Rectan ...
- Codeforces Round #336 (Div. 2)B. Hamming Distance Sum 前缀和
B. Hamming Distance Sum 题目连接: http://www.codeforces.com/contest/608/problem/A Description Genos need ...
- Shell脚本[运算表达式,条件控制语句]
#!/bin/bash #你值得收藏的四则表达式运算. val1=1 val2=1 val3=1 val4=1 val5=1 val6=1 val7=1 let val1++ ((val2++)) v ...