Bootstrap-实现简单的网站首页
2019-08-14 09:41:28来源：博客园 阅读 ()
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 <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-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 });
效果图：
学习 叶建华亲授-从零玩转响应式开发-bootstrap打通前端+移动端 后所作。感谢老师的公开视频
原文链接:https://www.cnblogs.com/tynam/p/11099084.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
相关文章
- [01]HTML基础之简单介绍 2020-06-01
- position: sticky实现导航栏下滑吸顶效果 2020-05-30
- HTML开发实例-简单相亲网站开发（主体为table） 2020-05-27
- Vue 结合html2canvas和jsPDF实现html页面转pdf 2020-04-25
- Bootstrap4网格系统+文字排版+颜色 简单练习 2020-04-14
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
热门词条
最新资讯
热门关注
热门标签