主要介绍在首页实现中用到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实现美工设计的首页的更多相关文章

  1. 菜鸟成长日记之新手备忘录-IOS开发第一个项目总结

    2013年5月3号,开始找IOS开发工作(自学了大半年,做了一个功能不全的Demo,该出去见见世面了!),5月4号面试了第一家公司(是家刚成立一段时间的外包公司),5月5号第一家公司已二轮电话面试,5 ...

  2. Surprise团队第一周项目总结

    Surprise团队第一周项目总结 团队项目 基本内容 五子棋(Gobang)的开发与应用 利用Android Studio设计一款五子棋游戏,并丰富其内涵 预期目标 实现人人模式:2个用户可以在同一 ...

  3. [Asp.net MVC]Asp.net MVC5系列——第一个项目

    目录 概述 创建第一个项目 添加控制器 总结 概述 本教程是个人一步一步学习的总结,希望能帮到正在进入ASP.Net MVC5方向的朋友,个人也是准备进入ASP.NET MVC5领域,虽然艰辛,但是乐 ...

  4. Bootstrap 响应式设计

    本教程讲解如何在网页布局中应用响应式设计.在课程中,您将学到响应式 Web 设计.随着移动设备的普及,如何让用户通过移动设备浏览您的网站获得良好的视觉效果,已经是一个不可避免的问题了.响应式 Web ...

  5. .NET Core实战项目之CMS 第十章 设计篇-系统开发框架设计

    这两天比较忙,周末也在加班,所以更新的就慢了一点,不过没关系,今天我们就进行千呼万唤的系统开发框架的设计.不知道上篇关于架构设计的文章大家有没有阅读,如果阅读后相信一定对架构设计有了更近一部的理解,如 ...

  6. 第一个项目:Python pygame——外星人大战(心得)

    2018年12月,作为一个大学专业是物联网工程,毕业后在一家石油行业国企干了近三年,但内心依然有着一颗技术之心的我,通过一次偶然的机会(也许并不偶然),接触到了python.当时抱着玩一玩的心态开始通 ...

  7. Vue.js开始第一个项目

    前端架构之路:使用Vue.js开始第一个项目   Vue.js做为目前前端最热门的库之一,为快速构建并开发前端项目多了一种思维模式.本文通过一个简单的实例开始上手Vue.js开发. 一.技术准备 使用 ...

  8. Cooperation.GTST团队第一周项目总结

    Cooperation.GTST团队第一周项目总结 团队项目 项目内容:我们打算利用Android Studio开发一款博客园的Android APP,初步设想能够实现在Android手机平台使用博客 ...

  9. ZLYD团队第一周项目总结

    ZLYD团队第一周项目总结 团队项目 项目内容:我们打算利用Applet实现一个吃豆子游戏,团队初步设定游戏规则如下: 按空格键,游戏开始: 通过方向键控制吃豆者的运动方向,直到吃光所有金豆子: 吃到 ...

随机推荐

  1. 如何选择PDA的操作系统? Android OR WINCE?

     PDA(Personal Digital Assistant),又称为掌上电脑,可以帮助我们完成在移动中工作,学习,娱乐等.按使用来分类,分为工业级PDA和消费品PDA.当我们需要购买PDA的时候, ...

  2. WEB标准系列-HTML元素嵌套

    转:http://www.smallni.com/element-nesting/ 先来看以下这样一段代码: <ul> <li><h4><a href=&qu ...

  3. Codeforces Gym 100015B Ball Painting 找规律

    Ball Painting 题目连接: http://codeforces.com/gym/100015/attachments Description There are 2N white ball ...

  4. 约瑟夫圆环的C++实现

    转载请注明出处:点我 昨天参加了企鹅的2015年实习生招聘的笔试,编程题第一道题就是约瑟夫圆环问题,要求用C++来实现. 约瑟夫圆环问题其实是一个很有名的问题:问题的描述为: 设有编号为1,2,……, ...

  5. 5.ScrollView无法填充满屏幕

    问题: <?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.D ...

  6. 关于ASP.NET中Button的OnClientClick属性

    Button有Click属性和OnClientClick属性,执行顺序上OnClientClick先执行,调用本地脚本,根据返回值确定是否执行Click. 当返回True则执行Click,当脚本错误或 ...

  7. Errors running builder "Integrated External Tool Builder" on project

    Errors during build.Errors running builder "Integrated External Tool Builder" on project p ...

  8. MHA 安装过程 原创

    root@monitor yum.repos.d]# cat CentOS-Base.repo [base]name=CentOS-$releasever - Basefailovermethod=p ...

  9. Cannot instantiate the type HttpClient问题

    看自己动手写爬虫,没想到一上来就跪了. 里面提到用的jar包是apache的http客户端开源项目---HttpClient 就去官网下载了一个版本4.3 当按书上代码敲时 HttpClient ht ...

  10. Docker 1.12.0将要发布的新功能

    Docker 1.12.0将要发布的新功能 导读 按计划,6/14 是1.12.0版本的 feature冻结 的日子,再有两个星期Docker 1.12.0也该发布了.这里列出来的新功能,都是已经合并 ...