主要介绍在首页实现中用到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. thinkphp 3+ 观后详解 (5)

    static public function dispatch() { $varPath = C('VAR_PATHINFO'); $varAddon = C('VAR_ADDON'); $varMo ...

  2. JavaScript闭包——实现

    闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 通俗点的说法是: 从理论角度:所有的函数.因为它们都在创建的时候就将上层上下文 ...

  3. 解决xp搜索“文件中的一个字或者词组”失效

    问:我的电脑安装的是Windows XP系统,最近它的文件搜索功能不能用了,打开搜索界面时,输入文件或文件夹名的文本框是灰色的,无法输入.请问该怎么解决? 答:打开注册表编辑器,定位到[HKEY_CU ...

  4. Flex随笔

    -keep-generated-actionscript=true 默认的情况在flex中 对label进行字体加粗的时候,只能对英文的字体加粗,而中文的就不可以加粗: 为了能够使中文能够加粗,需要将 ...

  5. uva 11324 The Largest Clique(强连通分量缩点+DAG动态规划)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&category=25&page=sh ...

  6. win8 企业版 安装 .net2.0 .net 3.5

    Windows 8 默认集成 .Net Framework 4.5,因此运行一些基于3.5或以前版本的程序时会弹出这个提示. 2012-3-2 15:24 上传 下载附件 (23.91 KB)   这 ...

  7. ReactNative学习实践--Navigator实践

    离上次写RN笔记有一段时间了,期间参与了一个新项目,只在最近的空余时间继续学习实践,因此进度比较缓慢,不过这并不代表没有新进展,其实这个小东西离上次发文时已经有了相当大的变化了,其中影响最大的变化就是 ...

  8. QML学习笔记之二

    //必须要导入,否则以下元素将无效 import QtQuick 1.1 //对象一:矩形Rectangle Rectangle { width: 798 height: 111 //整个Rectan ...

  9. Codeforces Round #336 (Div. 2)B. Hamming Distance Sum 前缀和

    B. Hamming Distance Sum 题目连接: http://www.codeforces.com/contest/608/problem/A Description Genos need ...

  10. Shell脚本[运算表达式,条件控制语句]

    #!/bin/bash #你值得收藏的四则表达式运算. val1=1 val2=1 val3=1 val4=1 val5=1 val6=1 val7=1 let val1++ ((val2++)) v ...