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就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...
随机推荐
- substr()、substring()、slice()
substr(start,length) start(必选)开始位置的下标 可为负数-1即为倒数第一个字符以此类推 0为第一个字母下标 length长度(可选)如果省略该参数则默认到最后一位 var ...
- 指针使用const修饰总结
1 double rates[5] = {1, 2, 3, 4, 5}; const double * pd = rates; 被pd指向的值不可改变,比如,不允许*pd = 20 但是pd的指向改变 ...
- 【leetcode】623. Add One Row to Tree
题目如下: Given the root of a binary tree, then value v and depth d, you need to add a row of nodes with ...
- boost datetime
To create a date, use the class boost::gregorian::date 1. date #include <boost/date_time/gregoria ...
- springBoot01-helloworld-完成一个简单的RESTful API
1.访问http://start.spring.io/ 2.选择构建工具Maven Project.Spring Boot版本 2.0.1,以及一些工程基本信息 ,最后点击Generate Proje ...
- 重新调整动态vhdx占用的空间
优化vhd:https://docs.microsoft.com/en-us/powershell/module/hyper-v/optimize-vhd?view=win10-ps 1. 弹出vhd ...
- 早日选择一门自己喜欢的，然后瞄准目标，不达目的誓不罢休。像文章的作者一样成为一名成功的IT人士。
hawk的奋斗历程. 来自:LinuxForum :http://www3.linuxforum.net/ 原址:http://www.linuxforum.net/forum/gshowflat. ...
- paper 153：Delaunay三角剖分算法--get 这个小技术吧！
直接摘自百度百科,希望大家能根据下面的介绍稍微理顺思路,按需使用,加油! 解释一下:点集的三角剖分(Triangulation),对数值分析(比如有限元分析)以及图形学来说,都是极为重要的一项预处理技 ...
- 踩坑记之字体图标在webpack中
首先介绍一个还不错的字体图标库: font-awesome 是在发现bootstrap在npm下载后没有font包以后重新找的字体库,内容还挺丰富的,好像还有动态图,感兴趣的可以看一下 我的环境是we ...
- Windows-Windows下使用Linux系统（WSL）
Install Windows Subsystem for Linux (WSL) on on Windows 10 | Microsoft Docs WSL(Windows Subsystem fo ...