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>TYNAM-个人门户网站</title>

     <!-- Bootstrap -->

     <link href="lib/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet">

     <link rel="stylesheet" href="css/index.css">

     <!-- 站点log -->

     <link rel="shortcut icon" href="imgs/log.ico" type="image/x-icon">

 </head>

 <body>

     <!-- header -->

     <header id="ty-header">

         <!-- 上半部分 -->

         <div class="hidden-sm hidden-xs top-bar">

             <div class="container text-center text-muted">

                 <div class="row">

                     <div class="top-bar-1 col-md-2">

                         <a href="" class="text-muted">

                             <i class="icon-phone"></i>

                             <span>关注微信号</span>

                             <span class="caret"></span>

                             <img src="imgs/ty-weixin.jpg" alt="Tynam" style="width: 160px">

                         </a>

                     </div>

                     <div class="top-bar-2 col-md-5">

                         <i class="icon-tel"></i>

                         <span>124-567-890（服务时间 8:00 - 20:00）</span>

                     </div>

                     <div class="top-bar-3 col-md-2">

                         <a href="" class="text-muted">合作单位</a>

                         <a href="" class="text-muted">赞助商</a>

                     </div>

                     <div class="top-bar-4 col-md-3">

                         <a class="btn btn-default btn-sm btn-register" href="#" role="button">免费注册</a>

                         <a class="text-muted sign" href="#" role="button" data-toggle="modal" data-target="#ty-login">立即登录</a>

                     </div>

                 </div>

             </div>

         </div>

         <nav class="navbar navbar-default navbar-static-top ty-navbar">

             <div class="container">

                 <!-- Brand and toggle get grouped for better mobile display -->

                 <div class="navbar-header">

                     <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"

                         data-target="#ty-navbar" 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="imgs/log.png" alt="TYNAM-个人门户网站" style="width: 90px">

                     </a>

                 </div>

                 <div class="collapse navbar-collapse" id="ty-navbar">

                     <ul class="nav navbar-nav">

                         <li class="active"><a href="#">课程介绍</a></li>

                         <li><a href="#">热门课程</a></li>

                         <li><a href="#">名师授课</a></li>

                         <li><a href="#">课堂互动</a></li>

                         <li><a href="#">联系我们</a></li>

                     </ul>

                     <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs">

                         <li><a href="#">个人中心</a></li>

                     </ul>

                 </div><!-- /.navbar-collapse -->

             </div><!-- /.container-fluid -->

         </nav>

     </header>

     <!-- header -->

     <!-- banner -->

     <section id="ty-banner" class="carousel slide" data-ride="carousel">

         <!-- 指示器 -->

         <ol class="carousel-indicators">

             <li data-target="#ty-banner" data-slide-to="0" class="active"></li>

             <li data-target="#ty-banner" data-slide-to="1"></li>

             <li data-target="#ty-banner" data-slide-to="2"></li>

             <li data-target="#ty-banner" data-slide-to="3"></li>

         </ol>

         <!-- 内容 -->

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

             <div class="item active" data-sm-mg="imgs/banner1-400x250.jpg" data-lg-mg="imgs/banner1.jpg"></div>

             <div class="item" data-sm-mg="imgs/banner2-400x250.jpg" data-lg-mg="imgs/banner2.jpg"></div>

             <div class="item" data-sm-mg="imgs/banner3-400x250.jpg" data-lg-mg="imgs/banner3.jpg"></div>

             <div class="item" data-sm-mg="imgs/banner4-400x250.jpg" data-lg-mg="imgs/banner4.jpg"></div>

         </div>

         <!-- Controls -->

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

             <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

         </a>

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

             <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

         </a>

     </section>

     <!-- banner -->

     <!-- about me -->

     <section id="ty-abuout">

         <div class="title text-center">

             <h1><strong>关于我们</strong></h1>

             <img src="imgs/star.png" alt="" class="img-responsive">

         </div>

         <div class="container">

             <div class="row">

                 <div class="col-md-8 text-muted">

                     <p>与此同时，和讯凭借金融投资顾问、基金代销等牌照优势，着力为用户提供基金、证券、期货、保险、信托、银行、外汇、互金等多品类全覆盖的金融交易场景。打造个人投资者一站式投资理财服务闭环，不断提升用户体验。

                     </p>

                     <p>近年，和讯对接数十家金融机构和交易平台，初步实现大数据算法推送对用户和金融机构的两端对接，已成为国内最大的深度理财社区。期间，未发生一起违约和刚性兑付事件。和讯成为互联网财富管理标杆公司和资本关注的焦点，和讯公司自身资本化进程亦在快速推进当中。

                     </p>

                     <p>我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。和讯愿与各大金融机构和交易平台通力合作，努力实现个人投资者、金融机构以及实体企业的多方共赢发展。

                     </p>

                 </div>

                 <div class="col-md-4" class="img-rounded img-responsive">

                     <img src="imgs/team.jpeg" alt="核心团队">

                 </div>

             </div>

         </div>

     </section>

     <!-- about me -->

     <!-- 产品 -->

     <section id="ty-product">

         <div class="container">

             <div class="row">

                 <!-- Nav tabs -->

                 <ul class="nav nav-tabs" role="tablist">

                     <li role="presentation" class="active"><a href="#product1" aria-controls="home" role="tab"

                             data-toggle="tab">在线大学</a></li>

                     <li role="presentation"><a href="#product2" aria-controls="profile" role="tab"

                             data-toggle="tab">会员专享</a></li>

                     <li role="presentation"><a href="#product3" aria-controls="messages" role="tab"

                             data-toggle="tab">优质视频</a></li>

                     <li class="pull-right hidden-sm hidden-xs"><a href="#product4" aria-controls="settings" role="tab"

                             data-toggle="tab">更多</a></li>

                 </ul>

                 <!-- Tab panes -->

                 <div class="tab-content">

                     <div role="tabpanel" class="tab-pane fade in active" id="product1">

                         <div class="container">

                             <div class="row">

                                 <div class="col-md-8">

                                     <!-- 第一部分 -->

                                     <div id="pd_one_1" class="media">

                                         <div class="media-left pd-left">

                                             <a href="#">

                                                 <img class="media-object " src="imgs/ty-weixin.jpg" alt="..."

                                                     width="150px">

                                             </a>

                                         </div>

                                         <div class="media-body text-muted"

                                             style="padding-top: 150px; padding-left: 10px">

                                             <h5 class="media-heading">更多资讯欢迎</h4>

                                                 <h5 class="media-heading">欢迎关注我们</h4>

                                         </div>

                                     </div>

                                     <!-- 第二部分 -->

                                     <ol class="breadcrumb lead" id="pd_one_2">

                                         <li><a href="#">HTML5+全栈</a></li>

                                         <li><a href="#">Python+人工智能</a></li>

                                         <li><a href="#">JavaEE</a></li>

                                         <li><a href="#">Go语言+区块链</a></li>

                                     </ol>

                                     <!-- 第三部分 -->

                                     <h1 id="pd_one_3">欢迎来到这里

                                         <strong class="text-danger" style="padding-left: 15px">TYNAM个人门户 </strong>

                                     </h1>

                                     <!-- 第四部分 -->

                                     <div id="pd_one_4">

                                         <button class="btn btn-default btn-primary" type="submit">课程咨询</button>

                                         <button class="btn btn-default " type="submit"

                                             style="margin-left:20px">了解更多</button>

                                     </div>

                                 </div>

                                 <div class="col-md-4 hidden-sx hidden-xs">

                                     <img src="imgs/phone.png" alt="" height="500px">

                                 </div>

                             </div>

                         </div>

                     </div>

                     <div role="tabpanel" class="tab-pane fade" id="product2">

                         <div class="container">

                             <div class="row">

                                 <div class="col-md-4 hidden-sx hidden-xs" id="pd_two_1">

                                     <img src="imgs/phone.png" alt="" height="500px">

                                 </div>

                                 <div class="col-md-8" id="pd_two_2">

                                     <h1 class="text-warning">TYNAM-会员</h1>

                                     <p class="lead text-muted">

                                         近年，和讯对接数十家金融机构和交易平台，初步实现大数据算法推送对用户和金融机构的两端对接，已成为国内最大的深度理财社区。期间，未发生一起违约和刚性兑付事件。和讯成为互联网财富管理标杆公司和资本关注的焦点，和讯公司自身资本化进程亦在快速推进当中。

                                     </p>

                                 </div>

                             </div>

                         </div>

                     </div>

                     <div role="tabpanel" class="tab-pane fade" id="product3">

                         <div class="container">

                             <div class="row">

                                 <div class="col-md-6" id="pd_three_1">

                                     <h1 class="text-warning">

                                         <strong>案例驱动·体系贯穿·全面系统</strong>

                                     </h1>

                                     <h3>10-15分钟视频

                                         <span class="text-warning">知识点拆分讲解</span>

                                     </h3>

                                     <h4 class="text-muted">初步实现大数据算法推送对用户和金融机构的两端对接</h4>

                                     <div class="badge" style="padding: 15px 10px; cursor: pointer;">

                                         已更新4000+视频 | 10,0000+ 阅读

                                     </div>

                                 </div>

                                 <div class="col-md-6  hidden-sm hidden-xs pd-left" id="pd_tree_2">

                                     <img class="img-responsive" src="imgs/PC.jpeg" alt="">

                                 </div>

                             </div>

                         </div>

                     </div>

                     <div role="tabpanel" class="tab-pane fade" id="product14">...</div>

                 </div>

             </div>

         </div>

     </section>

     <!-- 产品 -->

     <!-- 热门课程 -->

     <section id="ty-hot">

         <div class="title text-center">

             <h1><strong>热门课程</strong></h1>

             <img src="imgs/star.png" alt="" class="img-responsive">

         </div>

         <div class="container">

             <div class="row">

                 <div class="col-md-6 lesson">

                     <div class="media">

                         <div class="media-left">

                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"

                                 alt="" width="100px">

                         </div>

                         <div class="media-body">

                             <h4 class="media-heading">

                                 <span class="text-danger">【热】</span>

                                 从零玩转HTML5+跨平台

                             </h4>

                             <p class="text-muted" style="margin-top: 10px">

                                 我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>

                         </div>

                         <div class="media-right text-danger">

                             246节课

                         </div>

                     </div>

                 </div>

                 <div class="col-md-6 lesson">

                     <div class="media">

                         <div class="media-left">

                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"

                                 alt="" width="100px">

                         </div>

                         <div class="media-body">

                             <h4 class="media-heading">

                                 <span class="text-danger">【热】</span>

                                 从零玩转HTML5+跨平台

                             </h4>

                             <p class="text-muted" style="margin-top: 10px">

                                 我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>

                         </div>

                         <div class="media-right text-danger">

                             246节课

                         </div>

                     </div>

                 </div>

                 <div class="col-md-6 lesson">

                     <div class="media">

                         <div class="media-left">

                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"

                                 alt="" width="100px">

                         </div>

                         <div class="media-body">

                             <h4 class="media-heading">

                                 <span class="text-danger">【热】</span>

                                 从零玩转HTML5+跨平台

                             </h4>

                             <p class="text-muted" style="margin-top: 10px">

                                 我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>

                         </div>

                         <div class="media-right text-danger">

                             246节课

                         </div>

                     </div>

                 </div>

                 <div class="col-md-6 lesson">

                     <div class="media">

                         <div class="media-left">

                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"

                                 alt="" width="100px">

                         </div>

                         <div class="media-body">

                             <h4 class="media-heading">

                                 <span class="text-danger">【热】</span>

                                 从零玩转HTML5+跨平台

                             </h4>

                             <p class="text-muted" style="margin-top: 10px">

                                 我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>

                         </div>

                         <div class="media-right text-danger">

                             246节课

                         </div>

                     </div>

                 </div>

                 <div class="col-md-6 lesson">

                     <div class="media">

                         <div class="media-left">

                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"

                                 alt="" width="100px">

                         </div>

                         <div class="media-body">

                             <h4 class="media-heading">

                                 <span class="text-danger">【热】</span>

                                 从零玩转HTML5+跨平台

                             </h4>

                             <p class="text-muted" style="margin-top: 10px">

                                 我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>

                         </div>

                         <div class="media-right text-danger">

                             246节课

                         </div>

                     </div>

                 </div>

                 <div class="col-md-6 lesson">

                     <div class="media">

                         <div class="media-left">

                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"

                                 alt="" width="100px">

                         </div>

                         <div class="media-body">

                             <h4 class="media-heading">

                                 <span class="text-danger">【热】</span>

                                 从零玩转HTML5+跨平台

                             </h4>

                             <p class="text-muted" style="margin-top: 10px">

                                 我们认为，互联网技术和理念是改善融资市场的有力工具，是推动中产阶层壮大，助力实体经济的核心路径。</p>

                         </div>

                         <div class="media-right text-danger">

                             246节课

                         </div>

                     </div>

                 </div>

             </div>

         </div>

     </section>

     <!-- 热门课程 -->

     <!-- 友情链接 -->

     <section id="ty-link">

         <div class="title text-center">

             <h1><strong>友情链接</strong></h1>

             <img src="imgs/star.png" alt="" class="img-responsive">

         </div>

         <ul class="logs">

             <li><a href=""><img src="imgs/log-24.svg" alt=""></a></li>

             <li><a href=""><img src="imgs/log-Yh.svg" alt=""></a></li>

             <li><a href=""><img src="imgs/log-jucai.svg" alt=""></a></li>

             <li><a href=""><img src="imgs/log-qile.svg" alt=""></a></li>

             <li><a href=""><img src="imgs/log-tuorui.svg" alt=""></a></li>

             <li><a href=""><img src="imgs/log-xingyue.svg" alt=""></a></li>

             <li><a href=""><img src="imgs/log-yuecheng.svg" alt=""></a></li>

         </ul>

     </section>

     <!-- 友情链接 -->

     <!-- footer -->

     <footer id="ty-footer">

         <div class="container">

             <div class="row" style="padding-top: 10px">

                 <div class="col-md-3 col-md-offset-1 one">

                     <div class="row">

                         <ul class="col-md-6">

                             <li><a href="">关于我们</a></li>

                             <li><a href="">课程介绍</a></li>

                             <li><a href="">热门课程</a></li>

                         </ul>

                         <ul class="col-md-6">

                             <li><a href="">名师授课</a></li>

                             <li><a href="">课堂互动</a></li>

                             <li><a href="">联系我们</a></li>

                         </ul>

                     </div>

                 </div>

                 <div class="col-md-4 two">

                     <h5>公司地址：广州市花都区贵丽北街16号</h5>

                     <h5>联系电话：888-8888-8888</h5>

                     <h5>联系邮箱：Tynam.yang@gmail.com</h5>

                 </div>

                 <div class="col-md-3 three col-md-offset-1">

                     <h5>联系我们：</h5>

                     <a href=""><img src="imgs/log-xinlang.png" alt="" data-toggle="tooltip" data-placement="top"

                             title="欢迎关注微信公众号"></a>

                     <a href=""><img src="imgs/log-wechat.png" alt="" data-toggle="tooltip" data-placement="top"

                             title="欢迎关注微博"></a>

                 </div>

             </div>

         </div>

     </footer>

     <!-- footer -->

     <!-- 登陆 -->

     <div class="modal fade" id="ty-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

         <div class="modal-dialog" role="document">

             <div class="modal-content">

                 <div class="modal-header">

                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span

                             aria-hidden="true">&times;</span></button>

                     <h4 class="modal-title" id="myModalLabel">登录</h4>

                 </div>

                 <div class="modal-body">

                    <div>手机号<input type="text" placeholder="请输入手机号"></div>

                     <div>密码<input type="password" placeholder="请输入密码"></div>

                 </div>

                 <div class="modal-footer">

                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>

                     <button type="button" class="btn btn-primary">登录</button>

                 </div>

             </div>

         </div>

     </div>

     <script src="lib/jquery/jquery-3.4.1.js"></script>

     <script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>

     <script src="js/index.js"></script>

 </body>

 </html>

css:

 /* *********************** 通用设置开始 *********************** */

 body {

     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

     color: #000;

     font-size: 14px;

 }

 /* 注册btn */

 .btn-register {

     color: #ffffff;

     background-color: #0AB4f7;

     border-color: #F4F7F7;

 }

 .btn-register:hover,

 .btn-register:focus,

 .btn-register:active,

 .btn-register.active,

 .open .dropdown-toggle.btn-register {

     color: #ffffff;

     background-color: #086DF2;

     border-color: #F4F7F7;

 }

 .btn-register:active,

 .btn-register.active,

 .open .dropdown-toggle.btn-register {

     background-image: none;

 }

 .btn-register.disabled,

 .btn-register[disabled],

 fieldset[disabled] .btn-register,

 .btn-register.disabled:hover,

 .btn-register[disabled]:hover,

 fieldset[disabled] .btn-register:hover,

 .btn-register.disabled:focus,

 .btn-register[disabled]:focus,

 fieldset[disabled] .btn-register:focus,

 .btn-register.disabled:active,

 .btn-register[disabled]:active,

 fieldset[disabled] .btn-register:active,

 .btn-register.disabled.active,

 .btn-register[disabled].active,

 fieldset[disabled] .btn-register.active {

     background-color: #0AB4F7;

     border-color: #F4F7F7;

 }

 .btn-register .badge {

     color: #0AB4F7;

     background-color: #ffffff;

 }

 @font-face {

     font-family: ty;

     src:url('../fonts/fonts/icomoon.woff') format('woff'),

     url('../lib/fonts/fonts/icomoon.ttf') format('truetype'),

     url('../lib/fonts/fonts/icomoon.svg') format('svg'),

     url('../lib/fonts/fonts/icomoon.eot') format('embedded-opentype'); /* IE9 */

 }

 [class^='icon-'],

 [class*=' icon-']{

     font-family: ty;

     font-style: normal;

 }

 /* *********************** 通用设置结束 *********************** */

 /* *********************** header 开始 *********************** */

 #ty-header {

     margin: 0 auto;

     height: 40px;

     line-height: 39px;

 }

 #ty-header .top-bar {

     border-bottom: 1px solid #eee;

 } 

 .top-bar-1 a {

     position: relative;

 }

 .top-bar-1 a img {

     display: none;

     position: absolute;

     left: 50%;

     margin-left: -80px;

     margin-top: -10px;

     z-index:;

 }

 .top-bar-1 a:hover img {

     display: block;

 }

 #ty-header .top-bar .container .row .top-bar-4 .sign {

     margin-left: 10px;

 }

 #ty-header .top-bar .container .row>div+div {

     border-left: 1px solid #eee;

 }

 .icon-phone::before {

     content: '\e958';

     font-size: 14px;

 }

 .icon-tel::before {

     content: '\e942';

     font-size: 14px;

 }

 /* navbar开始 */

 #ty-header .ty-navbar {

     background: #fff;

 }

 #ty-header .navbar-brand {

     height: 70px;

     padding: 5px 15px;

 }

 #ty-header #ty-navbar>ul>li>a {

     height: 70px;

     line-height: 40px;

 }

 #ty-header #ty-navbar ul li.active a,

 #ty-header #ty-navbar ul li a:hover

 {

     background-color: transparent;

     border-bottom: 2px solid #0AB4f7;

 }

 #ty-header .ty-navbar .navbar-toggle {

     margin-top: 18px;

 }

 /* navbar结束 */

 /* *********************** header 结束 *********************** */

 /* *********************** banner 开始 *********************** */

 #ty-banner {

     margin-top: 70px;

 }

 #ty-banner .item {

     background: no-repeat center center;

     -webkit-background-size : cover !important;

     background-size: cover !important;

 }

 @media screen and (min-width: 500px) {

     #ty-banner .item {

         height: 600px;

     }

 }

 /* *********************** banner 结束 *********************** */

 /* *********************** 产品特色 开始 *********************** */

 #ty-product {

     background: #f0f0f0;

     padding: 30px 0;

 }

 #ty-product .nav {

     font-size: 18px;

 }

 #ty-product .nav a {

     font-size: 18px;

     color: #999;

 }

 #ty-product .nav li.active a {

     background: none;

     border: none;

     border-bottom: 2px solid #0AB4f7;

     color: #000;

 }

 #ty-product .container {

     padding-top: 20px;

 }

 #ty-product .pd-left {

     padding: 40px 0;

 }

 #pd_one_1 {

     margin: 10px 0;

 }

 #pd_one_2 {

     background-color: transparent;

 }

 #pd_two_2, #pd_three_1 {

     padding-top: 90px;

 }

 /* *********************** 产品特色 结束 *********************** */

 /* *********************** 关于我们 开始 *********************** */

 #ty-abuout .title,

 #ty-hot .title,

 #ty-link .title

 {

     display: flex;

     flex-direction: column;

     justify-content: center;

     align-items: center;

     padding-bottom: 10px;

 }

 #ty-abuout .title img,

 #ty-hot .title img,

 #ty-link .title img

 {

     height: 20px;

 }

 #ty-abuout .row p {

     line-height: 30px;

     font-size: 15px;

 }

 #ty-abuout .row img {

     height: 300px;

 }

 /* *********************** 关于我们 结束 *********************** */

 /* *********************** 热门课程 开始 *********************** */

 #ty-hot .lesson {

     padding: 15px 10px;

 }

 #ty-hot .lesson .media-left {

     width: 20%;

 }

 #ty-hot .lesson .media-body {

     width: 60%;

     vertical-align: center;

 }

 #ty-hot .lesson .media-right {

     width: 20%;

     font-size: 16px;

     vertical-align: middle;

 }

 /* *********************** 热门课程 结束 *********************** */

 /* *********************** 友情链接 开始 *********************** */

 #ty-link .logs {

     list-style: none;

     text-align: center;

 }

 #ty-link .logs li {

     display: inline-block;

     padding: 10px 10px;

 }

 #ty-link .logs li a img{

     height: 110px;

 }

 /* *********************** 友情链接 结束 *********************** */

 /* *********************** footer 开始 *********************** */

 #ty-footer {

     width: 100%;

     height: 200px;

     background: rgb(44, 38, 38);

     color: rgb(183, 185, 183);

     list-style: none;

     font-size: 16px;

 }

 #ty-footer ul {

     list-style: none;

 }

 #ty-footer .one, #ty-footer .two {

     padding: 10px;

     border-right: 1px solid #666;

     height: 180px;

     display: flex;

     flex-direction: column;

     justify-content: center;

     align-items: center;

 }

 #ty-footer .one li {

     line-height: 40px;

     color: rgb(183, 185, 183);

 }

 #ty-footer .one li a {

     color: rgb(183, 185, 183);

 }

 #ty-footer .three {

     padding: 30px 10px;

     height: 180px;

 }

 #ty-footer .three a {

     display: inline-block;

 }

 #ty-footer .three a img {

     width: 50px;

 }

 /* *********************** footer 结束 *********************** */

 /* *********************** 登录 开始 *********************** */

 #ty-login button, #ty-login input {

      outline: none;

 }

 #ty-login .modal-body>div {

     margin:15px 20px;

 }

 #ty-login .modal-body>div>input {

     margin-left: 15px;

     width: 200px;

 }

 /* *********************** 登录 结束 *********************** */

JS:

 // 轮播图

 $(function () {

     $(window).on('resize', function () {

         let clickWidth = $(window).width();

         let isBigImg = clickWidth >= 500;

         let $allItems = $("#ty-banner .item");

         $allItems.each(function (index, item) {

             let src = isBigImg ? $(item).data("lg-mg") : $(item).data("sm-mg");

             let imgUrl = "url('" + src + "')";

             $(item).css({

                 background: imgUrl

             });

             if(!isBigImg){

                 let $img = "<img src='" + src + "'>";

                 $(item).empty().append($img);

             }else{

                 $(item).empty();

             }

         });

     });

     // 导航处理

     let $alllis =  $("#ty-navbar li")

     $($alllis[1]).on('click', function(){

         $('html,body').animate({scrollTop: $("#ty-hot").offset().top});

     });

     $(window).trigger("resize");

     // tooltip

     $(function () {

         $('[data-toggle="tooltip"]').tooltip()

       });

 });

效果图：

学习  叶建华亲授-从零玩转响应式开发-bootstrap打通前端+移动端  后所作。感谢老师的公开视频

Bootstrap-实现简单的网站首页的更多相关文章

  1. IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例

    首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...

  2. 用bootstrap框架弄的网站。（首页）

    网站的每一处代码都加上注解,以便浏览! 效果图: <!doctype html>   <html lang="zh-cn">   <head> ...

  3. Nginx简单实现网站的负载均衡

    在大型网站搭建时,都会考虑如果用户量每日不断增加,大量的并发访问,会不会给网站.数据库带来崩盘的灾难.今天我们就讨论一下,现实中如何解决这些问题的一套最为容易实现的方案. 控制并发,大家都会首先考虑的 ...

  4. 基于jQuery的网站首页宽屏焦点图幻灯片

    今天给大家分享一款基于jQuery的网站首页宽屏焦点图幻灯片.这款焦点图适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览 ...

  5. 抓取Bing每日图片作为网站首页背景

    把Bing搜索的背景图片设置为自己网站的背景,实现背景及资讯的每日更新 效果图如下: 理一下思路,首先我们要抓取Bing的每日图片及最新资讯,然后保存图片及信息到本地,最后显示图片及资讯到网站首页. ...

  6. 织梦DEDECMS网站首页如何实现分页翻页

    织梦DEDECMS模板网站首页如何实现首页分页和翻页 方法如下:(三种方法,自己选择一种来实现分页吧) 第一种:调用ajax和参数的(不推荐)1.必须在DEDE首页模板中的<head>&l ...

  7. 一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法！

    一种基于自定义代码的asp.net网站首页根据IP自动跳转指定页面的方法! 对于大中型网站,为了增强用户体验,往往需要根据不同城市站点的用户推送或展现相应个性化的内容,如对于一些大型门户网站的新闻会有 ...

  8. 保持url唯一性 解决多个网站首页问题

    原文地址:http://www.seowhy.com/bbs/thread-2694339-1-1.html 在网站SEO优化过程中,经常会遇到这样或者那样的常见技术型问题,达闻现将此类常见技术问题总 ...

  9. Vue 网站首页加载优化

    Vue 网站首页加载优化 本篇主要讲解 Vue项目打包后 vendor.js 文件很大 如何对它进行优化 以及开启Vue的压缩 和 nginx gzip 压缩的使用, 其他就是对接口优化等  1. v ...

随机推荐

  1. PHP 命令行参数解析工具类

    <?php/** * 命令行参数解析工具类 * @author guolinchao * @email luoyecb@163.com */class CommandLine{ // store ...

  2. str.replace替换变量名的字符串

    网易云课堂该课程链接地址 https://study.163.com/course/courseMain.htm?share=2&shareId=400000000398149&cou ...

  3. Parquet介绍及简单使用（转）

    ==> 什么是parquet         Parquet 是列式存储的一种文件类型   ==> 官网描述: Apache Parquet is a columnar storage f ...

  4. java上传图片并压缩图片大小

    Thumbnailator 是一个优秀的图片处理的Google开源Java类库.处理效果远比Java API的好.从API提供现有的图像文件和图像对象的类中简化了处理过程,两三行代码就能够从现有图片生 ...

  5. tensorflow 13：多gpu 并行训练

    多卡训练模式: 进行深度学习模型训练的时候,一般使用GPU来进行加速,当训练样本只有百万级别的时候,单卡GPU通常就能满足我们的需求,但是当训练样本量达到上千万,上亿级别之后,单卡训练耗时很长,这个时 ...

  6. 如何在本地使用scala或python运行Spark程序

    如何在本地使用scala或python运行Spark程序   包含两个部分: 本地scala语言编写程序,并编译打包成jar,在本地运行. 本地使用python语言编写程序,直接调用spark的接口, ...

  7. html css 浮层 侧边栏

    2019-7-1 16:02:25 星期一 实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去 <!DOCTYPE HTML> <html lang="en" ...

  8. laravel5.8ajax请求auth认证返回302的解决方法。

    注册 /app/Http/Controller/Auth/RegisterController.php <?php namespace App\Http\Controllers\Auth; us ...

  9. Centos7安装文件传输软件rz sz

    一直使用Xshell的xftp传输文件,谁知道忽然无法正常使用. 于是,决定用户rz进行传输 安装步骤也比较简单 1.首先安装第三方源(以下源比默认源包含更多安装包,建议添加该源使用) yum ins ...

  10. [ARM-LInux开发]linux设备驱动makefile入门解析

    以下内容仅作参考,能力有限,如有错误还请纠正.对于一个普通的linux设备驱动模块,以下是一个经典的makefile代码,使用下面这个makefile可以完成大部分驱动的编译,使用时只需要修改一下要编 ...