main

分支 (1)

管理

管理

main

The-martians
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">

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

  <!-- Bootstrap -->
  <link href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="hxr.css" />
</head>

<body>
  <!-- 页头部分：通栏部分和导航条 -->
  <header>
    <!-- 通栏部分 -->
    <div class="topbar hidden-xs">
      <div class="container">
        <div class="row text-center">
          <div class="col-md-3 col-sm-3">中国移动互联网教育品牌</div>
          <div class="col-md-1 col-sm-1"></div>
          <div class="col-md-8 col-sm-8">
            <a href="#">火星人网校</a>
            <a href="#">加入我们</a>
            <a href="#">进入收藏</a>
            <a href="#"><img src="img/qq.png" alt="" /></a>
            <a href="#"><img src="img/wechat.png" alt="" /></a>
            <a href="#"><img src="img/weibo.png" alt="" /></a>
            <i>400-025-8883</i>
          </div>
        </div>
      </div>
    </div>

    <!-- 导航 -->
    <nav class="navbar navbar-default">
      <div class="container">
        <div class="container-fluid">
          <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="#"><img src="img/news_logo.png" alt="" /></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="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">课程系统 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">web前端</a></li>
                  <li><a href="#">室内设计</a></li>
                  <li><a href="#">室外设计</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">工业设计</a></li>
                  <li role="separator" class="divider"></li>
                  <li><a href="#">平面设计</a></li>
                </ul>
              </li>
            </ul>
            <form class="navbar-form navbar-left">
              <div class="form-group">
                <input type="text" class="form-control" placeholder="找课程" />
              </div>
              <button type="submit" style="background-color:#428BCA; color: #ffffff;" class="btn btn-default">提交</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="#">登录</a></li>
              <li><a href="#">注册</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                  aria-expanded="false">关注我们 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li><a href="#">永安里校区</a></li>
                  <li><a href="#">国贸校区</a></li>
                  <li><a href="#">中关村校区</a></li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </nav>
  </header>

  <!-- 轮播图 -->
  <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>
    </ol>

    <!-- 轮播页 -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="img/Slides-1.jpg" alt="" class="hidden-sm hidden-md hidden-lg" />
        <a href="" class="hidden-xs img-pc" style="background-image: url('img/Slides-1.jpg')"></a>
      </div>
      <div class="item">
        <img src="img/Slides-4.jpg" alt="" class="hidden-sm hidden-md hidden-lg" />
        <a href="" class="hidden-xs img-pc" style="background-image: url('img/Slides-4.jpg')"></a>
      </div>
      <div class="item">
        <img src="img/Slides-6.jpg" alt="" class="hidden-sm hidden-md hidden-lg" />
        <a href="" class="hidden-xs img-pc" style="background-image: url('img/Slides-6.jpg')"></a>
      </div>
    </div>

    <!-- 左右控制按钮 -->
    <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>
  <!-- 图片 -->
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-md-3 col-xs-12">
        <img src="img/introduceContainer1.gif" alt="" /><br />
        丰富全面的计算机实验课程
      </div>
      <div class="col-sm-6 col-md-3 col-xs-12">
        <img src="img/introduceContainer2.gif" alt="" /><br />
        在线编程环境，1秒启动
      </div>

      <div class="col-sm-6 col-md-3 col-xs-12">
        <img src="img/introduceContainer3.gif" alt="" /><br />
        每天一个项目课，丰富你的项目经验
      </div>

      <div class="col-sm-6 col-md-3 col-xs-12">
        <img src="img/introduceContainer4.gif" alt="" /><br />
        有效学习时间，真实记录你的代码生涯
      </div>
    </div>
  </div>

  <!-- 学习路径 -->
  <div class="courses">
    <div class="container">
      <div class="bt">
        <h2>————&nbsp;学习路径&nbsp; ————</h2>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471513730333.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471513769430.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471513793360.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471513817808.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471513867033.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471513926288.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471514004752.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471514058548.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471514111981.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471514153000.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471514111981.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>

      <div class="xk col-sm-6 col-md-4 col-xs-12">
        <div class="img"><img src="img/1471514037180.png" /></div>
        <div class="wz">
          <label>C++研发工程师</label>
          <label>22门课程</label>
        </div>
      </div>
    </div>
  </div>
  </div>
  <!-- 就业热门 -->
  <div class="jobs">
    <div class="container">
      <div class="bt">
        <h2>————&nbsp;就业热门&nbsp; ————</h2>
      </div>
      <div class="jobs-xk col-sm-6 col-md-3 col-xs-12">
        <div class="a">
          <img src="img/360截图20161213092244776.jpg" />
          <div>
            <p>就业页面课程1</p>
            <p>说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
          </div>
        </div>
      </div>
      <div class="jobs-xk col-sm-6 col-md-3 col-xs-12">
        <div class="a">
          <img src="img/360截图20161213092244776.jpg" />
          <div>
            <p>就业页面课程1</p>
            <p>说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
          </div>
        </div>
      </div>
      <div class="jobs-xk col-sm-6 col-md-3 col-xs-12">
        <div class="a">
          <img src="img/360截图20161213092244776.jpg" />
          <div>
            <p>就业页面课程1</p>
            <p>说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
          </div>
        </div>
      </div>
      <div class="jobs-xk col-sm-6 col-md-3 col-xs-12">
        <div class="a">
          <img src="img/360截图20161213092244776.jpg" />
          <div>
            <p>就业页面课程1</p>
            <p>说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--展示标签 tabs-->
  <div class="tabs">
    <div class="container">
      <div class="tupian hidden-lg hidden-sm hidden-md col-xs-12">
        <img src="img/tab2.png" />
      </div>
    <div class="wz1 col-sm-6 col-md-6 col-xs-12">
      <div>强大的学习体系</div>
      <div>经过管理学大师层层把关、让您的企业突飞猛进。</div>
    </div>
    <div class="tupian col-sm-6 col-md-6 hidden-xs">
      <img src="img/tab2.png" />
    </div>
  </div>
  </div>
  <!--页尾 footer-->
  <div class="footer">
    <div class="container">
    <div class="tupian col-sm-6 col-md-6 col-xs-12">
      <img src="img/tab3.png" />
    </div>
    <div class="wz2 col-sm-6 col-md-6 col-xs-12">
      <div>完美的管理方式</div>
      <div>最新的管理培训方案，让您的企业任超同行。</div>
    </div>
  </div>
  </div>
  <!--网页底部-->
  <div class="bottom">
    <div><span>企业培训</span>|<span>合作事宜</span>|<span>版权投诉</span></div>
    <div>京CP备12345678. @2009-2016 火星人培训网 Ponered by Bootstap.</div>
  </div>

  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="JQ/jquery-3.5.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</body>

</html>