第十篇、HTML5实战篇——1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<!--支持IE8的渲染模式-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--移动设备优先-->
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>我的开发</title> <link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/index.css"/>
</head>
<body>
<!--1.导航条
role="navgation" 指定角色是导航条
-->
<nav class="navbar navbar-default navbar-fixed-top " role="navgation">
<div class="container">
<!--1.1导航条的头部-->
<div class="navbar-header">
<!--navbar-toggle 表示屏幕小于768px出现，其他隐藏
collapse 容器是否显示,也是根据屏幕的分辨率
data-toggle="collapse" data-target=".navbar-collapse(类选择器)" 这是js中的东西
-->
<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 class="navbar-brand" href="#">
<img alt="Brand" src="...">
</a>-->
<a href="index.html" class="navbar-brand">我是LOGO</a>
</div> <!--导航-->
<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="#course">最新课程</a></li>
<li><a href="#app">移动APP</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</div>
<!--导航--> </div>
</div>
</nav> <!--注意：删除导航条锁定，内容的padding-top:50px设置才不会被导航条遮挡-->
<!--2.删格系统
container-fluid 全屏宽度
-->
<div class="container-fluid" style="padding-top:50px;">
<div class="row">
<div class="col-md-6">
<!--图片的响应式样式 width="100%" height="auto"-->
<img src="#" class="img-responsive"/>
</div>
<div class="col-md-6">第二个</div>
</div>
</div> <!--导入时要特别注意：一定要先导入jquery js 再导入 bootstrap的js-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js" ></script> <script>
$(function(){
/*小屏幕导航点击关闭菜单*/
$('.navbar-collapse a').click(function(){
$('.navbar-collapse').collapse('hide');
});
})
</script>
</body>
</html>
注意的问题：
去掉input阴影： outline:none;
img居中：<img src="img/logo2.png" class="img-responsive center-block" />
input: <input type="text" class="form-control"/>
按钮：
1.<a href="http://www.maiziedu.com" class="btn btn-primary" target="_blank" role="button">
加入学习
</a>
2. <button class="btn btn-primary">
<span class="glyphicon glyphicon-download-alt"></span> // 自带的文字图标
Android版
</button>
<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>
/*home*/
#home{
margin-top: 70px;
background: url("../images/home-bg.jpg");
background-size: cover;
color: #ffffff;
text-align: center;
width: %;
}
// 滤镜
.lvjing{
width: %;
height: %;
background: rgba(,,,0.7);
padding: 90px ;
}
第十篇、HTML5实战篇——1的更多相关文章
- 如何在Visual Studio 2017中使用C# 7+语法 构建NetCore应用框架之实战篇（二）：BitAdminCore框架定位及架构 构建NetCore应用框架之实战篇系列 构建NetCore应用框架之实战篇（一）：什么是框架，如何设计一个框架 NetCore入门篇：（十二）在IIS中部署Net Core程序
如何在Visual Studio 2017中使用C# 7+语法 前言 之前不知看过哪位前辈的博文有点印象C# 7控制台开始支持执行异步方法,然后闲来无事,搞着,搞着没搞出来,然后就写了这篇博文,不 ...
- Android为TV端助力 转载:Android绘图Canvas十八般武器之Shader详解及实战篇(上)
前言 Android中绘图离不开的就是Canvas了,Canvas是一个庞大的知识体系,有Java层的,也有jni层深入到Framework.Canvas有许多的知识内容,构建了一个武器库一般,所谓十 ...
- Android为TV端助力 转载：Android绘图Canvas十八般武器之Shader详解及实战篇(下)
LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思.线性渐变通俗来讲就是给起点设置一个颜色值如#faf84d,终点设置一个颜色值如#CC423C, ...
- 02_HTML5+CSS3详解第五、六天（实战篇之HTML5制作企业网站）
[废话连篇 - 实战篇,没什么好说的,最后一章兼容性问题懒得看了,over] Details 一.Xmind部分 xmind教程:http://www.jianshu.com/p/7c488d5e4b ...
- 构建NetCore应用框架之实战篇（二）：BitAdminCore框架定位及架构
本篇承接上篇内容,如果你不小心点击进来,建议重新从第一篇开始完整阅读. 构建NetCore应用框架之实战篇索引 一.BitAdminCore框架简介 从前篇论述我们知道,我们接下来将要去做一个管理系统 ...
- 2天驾驭DIV+CSS （实战篇）（转）
这是去年看到的一片文章,感觉在我的学习中,有不少的影响.于是把它分享给想很快了解css的兄弟们.本文是实战篇. 基础篇[知识一] “DIV+CSS” 的叫法是不准确的[知识二] “DIV+CSS” ...
- C# Xamarin移动开发项目实战篇
一.课程介绍 在前面阿笨的<C# Xamarin移动开发基础进修篇>课程中,大家已经熟悉和了解了Xamarin移动App开发的基础知识和原理.本次分享课<C# Xamarin移动开发 ...
- JS-正则表达式实战篇（Angel著）
JS-正则表达式实战篇(Angel著) 大家会看到我最新的系列博客都是spring boot怎么突然来了一个js的呢,而且这个貌似对大家而言好像很简单的嘛,所以在写之前我说说我写这一篇文章的初衷.公司 ...
- java并发系列 - 第28天：实战篇，微服务日志的伤痛，一并帮你解决掉
这是java高并发系列第28篇文章. 环境:jdk1.8. 本文内容 日志有什么用? 日志存在的痛点? 构建日志系统 日志有什么用? 系统出现故障的时候,可以通过日志信息快速定位问题,修复bug,恢复 ...
随机推荐
- nyoj 17 单调递增最长子序列
单调递增最长子序列 时间限制:3000 ms | 内存限制:65535 KB 难度:4 描述 求一个字符串的最长递增子序列的长度如:dabdbf最长递增子序列就是abdf,长度为4 输入 ...
- [OC Foundation框架 - 21] NSSet集合 & 集合之间的转换
A.NSSet 跟NSArray一样,不可变 NSArray 自然顺序 NSSet是无序的 NSSet不允许存入重复元素,可以用来过滤重复元素 也有可变的NSMutableSet B.集合转换 ...
- Struts2中DMI(动态方法调用)的错误问题(There is no Action mapped for namespace [/xxx] and action name [xxx!yyy] a)
默认的Struts.xml中是这样的 <constant name="struts.enable.DynamicMethodInvocation" value="f ...
- Packetbeat协议扩展开发教程（3）
原文链接:http://elasticsearch.cn/article/54 书接上回:http://elasticsearch.cn/article/53 前面介绍了Packetbeat的项目结构 ...
- CentOS6.5配置MySQL主从同步
原文地址:http://www.cnblogs.com/zhongshengzhen/ 修改主MySQL的配置 [root@localhost etc] vi /etc/my.cnf 添加以下配置 ...
- mysql之存储引擎
1.存储引擎概念 打比方说:一部电影有mp4,wmv,avi,flv...等格式.同样的一部电影在硬盘上有不同的存储格式,所占的空间与清晰程度也各不一样. 那么我们表里的数据存储在硬盘上,是如何存储的 ...
- 【翻译】Ext JS最新技巧——2014-5-12
原文:mkt_tok=3RkMMJWWfF9wsRoluazJZKXonjHpfsX77OQlXK%2B%2FlMI%2F0ER3fOvrPUfGjI4AT8NjI%2BSLDwEYGJlv6SgFS ...
- win8如何删除未知账户(s-1-5-21-2000478354-1390067357-725345543-1003）
今天突然发现从别处复制来的游戏压缩文件不能解压,并且以前把游戏文件都是放在该目录下的,以前局域网玩起游戏来老是不能作为主机,且不能下载局域网玩的RPG地图,以前就注意过这个未知账户(s-1-5-21- ...
- POJ3056：The Bavarian Beer Party(区间DP)
Description The professors of the Bayerische Mathematiker Verein have their annual party in the loca ...
- Bleed Brake Master Cylinder with Intelligent Tester IT2
When the brake fluid level drops too low in the master cylinder reservoir, air bubbles can get caugh ...