第十篇、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: 100%; } // 滤镜 .lvjing{ width: 100%; height: 100%; background: rgba(0,0,0,0.7); padding: 90px 0; }
