0
回答
下拉菜单不能显示,图片轮播不能实现
百度AI开发者大赛带你边学边开发,赢100万奖金,加群:418589053   
<!doctype html>
<html>
<head>
<style>
body{ padding-top:50px;}
.carousel{ height:500px; background-color:balck;}
.carousel .item{ height:500px; background-color:black;}
.carousel img{ width:100%;}
</style>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>无标题文档</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>

<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class=" container">
        <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">现代浏览器博物馆</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">综述<span class="sr-only">(current)</span></a></li>
                <li><a href="#">简述</a></li>
                <li class="dropdown">
          <a href="##" data-toggle="dropdown" class="dropdown-toggle">系列教程<span class="caret"></span></a>
          <ul class="dropdown-menu" aria-labelledby="dropdownMenu">
            <li><a href="##">CSS3</a></li>
            <li><a href="##">JavaScript</a></li>
            <li class="disabled"><a href="##">PHP</a></li>
          </ul>
      </li>
                <li><a href="#">关于</a></li>
            </ul>
        </div>
    </div>
</nav>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <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>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
        <img src="images/a02.png" alt="1 slide">
        <div class="carousel-caption">
            <h1>Chgrome</h1>
            <p>Google Chrome,又称Google浏览器,是一个由Google(谷歌)公司开发的网页浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="##" role="button" target="_blank">点我下载</a></p>
        </div>
    </div>
    <div class="item active">
        <img src="images/a01.png"alt="2 slide">
        <div class="carousel-caption">
            <h1>Firefox</h1>
            <p>Mozilla Firefox,中文名通常称为“火狐”或“火狐浏览器”,是一个开源网页浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="##" role="button" target="_blank">点我下载</a></p>
        </div>
    </div>
    <div class="item active">
        <img src="images/a03.png"alt="3 slide">
        <div class="carousel-caption">
            <h1>Safari</h1>
            <p>Safari,是苹果计算机的最新操作系统Mac OS X中的浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="##" role="button" target="_blank">点我下载</a></p>
        </div>
    </div>
    <div class="item active">
        <img src="images/a04.png"alt="4 slide">
        <div class="carousel-caption">
            <h1>Opera</h1>
            <p>Opera浏览器,是一款挪威Opera Software ASA公司制作的支持多页面标签式浏览的网络浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="##" role="button" target="_blank">点我下载</a></p>
        </div>
    </div>
    <div class="item active">
        <img src="images/a05.png"alt="5 slide">
        <div class="carousel-caption">
            <h1>IE</h1>
            <p>Internet Explorer,简称 IE,是微软公司推出的一款网页浏览器。</p>
            <p><a class="btn btn-lg btn-primary" href="##" role="button" target="_blank">点我下载</a></p>
        </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" 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="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
举报
sksww2012
发帖于3年前 0回/366阅
顶部