Bootstrap 网页2
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>网站实例</title>
<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/bootstrap-maizi.css" />
</head>
<body>
<!--导航-->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!--小屏幕导航按钮和logo-->
<div class="navbar-header">
<button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="index.html" class="navbar-brand">理工学院</a>
</div>
<!--小屏幕导航按钮和logo-->
<!--导航-->
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#home">首页</a></li>
<li><a href="#bbs">论坛</a></li>
<li><a href="#html5">前端开发</a></li>
<li><a href="index.html">后台开发</a></li>
<li><a href="index.html">移动APP</a></li>
<li><a href="index.html">联系我们</a></li>
</ul>
</div>
<!--导航-->
</div>
</nav>
<!--导航-->
<!--home-->
<section id="home">
<div class="lvjing">
<div class="container">
<div class="row">
<div class="col-md-1"></div>
<div class="col-md-10">
<h1>广州理工学院欢迎您！</h1>
<p>
一技之长加综合素质<br/>
学习技能的目标：成为一个有用的人
</p>
<img src="img/学校.jpg" class="img-responsive" alt="php"></img>
</div>
<div class="col-md-1"></div>
</div>
</div>
</div>
</section>
<!--home-->
<section id="bbs">
<div class="container">
<div class="row">
<div class="col-md-4">
<a href="http://www.maiziedu.com" target="_blank">
<img src="img/a.png" class="img-responsive" alt=""/>
<h3>Android开发</h3>
<p>Android开发技术交流、问题求助、实战案例分享</p>
</a>
</div>
<div class="col-md-4">
<a href="http://www.maiziedu.com" target="_blank">
<img src="img/i.png" class="img-responsive" alt=""/>
<h3>IOS开发</h3>
<p>iOS开发技术交流，海量iOS实战干货分享</p>
</a>
</div>
<div class="col-md-4">
<a href="http://www.maiziedu.com" target="_blank">
<img src="img/b.png" class="img-responsive" alt=""/>
<h3>嵌入式底层开发</h3>
<p>底层嵌入式开发、实战案例等技术交流讨论</p>
</a>
</div>
</div>
</div>
</section>
<section id="html5">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>HTML5前端开发</h2>
<p>一线资深前端开发工程师倾情打造！助你完成普通程序员到优秀工程师的华丽升级</p>
<p><span class="glyphicon glyphicon-heart mai-icon"></span>使用HTML5与CSS3技术轻松实现设备自适应展示。</p>
<p><span class="glyphicon glyphicon-heart mai-icon"></span>清晰明了的语义代码结构，更高的可读性、更利于页面维护的。</p>
</div>
<div class="col-md-6">
<img src="img/html5.jpg" class="img-responsive" alt=""/>
</div>
</div>
</section>
<section id="bootrap">
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="img/Bootstrap.jpg" class="img-responsive" alt=""/>
</div>
<div class="col-md-6">
<h2>bootstrap实战视频教程</h2>
<p>Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。</p>
<p><span class="glyphicon glyphicon-heart mai-icon"></span>你的网站和应用能在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备。</p>
<p><span class="glyphicon glyphicon-heart mai-icon"></span>Bootstrap 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、jQuery 插件方面的所有详细文档</p>
</div>
</div>
</div>
</section>
<section id="course">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>最新课程</h2>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
<div class="col-md-3">
<div class="course">
<img src="img/swift.jpg" class="img-responsive" alt=""></img>
<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
</div>
</div>
</div>
</div>
</section>
<section id="app">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>理工学院移动APP下载</h2>
<p>全新UI交互，与新网站数据同步，更加丰富的课程，开启精彩无限，语音搜索课程，喊出你想要的课程，一件收藏，方便自己重复学习，离线下载课程，在哪儿都能开！ </p>
<button class="btn btn-default" id="button">
<span class="glyphicon glyphicon-download-alt"></span>
iPhone版
</button>
<button class="btn btn-default" id="button">
<span class="glyphicon glyphicon-download-alt"></span>
Android版
</button>
</div>
<div class="col-md-6">
<img src="img/app-banner.jpg" class="img-responsive" alt=""/>
</div>
</div>
</div>
</section>
<section id="contact">
<div class="lvjing">
<div class="container">
<div class="row">
<div class="col-md-6">
<h2>
<span class="glyphicon glyphicon-flag"></span>
联系学校
</h2>
<p>广州番禺职业技术学院（原名番禺理工学院、番禺职业技术学院）1993年筹建，1997年9月教育部正式批准备案，是全国首批、广州市属第一所公办全日制普通高等职业院校。2003年被广州市政府确定为市属高等职业教育龙头院校</p>
<address>
<p>
<span class="glyphicon glyphicon-home"></span>
地址:广东省广州市番禺区沙湾镇
</p>
<p>
<span class="glyphicon glyphicon-phone-alt"></span>
联系电话：028-123456
</p>
<p>
<span class="glyphicon glyphicon-envelope"></span>
邮箱:123456789@qq.com
</p>
</address>
</div>
<div class="col-md-6">
<form action="#" method="post">
<div class="col-md-6">
<input type="text" class="form-control" placeholder="您的姓名"/>
</div>
<div class="col-md-6">
<input type="email" class="form-control" placeholder="您的邮箱"/>
</div>
<div class="col-md-12">
<input type="text" class="form-control" placeholder="标题"/>
</div>
<div class="col-md-12">
<textarea class="form-control" placeholder="留言内容" rows="4"></textarea>
</div>
<div class="col-md-8">
<input type="submit" class="form-control" value="提交"/>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="container">
<div class="row">
<div class="col-md-12">
<p>
Copyright © 2012-2015 www.maiziedu.com 蜀ICP备13014270号-4
</p>
</div>
</div>
</div>
</footer>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script>
</body>
</html>
css
body{
font-family: 'Microsoft YaHei', sans-serif;
}
.navbar-default{
background-color: #fff;
border: none;
box-shadow: 0px 2px 8px 0px rgba(50,50,50,0.25);
}
.navbar-default .navbar-brand {
font-size: 30px;
font-weight: bold;
color: #40D2B1;
height: 70px;
line-height: 35px;
}
.navbar-default .navbar-nav>li>a {
font-size: 16px;
font-weight: bold;
color: #666;
height: 70px;
line-height: 35px;
}
.navbar-toggle{
margin-top: 17px;
}
.navbar-default .navbar-toggle:hover {
border-color: #40D2B1;
background-color:rgba(32, 216, 148, 0.7);
}
.navbar-default .navbar-toggle .icon-bar {
background-color: #1C9982;
}
/*home*/
#home{
margin-top: 70px;
background: url("../img/home-bg.jpg");
background-size: cover;
color: #ffffff;
text-align: center;
width: 100%;
}
.lvjing{
width: 100%;
height: 100%;
background: rgba(32, 216, 148, 0.7);
padding: 90px 0;
}
#home h1{
font-weight: bold;
margin-top: 0;
margin-bottom: 25px;
}
#home p{
font-weight: 400;
line-height: 35px;
}
#home img{
height:500px ;
margin-top: 30px;
display: inline-block;
}
#bbs{
padding: 80px 0;
text-align: center;
}
#bbs .col-md-4{
padding: 15px;
}
#bbs .col-md-4:hover{
background: #f1f1f1;
box-shadow: 1px 1px 4px #ccc;
}
#bbs a{
color: #212121;
text-decoration: none;
}
#bbs img{
margin: 0 auto;
}
#bbs h3{
font-weight: bold;
}
/*HTML5*/
#html5{
background: #f8f8f8;
padding: 80px 0;
}
#html5 h2{
font-weight: bold;
}
#html5 p{
line-height: 40px;
}
#bootrap {
padding: 80px 0;
}
#bootrap h2 {
font-weight: bold;
}
#bootrap P {
line-height: 40px;
}
#course {
background: #f8f8f8;
padding: 80px 0;
text-align: center;
}
#course h2 {
font-weight: bold;
padding-bottom:60px ;
}
#course .col-md-3{
margin-bottom: 20px;
}
.course {
background: #ffffff;
}
#course .btn{
background: transparent;
color:seagreen;
padding:8px 40px;
margin-top:20px ;
border-radius: 0px;
transition: all 0.3s;
margin-bottom:30px ;
border: 1px solid rgb(136, 227, 207);;
}
#course .btn:hover {
background-color:rgb(136, 227, 207); ;
color: #fff;
}
#app {
padding: 80px 0;
}
#app h2 {
font-weight: bold;
padding-bottom:30px ;
}
#app p {
padding-bottom:10px ;
}
#app #button {
width:150px;
background:rgb(136, 227, 207);
color: white;
}
#contact {
background:url(../img/学校.jpg) no-repeat;
background-size: cover;
color: white;
background-color: white;
height: 500px;
}
#contact h2{
font-weight: bold;
margin-top: 0;
margin-bottom: 25px;
}
#contact p{
line-height: 25px;
margin-bottom: 20px;
}
#contact .form-control {
border: none;
border-radius: 0;
height: 50px;
margin-bottom: 20px;
}
#contact textarea.form-control{
height: auto;
}
#contact input[type="submit"]{
background: #40D2B1;
color: #fff;
font-weight: bold;
transition: all 0.3s;
}
#contact input[type="submit"]:hover{
background: rgb(44, 142, 120);
}
footer{
height:400px ;
font-weight: 400;
text-align: center;
padding:20px
图片：
越努力越幸运
