html： css: JS: 效果圖： 學習 葉建華親授-從零玩轉響應式開發-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 <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
