index.html
<html lang="Zn-cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="./css/normalize.css"> <!--重置 -->
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/index.css">
</head>
<body>
<!-- 导航 -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">HPIT学院</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right ">
<li class="">
<a href="#home">首页</a>
</li>
<li>
<a href="#bbs">论坛</a>
</li>
<li>
<a href="#web">前端开发</a>
</li>
<li>
<a href="#new">最新课程</a>
</li>
<li>
<a href="#app">移动app</a>
</li>
<li>
<a href="#about">联系我们</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- 大屏 -->
<section id="home">
<div class="lvjing">
<div class="container">
<div class="row col-md-10 col-md-offset-1 text-center" >
<h1> bootstrap实战课程等你来战！</h1>
<p>本套课程适用于：1.WEB开发人员；2.网站维护人员、管理人员</p>
<p>培训技能的目标：使用bootstrap框架快速构建响应式网页，颠覆传统WEB前端！</p>
<img class="img img-responsive center-block" src="./img/php.jpg" alt="">
</div>
</div>
</div>
</section>
<!-- 讨论 -->
<section id="bbs">
<div class="container">
<div class="row text-center" >
<a href="#"> <div class="col-md-4 col-xs-4 bbs-lie" >
<img src="./img/a.png" alt="">
<h4>Android开发</h4>
<p>Android开发技术交流、问题求助、实战案例分享</p>
</div></a>
<a href="#"> <div class="col-md-4 col-xs-4 bbs-lie" >
<img src="./img/i.png" alt="">
<h4>ios开发</h4>
<p>IOS开发技术交流，海量IOS实战干货分享</p>
</div></a>
<a href="#"> <div class="col-md-4 col-xs-4 bbs-lie" >
<img src="./img/b.png" alt="">
<h4>嵌入式底层开发</h4>
<p>底层嵌入开发，实战案例等技术交流讨论</p>
</div></a>
</div>
</div>
</section>
<!-- h5 -->
<section id="web">
<div class="container">
<div class="row " >
<div class="col-md-7 col-xs-12">
<h2>HTML5前端开发</h2>
<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级！</p>
<p><span class="glyphicon glyphicon-grain"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
<p><span class="glyphicon glyphicon-grain"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
</div>
<div class="col-md-5 col-xs-12">
<img src="./img/html5.jpg" class="col-md-12 col-xs-12" alt="">
</div>
</div>
</div>
</section>
<!--bootstrap-->
<section id="web2">
<div class="container">
<div class="row " >
<div class="col-md-5 col-xs-12">
<img src="./img/Bootstrap.jpg" class="col-md-12 col-xs-12" alt="">
</div>
<div class="col-md-7 col-xs-12">
<h2>bootstrap实战视频教程</h2>
<p>Bootstrap是最受欢迎的Httml、Css和Js框架，用于开发响应式布局、移动设备优先的WEB项目</p>
<p><span class="glyphicon glyphicon-grain"></span>你的网站和应用能在Bootstrap的帮助下通过同一份代码快速、有效适配手机、平板、Pc设备。</p>
<p><span class="glyphicon glyphicon-grain"></span>Bootstrap提供全面、美观的文档，你能在这里找到关于Html元素、Html和Css组件、JQuery插件方面的所有详细文档</p>
</div>
</div>
</div>
</section>
<!--app-->
<section id="app">
<div class="container">
<div class="row " >
<div class="col-md-6 col-xs-12">
<h2>HPIT学院移动APP下载</h2>
<p>全新Ui交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出</p>
<p>你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！</p>
<a href="#"> <div class="col-md-3 col-xs-5 btn" >
<span class="glyphicon glyphicon-download-alt"></span>iphone版
</div></a>
<a href="#"> <div class="col-md-3 col-xs-5 btn">
<span class="glyphicon glyphicon-download-alt"></span>Android版
</div></a>
</div>
<div class="col-md-6 col-xs-12">
<img src="./img/app-banner.jpg" class="col-md-12 col-xs-12" alt="">
</div>
</div>
</div>
</section>
<!-- 最新课程 -->
<section id="new">
<div class="container">
<div class="row text-center" >
<h3>最新课程</h3>
<div class="lieb col-md-3 col-xs-6">
<div class="col-md-12 col-xs-10 " >
<img src="./img/swift.jpg" alt="" >
<a href="#"> <div class="btn col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">加入学习</div></a>
</div>
</div>
<div class="lieb col-md-3 col-xs-6">
<div class="col-md-12 col-xs-10 " >
<img src="./img/swift.jpg" alt="" >
<a href="#"> <div class="btn col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">加入学习</div></a>
</div>
</div>
<div class="lieb col-md-3 col-xs-6">
<div class="col-md-12 col-xs-10 " >
<img src="./img/swift.jpg" alt="" >
<a href="#"> <div class="btn col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">加入学习</div></a>
</div>
</div>
<div class="lieb col-md-3 col-xs-6">
<div class="col-md-12 col-xs-10 " >
<img src="./img/swift.jpg" alt="" >
<a href="#"> <div class="btn col-md-6 col-md-offset-3 col-xs-6 col-xs-offset-3">加入学习</div></a>
</div>
</div>
</div>
</div>
</section>
<script src="./js/jquery-3.3.1.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
</body>
</html>
index.scss
background-color: #fff;
.navbar-brand{
font-size: 30px;
font-weight: bold;
color: #40d2b4;
height: 70px;
line-height: 35px;
}
.navbar-right>li>a{
font-size: 16px;
line-height: 35px;
height: 70px;
font-weight: bold;
color: #666;
}
.navbar-toggle{
margin-top:15px;
&:focus, &:hover{
border-color: #40D2B1;
background-color: rgb(69, 210, 184);
}
.icon-bar{
background-color: #1c9982;
}
}
}
#home{
background-image: url(../img/home-bg.jpg);
// height: 600px;
background-size: cover;
margin-top: 71px;
color: white;
.lvjing{
background-color: rgba(20, 121, 133, 0.5);
height: 100%;
}
h1{
font-weight: bolder;
margin-top: 80px;
}
p{
margin: 20px 0;
}
img{
margin-top: 20px;
margin-bottom: 50px;
}
}
#bbs{
padding-top: 80px;
background: white;
.bbs-lie{
&:hover{
background-color: #f1f1f1;
box-shadow: 1px 1px 4px #ccc;
}
h4{
margin-top: 25px;
}
}
a{
color: black;
}
}
#web{
margin-top: 50px;
background-color:#f1f1f1;
padding: 30px 0;
p{
margin-bottom: 20px;
}
h2{
margin-bottom: 40px;
}
span{
width: 36px;
height: 36px;
display: inline-block;
background-color: #40D2B1;
border-radius: 50%;
color: white;
line-height: 36px;
text-align: center;
margin-right:15px;
}
}
#web2{
// margin-top: 50px;
padding: 80px 0;
box-shadow: 1px 1px 4px #ccc;
p{
margin-bottom: 20px;
}
h2{
margin-bottom: 40px;
}
span{
width: 36px;
height: 36px;
display: inline-block;
background-color: #40D2B1;
border-radius: 50%;
color: white;
line-height: 36px;
text-align: center;
margin-right:15px;
}
}
#app{
padding: 80px 0;
box-shadow: 1px 1px 4px #ccc;
h2{
margin-bottom: 40px;
}
p{
font-size: 12px;
}
.btn{
margin: 10px 0;
background-color: #40D2B1;
color: white;
margin-left: 5px;
}
}
#new{
padding: 80px 0;
box-shadow: 1px 1px 4px #ccc;
h3{
margin-bottom:50px ;
font-weight: bolder;
}
.lieb{
padding: 0;
}
.btn{
text-align: center;
border: #40d2b4 1px solid;
margin-top: 20px;
margin-bottom: 20px;
}
img{
width: 100%;
}
a{
color: #40d2b4;
}
}
