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
图片：
Bootstrap 网页2的更多相关文章
- ajax 实现加载页面、删除、查看详细信息，以及bootstrap网页的美化
由于有些的程序员可能不是很会Photoshop,所以为了美化页面,我们可以借助工具bootstrap,实现起来相对就要比之前做的美观一些, 今天我用bootstrap把之前做的显示表格进行了一下美 ...
- Bootstrap 网页乱码
问题:今天早上在实践bootstrap的时候,用EditPlus写代码,标签中包含了中文.在浏览器解析的时候中文部分生成的乱码.但是网页部分已经声明了使用utf-8的编码方式. 解决:网页字体正常显示 ...
- Bootstrap 网页实例
代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <met ...
- Bootstrap 网页1
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 《深入理解bootstrap》读书笔记：第三章 CSS布局
一. 概述一下理念 bootstrap基于H5开发.提倡移动先行(媒询声明是必须的),对浏览器支持面不是很广. 响应式图片:max-width:100% height:auto; 可以加上:.img- ...
- bootstrap首页制作
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...
- bootstrap导航条
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>我的 ...
- Bootstrap 框架、插件
Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自 ...
- 如何使用bootstrap框架
Bootstrap是前端工程师比较常用的框架.插件,根据它的定义,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...
随机推荐
- javascript 回到顶部效果的实现
demo.js window.onload=function() { var timer=null; var obtn=document.getElementById('btn'); var isTo ...
- Python 无法安装PyAudio问题
一.错误与原因 在Windows上没有用于Python 3.7的轮子(预构建包)(有一个用于Python 2.7和3.4到3.6),因此需要在PC上准备构建环境以使用此包.因为有些软件包很难在Wind ...
- springBoot相关（二）
Spring Boot 三大特性: 组件自动装配:Web MVC .Web Flux .JDBC等 嵌入式Web容器:Tomcat.Jetty以及Undertow 生产准备特性:指标.健康检查.外部化 ...
- boost exception
boost exception provides a new exception type, that lets you add data to an exception after it has b ...
- Java的Object几个重写的方法
1:toString(); 只是简单的列出对象的状态(也就是重要的实例变量的当前值). package jicheng;public class Animal { public static void ...
- UIStakView的添加与移除
subView和arrangedSubView对于Stack View的子控件添加和移除,我们是这样描述的. 添加-->(Stack View管理的subview) addArrangedSub ...
- [CSP-S模拟测试]:mine（DP）
题目描述 有一个$1$维的扫雷游戏,每个格子用$*$表示有雷,用$0/1/2$表示无雷并且相邻格子中有$0/1/2$个雷.给定一个仅包含$?$.$*$.$0$.$1$.$2$的字符串$s$,问有多少种 ...
- python中split（）函数的用法
函数:split() Python中有split()和os.path.split()两个函数,具体作用如下:split():拆分字符串.通过指定分隔符对字符串进行切片,并返回分割后的字符串列表(lis ...
- C# 后台报错输出到日志
1.C# 方法 /// <summary> /// 异常处理 /// </summary> /// <returns></returns> public ...
- yii之relations关联非主键
yii的relations里self::BELONGS_TO默认是用当前指定的键跟关联表的主键进行join,例如: return array('reply' => array(self::BEL ...