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=" 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=" 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">×</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:
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- 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 });
效果图：
学习 叶建华亲授-从零玩转响应式开发-bootstrap打通前端+移动端 后所作。感谢老师的公开视频