课程

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

为什么和老师的不一样？

来源：3-5 滚动图片广告

qq_柒分醉_03927370

2017-04-30 22:58

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta http-equiv="X-UA-Compatible" content="IE=edge"/>

<meta name="viewport" content="width=device-width,initial-scale=1"/>

<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.2/css/bootstrap.min.css">

<title>无标题文档</title>

<style>

body{

     padding-top:50px;

}

.carousel{

     height:500px;

background-color:#000;

}

.carousel.item{

     height:500px;

background-color:#000;

}

.carousel.img{

     width:100%;  

}

.carousel.caption p{

     margin-bottom:20px;

font-size:20px;

line-height:1.8;

}

</style>


</head>


<body>

<nav class="navbar navbar-default navbar-fixed-top navbar-inverse" role="navigation">

   <div class="container">

    <div class="navbar-header">

     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">

     <span class="sr-only">Toggle navigation</span><span class="icon-bar"></span>

     <span class="icon-bar"></span><span class="icon-bar"></span></button>

     <a class="navbar-brand" href="#">腾讯NBA</a>    

    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

     <ul class="nav navbar-nav" style="font-size:25px;">

      <li  id="one" class="active"><a href="#">马刺</a></li>

      <li id="two"><a href="#">勇士</a></li>

      <li class="dropdown">

       <a href="#" class="dropdown-toggle" data-toggle="dropdown">骑士<span class="caret"></span></a>

       <ul class="dropdown-menu" role="menu">

        <li><a href="#" >勒布朗*詹姆斯</a></li>

        <li><a href="#">乐福</a></li>

        <li class="divider"></li>

        <li><a href="#">欧文</a></li>

       </ul>

      </li>

     </ul>

     

    </div>

   </div>

  </nav>

  

  <!-- 图片轮播-->

  <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

    <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>

            <li data-target="#carousel-example-generic" data-slide-to="3"></li>

            <li data-target="#carousel-example-generic" data-slide-to="4"></li>

    </ol>

          

   <div class="carousel-inner" role="listbox">

     <div class="item active">

              <img src="images/firefox-big.jpg" alt="1 slide" />

              <div class="carousel-caption">

              <h1>Firefox</h1>

              <p>Firefox,又称火狐浏览器。最新版 Firefox 在性能上有非常显著的提升，大幅降低的内存占用和更快的渲染速度，给用户更为流畅和高速的上网浏览体验，同时也让开发者能够开发出更为快速的网络应用和网站。 </p>

              <p><a class="btn btn-lg btn-primary" href="http://www.firefox.com.cn/download/" role="button" target="_blank">点我下载</a></p>

              </div>

     </div>

    

    <div class="item">

              <img src="images/ie-big.jpg" alt="2 slide" />

      <div class="carousel-caption">

        <h1>IE</h1>

              <p>IE,又称IE浏览器。如果运行的是 Windows 7，可以安装的最新 Internet Explorer 版本是 Internet Explorer 11。</p>

        <p><a class="btn btn-lg btn-primary" href="https://www.microsoft.com/zh-cn/download/" role="button" target="_blank">点我下载</a></p>

              </div>

            </div>

    </div>

    

    <div class="item">

              <img src="images/chrome-big.jpg" alt="3 slide"/>

              <div class="carousel-caption">

              <h1>chrome</h1>

              <p>chrome,又称谷歌浏览器。Chrome 可将您在计算机上打开的标签页、保存的书签和最近搜索过的内容同步到手机或平板电脑上，反之亦然。这意味着您可将自己在 Chrome 中的内容和设置同步到所有的设备上。只需登录您的其他设备即可开始同步。</p>

              <p><a class="btn btn-lg btn-primary" href="http://www.google.cn/intl/zh-CN/chrome/browser/" role="button" target="_blank">点我下载</a></p>

              </div>

    </div>

    

    <div class="item">

      <img src="images/opera-big.jpg" alt="4 slide" />

      <div class="carousel-caption">

        <h1>欧朋浏览器</h1>

        <p>欧朋浏览器秉承了 Opera 速度快、省流量、功能强大的优点并为中国用户精心设计及推出了本地化的优质服务，为用户提供最佳的移动互联网体验。</p>

              <p><a class="btn btn-lg btn-primary" href="http://www.oupeng.com/download" role="button" target="_blank">点我下载</a></p>

              </div>

        </div>

    

    <div class="item ">

              <img src="images/safari-big.jpg" alt="5 slide"/>

              <div class="carousel-caption">

              <h1>safari</h1>

              <p>Get a sneak peek at upcoming web technologies in macOS and iOS and experiment with these technologies in your websites and extensions.</p>

              <p><a class="btn btn-lg btn-primary" href="https://developer.apple.com/safari/download/" role="button" target="_blank">点我下载</a></p>

              </div>

    </div>

    

    

          <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">

            <span class="glyphicon glyphicon-chevron-left"></span>

            <span class="sr-only">上一页</span>

          </a>

          <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">

            <span class="glyphicon glyphicon-chevron-right"></span>

            <span class="sr-only">下一页</span>

          </a>

          

</div>

  

  <!--Bootstrap 的所有 JavaScript 插件都依赖 jQuery，因此 jQuery 必须在 Bootstrap 之前引入，就像在基本模版中所展示的一样 -->

 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>

<script src="http://cdn.bootcss.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>

</html>


写回答 关注

1回答

  • 可爱小七
    2017-05-04 16:31:48
    已采纳

    样式名为carousel-inner的div的结束标签位置放错了，你现在的写法只包住了前两个样式名为item的div，应该包住5个才对！

    1 0

    qq_柒分醉...

    非常感谢！

    2017-05-04 19:25:09

    共 1 条回复 >

基于bootstrap的网页开发

Bootstrap框架的基础教程，学会用Bootstrap前端框架搭建网页

187653 学习 · 758 问题

查看课程

相似问题

为什么我写的这个 和老师写的不一样呢？

回答 1

老师，为什么您的文档和我看的文档不一样呢

回答 1

为什么图片显示不一样啊 ，不能切换

回答 3

老师，为什么打开时黑的，随便按一下就回到原样了

回答 1

为什么这样子不行？

回答 3

打开慕课网App查看更多内容