冬季小学期 澄迈NIIT公司 web前端培训 JQuery&Bootstrap
bootcss 响应式布局。
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
http://www.runoob.com/bootstrap/bootstrap-grid-system.html
<!DOCTYPE html> <html> <head> <meta charest="utf-8" > <title>jquery</title> <script src="jquery-1.12.0.min.js"></script> <script> /*$(selector).action()*/ // 页面加载后执行 // event click dblclick focus mouseover $(document).ready(function(){ $("button").click(function(){ // $("#p1").hide(200); 单位ms 200ms内消失 // $("#p1").show(); // $("#p1").toggle(speed,callback);toggle()方法完后callback 函数 $("#p2").toggle(200); }); $("#btn1").click(function(){ // (speed,callback); // $("#p1").fadeIn(); // $("#p1").fadeOut(); // $("#p1").fadeToggle(); // (speed,opacity,callback); opacity 不透明度（值介于 0 与 1 之间） $("#p2").fadeTo(200,0.4); }); $("#btn2").click(function(){ // $("#p2").slideDown(); // $("#p2").slideUp(); $("#p2").slideToggle(); }); $("#btn3").click(function(){ /* var div=$("div"); 使用队列功能 div.animate({height:'300px',opacity:'0.4'},"slow"); */ $("#p2").animate({ // left:'100px' width:'250px', opacity:'0.5', height:'+=150px',/*相对于元素的当前值*/ fontSize:'3em' },2000 ); }); $("#btn4").click(function(){ $("#p2").text("enen"); $("#p2").html("enen");/*所选元素的内容（包括 HTML 标记）*/ $("#p2").val("enen");/*表单字段的值*/ $("#p2").attr("id"); $("#p2").append("id");/*被选元素的结尾插入内容*/ $("#p2").prepend("id");/*被选元素的开头插入内容*/ $("#p2").after("id");/*被选元素之后插入内容*/ $("#p2").before("id");/*被选元素之前插入内容*/ $("#p2").remove();/*删除被选元素及其子元素*/ $("#p2").empty();/*被选元素的子元素*/ }); $("#btn5").click(function(){ $("#p2").css("background-color","red"); }); $("#btn6").click(function(){ $("#p2").addClass("class1"); $("#p2").toggleClass("class1"); }); $("#btn7").click(function(){ $("#p2").removeClass("class1"); }); $("#p1").mouseover(function(){ $("#p2").animate({ // left:'100px' width:'250px', opacity:'0.5', height:'+=150px',/*相对于元素的当前值*/ fontSize:'3em' },2000 ); }); }); </script> <style type="text/css"> .class1{ text-decoration: underline; font-family: "微软雅黑"; font-size: 20px; color: red; } p{ width: 100px; height: 100px; background-color: green; color: white; text-align: center; } </style> </head> <body> <p id="p1">p1</p> <button type="button">隐藏</button> <input id="btn1" type="button" value="淡入淡出" /> <input id="btn2" type="button" value="滑动" /> <input id="btn3" type="button" value="动画" /> <input id="btn4" type="button" value="改变html元素内容" /> <input id="btn5" type="button" value="改变css样式" /> <input id="btn6" type="button" value="添加类" /> <input id="btn7" type="button" value="删除类" /> <input id="btn8" type="button" value="" /> <p id="p2">p2</p> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> </head> <!-- 新 Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="3.3.5/css/bootstrap.min.css"> <!-- 可选的Bootstrap主题文件（一般不用引入） --> <link rel="stylesheet" href="3.3.5/css/bootstrap-theme.min.css"> <!-- jQuery文件。务必在bootstrap.min.js 之前引入 --> <script src="3.3.5/js/jquery-1.11.3.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 文件 --> <script src="3.3.5/js/bootstrap.min.js"></script> <style type="text/css"> .annaStyle{ text-decoration: underline; margin: 30px; } .row div{ margin-bottom: 10px; } </style> <body> <h1></h1> <p>p</p> <input class="btn btn-lg btn-danger annaStyle" type="button" value="download"> <img src="images/img1.png" class="img-circle"> <br> <div class="container" style="text-align:center;"> <div class="row"> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img1.png"></div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img2.png"></div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img3.png"></div> <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12"><img class="img-thumbnail" src="images/img4.png"></div> </div> <div class="row"> <div class="col-md-8">.col-md-8</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> <div class="col-md-4">.col-md-4</div> </div> <div class="row"> <div class="col-md-6">.col-md-6</div> <div class="col-md-6">.col-md-6</div> </div> </div> </body> </html>
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> div{ width: 100px; height: 100px; background-color: green; color: white; text-align: center; margin: 30px; } #div1{ height: 50px; border-radius: 25px; } #div2{ /*x轴偏移量 y轴偏移量 模糊距离*/ box-shadow: 10px 10px 5px #888888; } #div3{ background-color: red; transform: rotate(-30deg);/*正数顺时针 变形 旋转 deg-degree */ } #div4{ background-color: yellow; transform:translate(50px,50px); } #h1{ text-shadow: #f00 5px 5px 5px; } #div5{ background-color: #0CF; transition:width 1s,height 1s,background-color 1s;/*过渡*/ } #div5:hover{ width: 250px; height: 250px; background-color: red; } #div6{ transition: border-radius 1s,transform 1s; } #div6:hover{ border-radius: 30px; transform:rotate(720deg); } </style> </head> <body> <h1 id="h1">h1</h1> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> <div id="div5">div5</div> <div id="div6">div6</div> </body> </html>
<!DOCTYPE html> <html> <head> <title>HTML5</title> <script type="text/javascript"> function changeColor(){ var color=document.getElementById("colorBox").value; document.bgColor=color } </script> </head> <body> <audio src="resources/music5.mp3" controls="controls"> Your browser does not support the audio element.</audio> <br> <video src="resources/梦娃公益广告之中国梦.mp4" controls="controls">Your browser does not support the video tag. </video> <br> 选择页面的背景颜色:<input id="colorBox" type="color" value="#ddeeff" onchange="changeColor()" > 请选择出生日期<input type="date" /> </audio> </body> </html>
