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就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...
随机推荐
- FreeBSD虚拟机——小折腾
最近,突然想起来Linux了,因为前段时间接触了DOS命令,提高了自己的工作效率,这会想再温习下Linux的CLI,无奈windows下unix命令,水土不服,因此想尝试虚拟机,虚拟机软件无非vmwa ...
- CPU性能优化
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11521331.html CPU性能指标 根据指标找工具 根据工具查指标 top.vmstat 和 pi ...
- 51nod 1298:圆与三角形（计算几何）
题目链接 判断圆和三角形是否相交 可以转化为 判断三条线段是否和圆相交 #include<iostream> #include<cstdio> #include< ...
- 【KeepAlive】Http--Keep-Alive及Tcp--Keepalive
Keep-Alive模式: Http协议采用“请求-应答”模式,当使用普通模式,即非Keep-Alive模式时,每个请求/应答,客户端和服务器都要新建一个连接,完成之后立即断开连接:当使用Keep-A ...
- DELPHI FMX IOS模拟器调试时出现No SDKs could be found
解决办法: 在OSX里打开XCODE,点击XCODE菜单->Perferences->Locations在Commond Line Tools选择XCODE
- JS中的立即执行函数
JS 立即执行函数可以让函数在创建后立即执行,这种模式本质上就是函数表达式(命名的或者匿名的),在创建后立即执行. 1.立即执行函数的写法 立即执行函数通常有下面两种写法: //第一种写法 (func ...
- node连接mysql数据库
1. 创建项目,安装mysql 创建项目文件夹test, 在test文件夹下yarn add mysql --save安装mysql: 2. node使用mysql 在test文件夹下,创建test. ...
- 【2019 Multi-University Training Contest 4】
01:https://www.cnblogs.com/myx12345/p/11644076.html 02: 03:https://www.cnblogs.com/myx12345/p/116478 ...
- 9.26-mkdir，tree，touch命令
mkdir -- 创建文件 [root@wen data]# mkdir --help 用法:mkdir [选项]... 目录... 若指定目录不存在则创建目录. 长选项必须使用的参数对于短选项时也是 ...
- excel 中相乘函数
excel 中相乘函数 “PRODUCT”并且是公式的框框,格式要是 常规,不能是文本