HTML
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>垂直对齐</title>
<link rel="stylesheet" href="bootstrap.min.css" charset="UTF-8">
<link rel="stylesheet" href="index.css" charset="UTF-8">
</head>
<body>
<!--———————————————————————————头部begin———————————————————————————-->
<header id="lk_header">
<!-- 上部分 -->
<div class="top-bar d-none d-sm-none d-md-block d-lg-block text-center text-muted">
<div class="container">
<div class="row">
<div class="top-bar-1 col-md-2">
<a href="">
<i class="icon-phone"></i>
<span class="text-muted">关注微信号</span>
<img src="Koala.jpg" width="80" height="60" alt="图片加载失败">
</a>
</div>
<div class="top-bar-2 col-md-5">
<i class="icon-tel"></i>
<span>188-8888-8888（服务时间：9:00-21: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 href="" class="btn btn-lk btn-sm">免费注册</a>
<a href="" class="ml-2">立即登录</a>
</div>
</div>
</div>
</div>
<!-- 下部分 -->
<nav class="navbar navbar-expand-lg navbar-light navbar-lk">
<div class="container">
<a class="navbar-brand d-flex justify-content-center align-items-center" href="#">
<img src="Desert.jpg" width="180" height="80" alt="">
</a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#lk-nav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="lk-nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">首页</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" data-toggle="dropdown">
学习学科
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Web前端+全栈</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Python+人工智能</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">JavaEE+大数据</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">服务体系</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">软件工具</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">专题学习</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">就业指导</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</div>
</nav>
</header>
<!--———————————————————————————头部end———————————————————————————-->
<!--———————————————————————————轮播图begin———————————————————————————-->
<section id="lk_carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#lk_carousel" data-slide-to="0" class="active"></li>
<li data-target="#lk_carousel" data-slide-to="1"></li>
<li data-target="#lk_carousel" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active" data-sm-img="小屏图" data-lg-img="大屏图">
<img src="Jellyfish.jpg" alt="...">
</div>
<div class="carousel-item" data-sm-img="小屏图" data-lg-img="大屏图">
<img src="Lighthouse.jpg" alt="...">
</div>
<div class="carousel-item" data-sm-img="小屏图" data-lg-img="大屏图">
<img src="Penguins.jpg" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#lk_carousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#lk_carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</section>
<!--———————————————————————————轮播图end———————————————————————————-->
<!--———————————————————————————热门课程begin———————————————————————————-->
<section id="lk_hot">
<!-- 标题 -->
<div class="text-center mt-3 mb-3">
<h2><strong>热门课程</strong></h2>
<img src="Koala.jpg" width="80" height="35" alt="">
</div>
<!-- 内容 -->
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-4">
<div class="media d-flex align-items-center m-1 mb-3 bg-light p-2">
<div class="media-left mr-2">
<img src="Koala.jpg" alt="" class="media-object rounded-circle img-fluid img-thumbnail" width="100">
</div>
<div class="media-body">
<h6 class="media-heading">
<span class="text-danger">【热】</span>
H5+C3从入门到精通
</h6>
<p class="text-muted">8大案例全程驱动教学</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="media d-flex align-items-center m-1 mb-3 bg-light p-2">
<div class="media-left mr-2">
<img src="Koala.jpg" alt="" class="media-object rounded-circle img-fluid img-thumbnail" width="100">
</div>
<div class="media-body">
<h6 class="media-heading">
<span class="text-success">【新】</span>
Python项目实战
</h6>
<p class="text-muted">368个课时打造最全QT</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="media d-flex align-items-center m-1 mb-3 bg-light p-2">
<div class="media-left mr-2">
<img src="Koala.jpg" alt="" class="media-object rounded-circle img-fluid img-thumbnail" width="100">
</div>
<div class="media-body">
<h6 class="media-heading">
<span class="text-warning">【战】</span>
JavaEE-SSH三大框架
</h6>
<p class="text-muted">就业实战第一篇</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="media d-flex align-items-center m-1 mb-3 bg-light p-2">
<div class="media-left mr-2">
<img src="Koala.jpg" alt="" class="media-object rounded-circle img-fluid img-thumbnail" width="100">
</div>
<div class="media-body">
<h6 class="media-heading">
<span class="text-warning">【战】</span>
Vue+Node拼多多项目实战
</h6>
<p class="text-muted">打通前后端，联通数据库</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="media d-flex align-items-center m-1 mb-3 bg-light p-2">
<div class="media-left mr-2">
<img src="Koala.jpg" alt="" class="media-object rounded-circle img-fluid img-thumbnail" width="100">
</div>
<div class="media-body">
<h6 class="media-heading">
<span class="text-danger">【火】</span>
JavaEE-SSH综合项目应用
</h6>
<p class="text-muted">博客系统前后端统一部署</p>
</div>
</div>
</div>
<div class="col-md-6 col-lg-4">
<div class="media d-flex align-items-center m-1 mb-3 bg-light p-2">
<div class="media-left mr-2">
<img src="Koala.jpg" alt="" class="media-object rounded-circle img-fluid img-thumbnail" width="100">
</div>
<div class="media-body">
<h6 class="media-heading">
<span class="text-danger">【热】</span>
JavaScript高级+设计模式
</h6>
<p class="text-muted">原型链、设计模式、面向对象</p>
</div>
</div>
</div>
</div>
</div>
</section>
<!--———————————————————————————热门课程end———————————————————————————-->
<!--———————————————————————————产品中心begin———————————————————————————-->
<section id="lk_product">
<div class="container">
<!-- 上边 -->
<ul class="nav nav-tabs" id="mtTab">
<li class="nav-item">
<a href="#home" class="nav-link active" id="home-tab" data-toggle="tab">在线大学</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" id="profile-tab" data-toggle="tab">会员专享</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" id="contact-tab" data-toggle="tab">优质视频</a>
</li>
<li class="nav-item">
<a href="#home" class="nav-link" id="home-tab" data-toggle="tab">线下沙龙</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" id="profile-tab" data-toggle="tab">精品课程</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" id="contact-tab" data-toggle="tab">撩课小册</a>
</li>
<li class="nav-item">
<a href="#home" class="nav-link" id="home-tab" data-toggle="tab">面试宝典</a>
</li>
<li class="nav-item">
<a href="#profile" class="nav-link" id="profile-tab" data-toggle="tab">小撩阅读</a>
</li>
<li class="nav-item">
<a href="#contact" class="nav-link" id="contact-tab" data-toggle="tab">小撩公益</a>
</li>
</ul>
<!-- 下边 -->
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home">
<div class="container">
<div class="row">
<div class="col-md-8 pd-left">
<!-- 第一部分 -->
<div id="pd_one_1" class="mb-4 mt-4">
<a href=""><img src="Koala.jpg"," alt="二维码"," width="140"></a>
<div class="text-muted ml-2">
<div>更多资讯欢迎</div>
<div>关注撩课学院</div>
</div>
</div>
<!-- 第二部分 -->
<div id="pd_one_2" class="breadcrumb lead mb-4">
<strong>HTML5+全栈 / Python+人工智能 / JavaEE+大数据</strong>
</div>
<!-- 第三部分 -->
<h1 id="pd_one_3">
<strong>
欢迎来到IT人的在线大学
<span class="text-danger">/</span>
撩课学院
<span class="text-danger">/</span>
</strong>
</h1>
<!-- 第四部分 -->
<div id="pd_one_4">
<button class="btn btn-primary btn-lg" style="margin-right: 10px;">课程咨询</button>
<button class="btn btn-default btn-lg">了解更多</button>
</div>
</div>
<div class="col-md-4 pd-right">
<img src="Koala.jpg" alt="" class="img-fluid d-none d-sm-none d-md-none d-lg-block">
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="profile">
<div class="container">
<div class="row">
<div class="col-md-4">
<img src="Koala.jpg" alt="" class="img-fluid">
</div>
<div class="col-md-8">
<h1 class="text-warning mt-5">撩课学院会员</h1>
<p class="lead">汇聚名师，为你呈现前端、后端、移动端、大数据、人工智能等从零基础到项目实战连载课程内容。专属的会员社群和私人订制服务，1年365天持续更新课程紧跟前沿技术！</p>
</div>
</div>
</div>
</div>
<div class="tab-pane fade" id="contact">
<div class="container">
<div class="row">
<div class="col-md-6 pd-left">
<h1>
<strong class="text-danger">案例驱动·体系贯穿·全面系统</strong>
</h1>
</div>
<div class="col-md-6">右</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!--———————————————————————————产品中心end———————————————————————————-->
<!--———————————————————————————关于我们begin———————————————————————————-->
<section id="lk_about">
<!-- 标题 -->
<div class="text-center mt-3 mb-3">
<h2><strong>关于我们</strong></h2>
<img src="Koala.jpg" width="80" height="35" alt="">
</div>
<!-- 内容 -->
<div class="container">
<div class="row">
<div class="col-lg-8 order-1">
<p class="text-muted">撩课学院（itlike.com）起源于一个资深的教育团队所发起的一个公益项目。从2017年开始，通过各大在线平台（网易、腾讯等），向全国免费开放他们精心打磨的视频课程“H5系列”、“Python系列”、“Java系列”等。</p>
<p class="text-muted">在短短不到一年的时间，接近10万多名学生报名参加学习了这些课程，好评如潮。为了有组织的推出更加全面、优质、成体系的课程，撩课学院应运而生。</p>
<p class="text-muted">撩课学院课程体系完善，包含HTML5+全栈开发、Python+人工智能、JavaEE、Go语言+区块链、UI/UE设计、新媒体、电商运营等系列课程。</p>
</div>
<div class="col-lg-4 order-lg-2 mb-3 mb-lg-0">
<img src="Koala.jpg" width="100%" alt="">
</div>
</div>
</div>
</section>
<!--———————————————————————————关于我们end———————————————————————————-->
<!--———————————————————————————友情链接begin———————————————————————————-->
<section id="lk_link" class="d-none d-md-none d-lg-block">
<!-- 标题 -->
<div class="text-center mt-5 mb-5">
<h2><strong>友情链接</strong></h2>
<img src="Koala.jpg" width="80" height="35" alt="">
</div>
<!-- 内容 -->
<div class="container mb-5">
<div class="row d-flex justify-content-around align-items-center">
<a href=""><img src="Desert.jpg" width="150" height="80" alt=""></a>
<a href=""><img src="Jellyfish.jpg" width="150" height="80" alt=""></a>
<a href=""><img src="Koala.jpg" width="150" height="80" alt=""></a>
<a href=""><img src="Penguins.jpg" width="150" height="80" alt=""></a>
<a href=""><img src="Lighthouse.jpg" width="150" height="80" alt=""></a>
</div>
</div>
</section>
<!--———————————————————————————友情链接end———————————————————————————-->
<!--———————————————————————————尾部begin———————————————————————————-->
<footer id="lk_footer">
<div class="container">
<div class="row d-flex justify-content-between align-items-center">
<div class="col-lg-4 d-none d-sm-none d-md-none d-lg-block">
<div class="row d-flex justify-content-center align-items-center">
<ul class="offset-lg-2 col-lg-4">
<li><a href="">关于我们</a></li>
<li><a href="">课程介绍</a></li>
<li><a href="">热门课程</a></li>
</ul>
<ul class="col-lg-6">
<li><a href="">名师授课</a></li>
<li><a href="">课堂互动</a></li>
<li><a href="">联系我们</a></li>
</ul>
</div>
</div>
<div class="col-md-6 col-lg-5 text-center">
<h6>公司地址：上海市松江区松江大学城</h6>
<h6>联系电话：六个六</h6>
<h6>地址邮箱：admin@itlike.com</h6>
</div>
<div class="col-md-6 col-lg-3 d-none d-sm-none d-md-block">
<h6>联系我们：</h6>
<a href=""><img class="rounded-circle" src="Koala.jpg" width="50" height="50" alt="" data-toggle="tooltip" data-placement="bottom" title="itlike001"></a>
<a href=""><img class="rounded-circle" src="Desert.jpg" width="50" height="50" alt="" data-toggle="tooltip" data-placement="bottom" title="itlike002"></a>
</div>
</div>
</div>
</footer>
<!--———————————————————————————尾部end———————————————————————————-->
<script type="text/javascript" src="jquery-3.3.1.slim.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="popper.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="bootstrap.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="index.js" charset="UTF-8"></script>
</body>
</html>CSS
@charset "UTF-8";
/*——————————————————————通用样式begin——————————————————————*/
body{
color: black;
font-family: Microsoft YaHei;
}
a:hover{
text-decoration: none;
}
ul,ol{
list-style: none;
}
/*——————————————————————通用样式end——————————————————————*/
/*——————————————————————头部begin——————————————————————*/
#lk_header{
/*background-color: red;*/
}
#lk_header .top-bar{
height: 40px;
line-height: 39px;
border-bottom: 1px solid #e0e0e0;
}
#lk_header .top-bar .container .row>div+div{
border-left: 1px solid #e0e0e0;
}
#lk_header .top-bar .container .row .top-bar-1 a{
position: relative;
}
#lk_header .top-bar .container .row .top-bar-1 a img{
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
z-index: 999;
display: none;
}
#lk_header .top-bar .container .row .top-bar-1 a:hover img{
display: block;
}
.icon-phone::before{
content: '\e958';
font-size: 13px;
}
.icon-tel::before{
content: '\e492';
font-size: 13px;
}
.btn-lk{
color: white;
background-color: #8330f0;
border-color: #9318f2;
}
/*导航*/
#lk_header .navbar-lk{
border-bottom: 1px solid #e0e0e0;
}
#lk_header .navbar-lk .navbar-brand{
height: 90px;
/*background-color: red;*/
margin-left: 15px;
margin-right: 60px;
}
#lk_header .navbar-lk .navbar-brand img{
width: 130px;
}
#lk_header .navbar-lk .navbar-nav>li>a{
height: 70px;
/*background-color: red;*/
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
#lk_header .navbar-lk .navbar-nav>li>a:hover{
border-bottom: 2px solid purple;
}
#lk_header .navbar-lk .navbar-toggler{
margin-top: 5px;
}
/*——————————————————————头部end——————————————————————*/
/*——————————————————————轮播图begin——————————————————————*/
#lk_carousel .carousel-item img{
height: 100%;
width: 100%;
background: no-repeat center center;
background-size: cover;
}
@media screen and (min-width: 900px){
#lk_carousel .carousel-item{
height: 410px;
}
}
/*——————————————————————轮播图end——————————————————————*/
/*——————————————————————热门课程begin——————————————————————*/
#lk_hot{
/*background-color: purple;*/
}
/*——————————————————————热门课程end——————————————————————*/
/*——————————————————————产品中心begin——————————————————————*/
#lk_product{
background-color: #f0f0f0;
padding: 40px 0;
}
#lk_product .nav-item{
font-size: 18px;
}
#lk_product .nav-item a{
color: #000;
border: none;
padding: 10px 20px;
}
#lk_product .nav-item a.active{
border: none;
background-color: transparent;
border-bottom: 1px solid #8330f0;
color: #8330f0;
}
#lk_product .tab-content{
padding-top: 20px;
}
/*——————————————————————产品中心end——————————————————————*/
/*——————————————————————关于begin——————————————————————*/
#lk_about{
/*background-color: skyblue;*/
}
/*——————————————————————关于end——————————————————————*/
/*——————————————————————友情链接begin——————————————————————*/
#lk_link{
/*background-color: red;*/
}
/*——————————————————————友情链接end——————————————————————*/
/*——————————————————————尾部begin——————————————————————*/
#lk_footer{
width: 100%;
height: 130px;
background: #9e0639;
color: white;
}
#lk_footer .container .row{
height: 130px;
}
#lk_footer .container .row a{
color: white;
}
/*——————————————————————尾部end——————————————————————*/
JS
$(function() {
// ——————————————————轮播图
$(window).on('resize', function() {
// 1.获得窗口宽度
let clientW = $(window).width()
// 2.设置临界点
let isShowBigImage = clientW >= 900
// 3.获取所有item
let $allItems = $("#lk_carousel .carousel-item")
// 4.遍历
$allItems.each((Index, item) => {
// 4.1取出图片的路径
let src = isShowBigImage ? $(item).data('lg-img') : $(item).data('sm-img')
let imgUrl = `url(${src})`;
// 4.2设置背景
$(item).css({
backgroundImage: imgUrl
})
// 4.3创建img标签
if(!isShowBigImage) {
let imgEle = `<img src="${src}">`
$(item).empty().append(imgEle)
} else{
$(item).empty();
}
})
})
$(window).trigger('resize');
// ——————————————————工具的提示
$("[data-toggle='tooltip']").tooltip();
})
152
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
