Bootstrap-实现简单的网站首页

html:

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 
  4 <head>
  5     <meta charset="utf-8">
  6     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  7     <meta name="viewport" content="width=device-width, initial-scale=1">
  8     <title>TYNAM-个人门户网站</title>
  9     <!-- Bootstrap -->
 10     <link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">
 11     <link rel="stylesheet" href="css/index.css">
 12     <!-- 站点log -->
 13     <link rel="shortcut icon" href="imgs/log.ico" type="image/x-icon">
 14 </head>
 15 
 16 <body>
 17     <!-- header -->
 18     <header id="ty-header">
 19         <!-- 上半部分 -->
 20         <div class="hidden-sm hidden-xs top-bar">
 21             <div class="container text-center text-muted">
 22                 <div class="row">
 23                     <div class="top-bar-1 col-md-2">
 24                         <a href="" class="text-muted">
 25                             <i class="icon-phone"></i>
 26                             <span>关注微信号</span>
 27                             <span class="caret"></span>
 28                             <img src="imgs/ty-weixin.jpg" alt="Tynam" style="width: 160px">
 29                         </a>
 30                     </div>
 31                     <div class="top-bar-2 col-md-5">
 32                         <i class="icon-tel"></i>
 33                         <span>124-567-890(服务时间 8:00 - 20:00)</span>
 34                     </div>
 35                     <div class="top-bar-3 col-md-2">
 36                         <a href="" class="text-muted">合作单位</a>
 37                         <a href="" class="text-muted">赞助商</a>
 38                     </div>
 39                     <div class="top-bar-4 col-md-3">
 40                         <a class="btn btn-default btn-sm btn-register" href="#" role="button">免费注册</a>
 41                         <a class="text-muted sign" href="#" role="button" data-toggle="modal" data-target="#ty-login">立即登录</a>
 42                     </div>
 43                 </div>
 44             </div>
 45         </div>
 46         <nav class="navbar navbar-default navbar-static-top ty-navbar">
 47             <div class="container">
 48                 <!-- Brand and toggle get grouped for better mobile display -->
 49                 <div class="navbar-header">
 50                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
 51                         data-target="#ty-navbar" aria-expanded="false">
 52                         <span class="sr-only">Toggle navigation</span>
 53                         <span class="icon-bar"></span>
 54                         <span class="icon-bar"></span>
 55                         <span class="icon-bar"></span>
 56                     </button>
 57                     <a class="navbar-brand" href="#">
 58                         <img src="imgs/log.png" alt="TYNAM-个人门户网站" style="width: 90px">
 59                     </a>
 60                 </div>
 61 
 62                 <div class="collapse navbar-collapse" id="ty-navbar">
 63                     <ul class="nav navbar-nav">
 64                         <li class="active"><a href="#">课程介绍</a></li>
 65                         <li><a href="#">热门课程</a></li>
 66                         <li><a href="#">名师授课</a></li>
 67                         <li><a href="#">课堂互动</a></li>
 68                         <li><a href="#">联系我们</a></li>
 69                     </ul>
 70 
 71                     <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">
 72                         <li><a href="#">个人中心</a></li>
 73                     </ul>
 74                 </div><!-- /.navbar-collapse -->
 75             </div><!-- /.container-fluid -->
 76         </nav>
 77     </header>
 78     <!-- header -->
 79 
 80     <!-- banner -->
 81     <section id="ty-banner" class="carousel slide" data-ride="carousel">
 82         <!-- 指示器 -->
 83         <ol class="carousel-indicators">
 84             <li data-target="#ty-banner" data-slide-to="0" class="active"></li>
 85             <li data-target="#ty-banner" data-slide-to="1"></li>
 86             <li data-target="#ty-banner" data-slide-to="2"></li>
 87             <li data-target="#ty-banner" data-slide-to="3"></li>
 88         </ol>
 89 
 90         <!-- 内容 -->
 91         <div class="carousel-inner" role="listbox">
 92             <div class="item active" data-sm-mg="imgs/banner1-400x250.jpg" data-lg-mg="imgs/banner1.jpg"></div>
 93             <div class="item" data-sm-mg="imgs/banner2-400x250.jpg" data-lg-mg="imgs/banner2.jpg"></div>
 94             <div class="item" data-sm-mg="imgs/banner3-400x250.jpg" data-lg-mg="imgs/banner3.jpg"></div>
 95             <div class="item" data-sm-mg="imgs/banner4-400x250.jpg" data-lg-mg="imgs/banner4.jpg"></div>
 96         </div>
 97 
 98         <!-- Controls -->
 99         <a class="left carousel-control" href="#ty-banner" role="button" data-slide="prev">
100             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
101         </a>
102         <a class="right carousel-control" href="#ty-banner" role="button" data-slide="next">
103             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
104         </a>
105     </section>
106     <!-- banner -->
107 
108     <!-- about me -->
109     <section id="ty-abuout">
110         <
  • 1
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值