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就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...
随机推荐
- 学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密
学习加密(四)spring boot 使用RSA+AES混合加密,前后端传递参数加解密 技术标签: RSA AES RSA AES 混合加密 整合 前言: 为了提高安全性采用了RS ...
- 调试web worker （动态生成的worker）
1.在worker.js源码文件中 写下debugger关键词 2. F12打开控制台,重新刷新页面,加载worker.js文件(注意之前的缓存,chrome推荐使用 ctrl + F5 刷新) 3. ...
- eval函数让我忧伤
今天首次接触这个eval函数,让我忧伤了一把.我把当成字符串拼接,结果错得天远地远.大体情况是下面这句代码,一个劲的给我报NameError: name 'qinfeng' is not define ...
- SQL查看所有表的大小
--查看所有表的大小 declare @id int ) declare @pages int declare @dbname sysname ,) ,) ,) create table #spt_s ...
- php strnatcmp()函数 语法
php strnatcmp()函数 语法 作用:自然顺序法比较字符串直线往复电机 语法:strnatcmp(string1,string2) 参数: 参数 描述 string1 必须,规定要比较的第一 ...
- php max()函数 语法
php max()函数 语法 作用:从所有参数中找到最大数 语法:max(X,Y,Z) 或者max(array(X,Y,Z)) 参数:max函数中参数至少一个,可以多个参数,也可以是数组. 说明:如果 ...
- 2019 牛客暑期多校 第二场 H Second Large Rectangle (单调栈）
题目:https://ac.nowcoder.com/acm/contest/882/H 题意:一个大的01矩阵,然后现在要求第二大的全一矩阵是多少 思路:在这里我们首先学习一下另一个东西,怎么求直方 ...
- Oil Deposits（ hdu1241
http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82828#problem/L Oil Deposits Time Limit:1000MS ...
- iOS图片压缩问题
对于压缩的处理我给出的建议是 先判断 图片的大小,如果是本地图片最好用nsfilemanager 来判断 .如果不能用这个判断的话 就只能先将图片转成data,然后再判断了. 图片转成data 当然就 ...
- git配置密钥（私钥、ssh、公钥）
参照: https://blog.csdn.net/weixin_42063071/article/details/80999690 经常帮人配置git的私钥,来总结一下简单的流程真心希望对大家有所帮 ...