第十篇、HTML5实战篇—

<!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,恢复 ...

随机推荐

windows 一个进程可以允许最大的线程数
默认情况下,一个线程的栈要预留1M的内存空间而一个进程中可用的内存空间只有2G,所以理论上一个进程中最多可以开2048个线程但是内存当然不可能完全拿来作线程的栈,所以实际数目要比这个值要小. 你也 ...
[OC Foundation框架 - 9] NSMutableArray
可变的NSArray,可以随意添加OC对象 1.创建 void arrayCreate() { NSMutableArray *array = [NSMutableArray arrayWithO ...
python os.path模块--转载
os.path.abspath(path) #返回绝对路径 os.path.basename(path) #返回文件名 os.path.commonprefix(list) #返回list(多个路径) ...
【3D研发笔记】之【数学相关】（一）：坐标系
现在开始学习3D基础相关的知识,本系列的数学相关笔记是基于阅读书籍<3D数学基础:图形与游戏开发>而来,实现代码使用AS3,项目地址是:https://github.com/hammerc ...
Linux时间同步方式记录
Linux时间同步部署Hadoop集群,遇到各个linux服务器的时间不同步的问题,于是研究了一下linux的时间同步方式,特将同步方式,总结如下: A. 前提条件 a) 网络是连通 ...
linux下Memcached安装以及PHP的调用
一:安装libevent 由于memcached安装时,需要使用libevent类库,所以先安装libevent 1.官网下载:http://libevent.org/ #wget https:/ ...
iOS8 CLLocationManager 、CLGeocoder获取地理位置
最近在ios8.0使用CLLocationManager定位服务,发现老不能定位,查看设置菜单中的项也是处于未知状态.想起之前都有一个弹出框提示用户是否允许定位,这次一直没有出现了.原来ios8.0下 ...
USB移动硬盘WinPE启动盘的制作方法
USB移动硬盘WinPE启动盘的制作方法软件:老九WinPE 老毛桃终于撒手无论版发行时间:2007年9月11日制作发行:老毛桃作用:当系统坏了,无法进入时,用来做系统维护,备份文件.轻巧稳定 ...
【转】如何在vmware中如何设置ip
如何在vmware中如何设置ip 1.修改网络接口选hostonly2.虚拟机里安装vmware-tool,对鼠标和图形进行更好地支持.如果你在图形界面下,首先要切换到文本模式.右键点击桌面,打开一个 ...
离线安装Cloudera Manager5.3.4与CDH5.3.4（二）
Cloudera Manager Server和Agent所有后发先至.也能够进行CDH5的安装和配置. 然后,主节点可以通过浏览器访问7180port测试(因为CM Server需要花时间来启动,可 ...

第十篇、HTML5实战篇——1

第十篇、HTML5实战篇——1的更多相关文章

随机推荐

热门专题