Bootstrap-實現簡單的網站首頁

時間 2019-12-09

原文原文鏈接

html：css

  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         <div class="title text-center">
111             <h1><strong>關於咱們</strong></h1>
112             <img src="imgs/star.png" alt="" class="img-responsive">
113         </div>
114         <div class="container">
115             <div class="row">
116                 <div class="col-md-8 text-muted">
117                     <p>與此同時，和訊憑藉金融投資顧問、基金代銷等牌照優點，着力爲用戶提供基金、證券、期貨、保險、信託、銀行、外匯、互金等多品類全覆蓋的金融交易場景。打造我的投資者一站式投資理財服務閉環，不斷提高用戶體驗。
118                     </p>
119                     <p>近年，和訊對接數十家金融機構和交易平臺，初步實現大數據算法推送對用戶和金融機構的兩端對接，已成爲國內最大的深度理財社區。期間，未發生一塊兒違約和剛性兌付事件。和訊成爲互聯網財富管理標杆公司和資本關注的焦點，和訊公司自身資本化進程亦在快速推動當中。
120                     </p>
121                     <p>咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。和訊願與各大金融機構和交易平臺通力合做，努力實現我的投資者、金融機構以及實體企業的多方雙贏發展。
122                     </p>
123                 </div>
124                 <div class="col-md-4" class="img-rounded img-responsive">
125                     <img src="imgs/team.jpeg" alt="核心團隊">
126                 </div>
127             </div>
128         </div>
129     </section>
130     <!-- about me -->
131 
132     <!-- 產品 -->
133     <section id="ty-product">
134         <div class="container">
135             <div class="row">
136                 <!-- Nav tabs -->
137                 <ul class="nav nav-tabs" role="tablist">
138                     <li role="presentation" class="active"><a href="#product1" aria-controls="home" role="tab"
139                             data-toggle="tab">在線大學</a></li>
140                     <li role="presentation"><a href="#product2" aria-controls="profile" role="tab"
141                             data-toggle="tab">會員專享</a></li>
142                     <li role="presentation"><a href="#product3" aria-controls="messages" role="tab"
143                             data-toggle="tab">優質視頻</a></li>
144                     <li class="pull-right hidden-sm hidden-xs"><a href="#product4" aria-controls="settings" role="tab"
145                             data-toggle="tab">更多</a></li>
146                 </ul>
147 
148                 <!-- Tab panes -->
149                 <div class="tab-content">
150                     <div role="tabpanel" class="tab-pane fade in active" id="product1">
151                         <div class="container">
152                             <div class="row">
153                                 <div class="col-md-8">
154                                     <!-- 第一部分 -->
155                                     <div id="pd_one_1" class="media">
156                                         <div class="media-left pd-left">
157                                             <a href="#">
158                                                 <img class="media-object " src="imgs/ty-weixin.jpg" alt="..."
159                                                     width="150px">
160                                             </a>
161                                         </div>
162                                         <div class="media-body text-muted"
163                                             style="padding-top: 150px; padding-left: 10px">
164                                             <h5 class="media-heading">更多資訊歡迎</h4>
165                                                 <h5 class="media-heading">歡迎關注咱們</h4>
166                                         </div>
167                                     </div>
168                                     <!-- 第二部分 -->
169                                     <ol class="breadcrumb lead" id="pd_one_2">
170                                         <li><a href="#">HTML5+全棧</a></li>
171                                         <li><a href="#">Python+人工智能</a></li>
172                                         <li><a href="#">JavaEE</a></li>
173                                         <li><a href="#">Go語言+區塊鏈</a></li>
174                                     </ol>
175                                     <!-- 第三部分 -->
176                                     <h1 id="pd_one_3">歡迎來到這裏
177                                         <strong class="text-danger" style="padding-left: 15px">TYNAM我的門戶 </strong>
178                                     </h1>
179                                     <!-- 第四部分 -->
180                                     <div id="pd_one_4">
181                                         <button class="btn btn-default btn-primary" type="submit">課程諮詢</button>
182                                         <button class="btn btn-default " type="submit"
183                                             style="margin-left:20px">瞭解更多</button>
184                                     </div>
185                                 </div>
186                                 <div class="col-md-4 hidden-sx hidden-xs">
187                                     <img src="imgs/phone.png" alt="" height="500px">
188                                 </div>
189                             </div>
190                         </div>
191                     </div>
192                     <div role="tabpanel" class="tab-pane fade" id="product2">
193                         <div class="container">
194                             <div class="row">
195                                 <div class="col-md-4 hidden-sx hidden-xs" id="pd_two_1">
196                                     <img src="imgs/phone.png" alt="" height="500px">
197                                 </div>
198                                 <div class="col-md-8" id="pd_two_2">
199                                     <h1 class="text-warning">TYNAM-會員</h1>
200                                     <p class="lead text-muted">
201                                         近年，和訊對接數十家金融機構和交易平臺，初步實現大數據算法推送對用戶和金融機構的兩端對接，已成爲國內最大的深度理財社區。期間，未發生一塊兒違約和剛性兌付事件。和訊成爲互聯網財富管理標杆公司和資本關注的焦點，和訊公司自身資本化進程亦在快速推動當中。
202                                     </p>
203                                 </div>
204                             </div>
205                         </div>
206                     </div>
207                     <div role="tabpanel" class="tab-pane fade" id="product3">
208                         <div class="container">
209                             <div class="row">
210                                 <div class="col-md-6" id="pd_three_1">
211                                     <h1 class="text-warning">
212                                         <strong>案例驅動·體系貫穿·全面系統</strong>
213                                     </h1>
214                                     <h3>10-15分鐘視頻
215                                         <span class="text-warning">知識點拆分講解</span>
216                                     </h3>
217                                     <h4 class="text-muted">初步實現大數據算法推送對用戶和金融機構的兩端對接</h4>
218                                     <div class="badge" style="padding: 15px 10px; cursor: pointer;">
219                                         已更新4000+視頻 | 10,0000+ 閱讀
220                                     </div>
221                                 </div>
222                                 <div class="col-md-6  hidden-sm hidden-xs pd-left" id="pd_tree_2">
223                                     <img class="img-responsive" src="imgs/PC.jpeg" alt="">
224                                 </div>
225                             </div>
226                         </div>
227                     </div>
228                     <div role="tabpanel" class="tab-pane fade" id="product14">...</div>
229                 </div>
230             </div>
231         </div>
232     </section>
233     <!-- 產品 -->
234 
235     <!-- 熱門課程 -->
236     <section id="ty-hot">
237         <div class="title text-center">
238             <h1><strong>熱門課程</strong></h1>
239             <img src="imgs/star.png" alt="" class="img-responsive">
240         </div>
241         <div class="container">
242             <div class="row">
243                 <div class="col-md-6 lesson">
244                     <div class="media">
245                         <div class="media-left">
246                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"
247                                 alt="" width="100px">
248                         </div>
249                         <div class="media-body">
250                             <h4 class="media-heading">
251                                 <span class="text-danger">【熱】</span>
252                                 從零玩轉HTML5+跨平臺
253                             </h4>
254                             <p class="text-muted" style="margin-top: 10px">
255                                 咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。</p>
256                         </div>
257                         <div class="media-right text-danger">
258                             246節課
259                         </div>
260                     </div>
261                 </div>
262                 <div class="col-md-6 lesson">
263                     <div class="media">
264                         <div class="media-left">
265                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"
266                                 alt="" width="100px">
267                         </div>
268                         <div class="media-body">
269                             <h4 class="media-heading">
270                                 <span class="text-danger">【熱】</span>
271                                 從零玩轉HTML5+跨平臺
272                             </h4>
273                             <p class="text-muted" style="margin-top: 10px">
274                                 咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。</p>
275                         </div>
276                         <div class="media-right text-danger">
277                             246節課
278                         </div>
279                     </div>
280                 </div>
281                 <div class="col-md-6 lesson">
282                     <div class="media">
283                         <div class="media-left">
284                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"
285                                 alt="" width="100px">
286                         </div>
287                         <div class="media-body">
288                             <h4 class="media-heading">
289                                 <span class="text-danger">【熱】</span>
290                                 從零玩轉HTML5+跨平臺
291                             </h4>
292                             <p class="text-muted" style="margin-top: 10px">
293                                 咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。</p>
294                         </div>
295                         <div class="media-right text-danger">
296                             246節課
297                         </div>
298                     </div>
299                 </div>
300                 <div class="col-md-6 lesson">
301                     <div class="media">
302                         <div class="media-left">
303                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"
304                                 alt="" width="100px">
305                         </div>
306                         <div class="media-body">
307                             <h4 class="media-heading">
308                                 <span class="text-danger">【熱】</span>
309                                 從零玩轉HTML5+跨平臺
310                             </h4>
311                             <p class="text-muted" style="margin-top: 10px">
312                                 咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。</p>
313                         </div>
314                         <div class="media-right text-danger">
315                             246節課
316                         </div>
317                     </div>
318                 </div>
319                 <div class="col-md-6 lesson">
320                     <div class="media">
321                         <div class="media-left">
322                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"
323                                 alt="" width="100px">
324                         </div>
325                         <div class="media-body">
326                             <h4 class="media-heading">
327                                 <span class="text-danger">【熱】</span>
328                                 從零玩轉HTML5+跨平臺
329                             </h4>
330                             <p class="text-muted" style="margin-top: 10px">
331                                 咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。</p>
332                         </div>
333                         <div class="media-right text-danger">
334                             246節課
335                         </div>
336                     </div>
337                 </div>
338                 <div class="col-md-6 lesson">
339                     <div class="media">
340                         <div class="media-left">
341                             <img src="imgs/photo.jpeg" class="media-object img-responsive img-circle img-thumbnail"
342                                 alt="" width="100px">
343                         </div>
344                         <div class="media-body">
345                             <h4 class="media-heading">
346                                 <span class="text-danger">【熱】</span>
347                                 從零玩轉HTML5+跨平臺
348                             </h4>
349                             <p class="text-muted" style="margin-top: 10px">
350                                 咱們認爲，互聯網技術和理念是改善融資市場的有力工具，是推進中產階層壯大，助力實體經濟的核心路徑。</p>
351                         </div>
352                         <div class="media-right text-danger">
353                             246節課
354                         </div>
355                     </div>
356                 </div>
357             </div>
358         </div>
359     </section>
360     <!-- 熱門課程 -->
361 
362     <!-- 友情連接 -->
363     <section id="ty-link">
364         <div class="title text-center">
365             <h1><strong>友情連接</strong></h1>
366             <img src="imgs/star.png" alt="" class="img-responsive">
367         </div>
368         <ul class="logs">
369             <li><a href=""><img src="imgs/log-24.svg" alt=""></a></li>
370             <li><a href=""><img src="imgs/log-Yh.svg" alt=""></a></li>
371             <li><a href=""><img src="imgs/log-jucai.svg" alt=""></a></li>
372             <li><a href=""><img src="imgs/log-qile.svg" alt=""></a></li>
373             <li><a href=""><img src="imgs/log-tuorui.svg" alt=""></a></li>
374             <li><a href=""><img src="imgs/log-xingyue.svg" alt=""></a></li>
375             <li><a href=""><img src="imgs/log-yuecheng.svg" alt=""></a></li>
376         </ul>
377     </section>
378     <!-- 友情連接 -->
379 
380     <!-- footer -->
381     <footer id="ty-footer">
382         <div class="container">
383             <div class="row" style="padding-top: 10px">
384                 <div class="col-md-3 col-md-offset-1 one">
385                     <div class="row">
386                         <ul class="col-md-6">
387                             <li><a href="">關於咱們</a></li>
388                             <li><a href="">課程介紹</a></li>
389                             <li><a href="">熱門課程</a></li>
390                         </ul>
391                         <ul class="col-md-6">
392                             <li><a href="">名師授課</a></li>
393                             <li><a href="">課堂互動</a></li>
394                             <li><a href="">聯繫咱們</a></li>
395                         </ul>
396                     </div>
397                 </div>
398                 <div class="col-md-4 two">
399                     <h5>公司地址：廣州市花都區貴麗北街16號</h5>
400                     <h5>聯繫電話：888-8888-8888</h5>
401                     <h5>聯繫郵箱：Tynam.yang@gmail.com</h5>
402                 </div>
403                 <div class="col-md-3 three col-md-offset-1">
404                     <h5>聯繫咱們：</h5>
405                     <a href=""><img src="imgs/log-xinlang.png" alt="" data-toggle="tooltip" data-placement="top"
406                             title="歡迎關注微信公衆號"></a>
407                     <a href=""><img src="imgs/log-wechat.png" alt="" data-toggle="tooltip" data-placement="top"
408                             title="歡迎關注微博"></a>
409                 </div>
410             </div>
411         </div>
412     </footer>
413     <!-- footer -->
414     <!-- 登錄 -->
415     <div class="modal fade" id="ty-login" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
416         <div class="modal-dialog" role="document">
417             <div class="modal-content">
418                 <div class="modal-header">
419                     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
420                             aria-hidden="true">&times;</span></button>
421                     <h4 class="modal-title" id="myModalLabel">登陸</h4>
422                 </div>
423                 <div class="modal-body">
424                    <div>手機號<input type="text" placeholder="請輸入手機號"></div> 
425                     <div>密碼<input type="password" placeholder="請輸入密碼"></div> 
426                 </div>
427                 <div class="modal-footer">
428                     <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
429                     <button type="button" class="btn btn-primary">登陸</button>
430                 </div>
431             </div>
432         </div>
433     </div>
434 
435     <script src="lib/jquery/jquery-3.4.1.js"></script>
436     <script src="lib/bootstrap-3.3.7/js/bootstrap.js"></script>
437     <script src="js/index.js"></script>
438 </body>
439 
440 </html>

css:html

  1 /* *********************** 通用設置開始 *********************** */
  2 body {
  3     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  4     color: #000;
  5     font-size: 14px;
  6 }
  7 
  8 /* 註冊btn */
  9 .btn-register {
 10     color: #ffffff;
 11     background-color: #0AB4f7;
 12     border-color: #F4F7F7;
 13 }
 14  
 15 .btn-register:hover,
 16 .btn-register:focus,
 17 .btn-register:active,
 18 .btn-register.active,
 19 .open .dropdown-toggle.btn-register {
 20     color: #ffffff;
 21     background-color: #086DF2;
 22     border-color: #F4F7F7;
 23 }
 24  
 25 .btn-register:active,
 26 .btn-register.active,
 27 .open .dropdown-toggle.btn-register {
 28     background-image: none;
 29 }
 30  
 31 .btn-register.disabled,
 32 .btn-register[disabled],
 33 fieldset[disabled] .btn-register,
 34 .btn-register.disabled:hover,
 35 .btn-register[disabled]:hover,
 36 fieldset[disabled] .btn-register:hover,
 37 .btn-register.disabled:focus,
 38 .btn-register[disabled]:focus,
 39 fieldset[disabled] .btn-register:focus,
 40 .btn-register.disabled:active,
 41 .btn-register[disabled]:active,
 42 fieldset[disabled] .btn-register:active,
 43 .btn-register.disabled.active,
 44 .btn-register[disabled].active,
 45 fieldset[disabled] .btn-register.active {
 46     background-color: #0AB4F7;
 47     border-color: #F4F7F7;
 48 }
 49  
 50 .btn-register .badge {
 51     color: #0AB4F7;
 52     background-color: #ffffff;
 53 }
 54 
 55 @font-face {
 56     font-family: ty;
 57     src:url('../fonts/fonts/icomoon.woff') format('woff'),
 58     url('../lib/fonts/fonts/icomoon.ttf') format('truetype'),
 59     url('../lib/fonts/fonts/icomoon.svg') format('svg'),
 60     url('../lib/fonts/fonts/icomoon.eot') format('embedded-opentype'); /* IE9 */
 61 }
 62 
 63 [class^='icon-'],
 64 [class*=' icon-']{
 65     font-family: ty;
 66     font-style: normal;
 67 }
 68 
 69 /* *********************** 通用設置結束 *********************** */
 70 
 71 /* *********************** header 開始 *********************** */
 72 #ty-header {
 73     margin: 0 auto;
 74     height: 40px;
 75     line-height: 39px;     
 76 }
 77 
 78 #ty-header .top-bar {
 79     border-bottom: 1px solid #eee; 
 80 } 
 81 
 82 .top-bar-1 a {
 83     position: relative;
 84 }
 85 
 86 .top-bar-1 a img {
 87     display: none;
 88     position: absolute;
 89     left: 50%;
 90     margin-left: -80px; 
 91     margin-top: -10px;
 92     z-index: 9999;
 93 }
 94 
 95 .top-bar-1 a:hover img {
 96     display: block;
 97 }
 98 
 99 #ty-header .top-bar .container .row .top-bar-4 .sign {
100     margin-left: 10px;
101 }
102 
103 #ty-header .top-bar .container .row>div+div {
104     border-left: 1px solid #eee;
105 }
106 
107 .icon-phone::before {
108     content: '\e958';
109     font-size: 14px;
110 }
111 
112 .icon-tel::before {
113     content: '\e942';
114     font-size: 14px;
115 }
116 
117 /* navbar開始 */
118 #ty-header .ty-navbar {
119     background: #fff;
120     
121 }
122 
123 #ty-header .navbar-brand {
124     height: 70px;
125     padding: 5px 15px;
126 }
127 
128 #ty-header #ty-navbar>ul>li>a {
129     height: 70px;
130     line-height: 40px;
131 }
132 
133 #ty-header #ty-navbar ul li.active a,
134 #ty-header #ty-navbar ul li a:hover
135 {
136     background-color: transparent;
137     border-bottom: 2px solid #0AB4f7;
138 }
139 
140 #ty-header .ty-navbar .navbar-toggle {
141     margin-top: 18px;
142 }
143 /* navbar結束 */
144 /* *********************** header 結束 *********************** */
145 
146 /* *********************** banner 開始 *********************** */
147 #ty-banner {
148     margin-top: 70px;
149 }
150 
151 #ty-banner .item {
152     background: no-repeat center center;
153     -webkit-background-size : cover !important;
154     background-size: cover !important;
155 }
156 
157 @media screen and (min-width: 500px) {
158     #ty-banner .item {
159         height: 600px;
160     }
161 }
162 /* *********************** banner 結束 *********************** */
163 
164 /* *********************** 產品特點 開始 *********************** */
165  
166 #ty-product {
167     background: #f0f0f0;
168     padding: 30px 0;
169 }
170 
171 #ty-product .nav {
172     font-size: 18px;
173 }
174 
175 #ty-product .nav a {
176     font-size: 18px;
177     color: #999;
178 }
179 
180 #ty-product .nav li.active a {
181     background: none;
182     border: none;
183     border-bottom: 2px solid #0AB4f7;
184     color: #000;
185 }
186 
187 #ty-product .container {
188     padding-top: 20px;
189 }
190 
191 #ty-product .pd-left {
192     padding: 40px 0;
193 }
194 
195 #pd_one_1 {
196     margin: 10px 0;
197 }
198 
199 #pd_one_2 {
200     background-color: transparent;
201 }
202 
203 #pd_two_2, #pd_three_1 {
204     padding-top: 90px;
205 }
206 /* *********************** 產品特點 結束 *********************** */
207 
208 
209 /* *********************** 關於咱們 開始 *********************** */
210 
211 
212 #ty-abuout .title,
213 #ty-hot .title,
214 #ty-link .title
215 {
216     display: flex;
217     flex-direction: column;
218     justify-content: center;
219     align-items: center;
220     padding-bottom: 10px;
221 }
222 
223 #ty-abuout .title img,
224 #ty-hot .title img,
225 #ty-link .title img
226 {
227     height: 20px;
228 }
229 
230 #ty-abuout .row p {
231     line-height: 30px;
232     font-size: 15px;
233 }
234 
235 #ty-abuout .row img {
236     height: 300px;
237 }
238 /* *********************** 關於咱們 結束 *********************** */
239 
240 /* *********************** 熱門課程 開始 *********************** */
241 #ty-hot .lesson {
242     padding: 15px 10px;
243 }
244 
245 #ty-hot .lesson .media-left {
246     width: 20%;
247 }
248 
249 #ty-hot .lesson .media-body {
250     width: 60%;
251     vertical-align: center;
252 }
253 
254 #ty-hot .lesson .media-right {
255     width: 20%;
256     font-size: 16px;
257     vertical-align: middle;
258 }
259 
260 /* *********************** 熱門課程 結束 *********************** */
261 /* *********************** 友情連接 開始 *********************** */
262 #ty-link .logs {
263     list-style: none;
264     text-align: center;
265 }
266 
267 #ty-link .logs li {
268     display: inline-block;
269     padding: 10px 10px;
270 }
271 
272 #ty-link .logs li a img{
273     height: 110px;
274 }
275 /* *********************** 友情連接 結束 *********************** */
276 
277 /* *********************** footer 開始 *********************** */
278 #ty-footer {
279     width: 100%;
280     height: 200px;
281     background: rgb(44, 38, 38);
282     color: rgb(183, 185, 183);
283     list-style: none;
284     font-size: 16px;
285 }
286 
287 #ty-footer ul {
288     list-style: none;
289 }
290 
291 #ty-footer .one, #ty-footer .two {
292     padding: 10px;
293     border-right: 1px solid #666;
294     height: 180px;
295 
296     display: flex;
297     flex-direction: column;
298     justify-content: center;
299     align-items: center;
300 }
301 
302 #ty-footer .one li {
303     line-height: 40px;
304     color: rgb(183, 185, 183);
305 }
306 
307 #ty-footer .one li a {
308     color: rgb(183, 185, 183);
309 }
310 
311 #ty-footer .three {
312     padding: 30px 10px;
313     height: 180px;
314 }
315 
316 #ty-footer .three a {
317     display: inline-block;
318 }
319 
320 #ty-footer .three a img {
321     width: 50px;
322 }
323 /* *********************** footer 結束 *********************** */
324 
325 /* *********************** 登陸 開始 *********************** */
326 #ty-login button, #ty-login input {
327      outline: none;
328 }
329 
330 #ty-login .modal-body>div {
331     margin:15px 20px;
332 }
333 
334 #ty-login .modal-body>div>input {
335     margin-left: 15px;
336     width: 200px;
337 }
338 /* *********************** 登陸 結束 *********************** */

JS:前端

 1 // 輪播圖
 2 $(function () {
 3 
 4     
 5     $(window).on('resize', function () {
 6         let clickWidth = $(window).width();
 7         let isBigImg = clickWidth >= 500;
 8         let $allItems = $("#ty-banner .item");
 9 
10         $allItems.each(function (index, item) {
11             let src = isBigImg ? $(item).data("lg-mg") : $(item).data("sm-mg");
12             let imgUrl = "url('" + src + "')";
13 
14             $(item).css({
15                 background: imgUrl
16             });
17 
18             if(!isBigImg){
19                 let $img = "<img src='" + src + "'>";
20                 $(item).empty().append($img);
21             }else{
22                 $(item).empty();
23             }
24         });
25     });
26 
27 
28     // 導航處理
29     let $alllis =  $("#ty-navbar li")
30 
31     $($alllis[1]).on('click', function(){
32         $('html,body').animate({scrollTop: $("#ty-hot").offset().top});
33     });
34 
35     $(window).trigger("resize");
36 
37 
38     // tooltip
39     $(function () {
40         $('[data-toggle="tooltip"]').tooltip()
41       });
42 });