加减输入框 """ 1.创建固定像素边框用inline-block不占整行，随文本多少变化 2.创建加和减号，有固定高和宽，包含内文本框，文本必须在中间 3.创建input输入框，放在加减之内，用高撑满加减内框 """ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .inp{ border: 0; border-left: 1px solid #dddddd; border-right: 1px solid #dddddd; height: 25px; margin: 0; padding: 0; float: left; } .sp{ display: inline-block; height: 25px; 25px; text-align: center; line-height: 25px; float: left; } </style> </head> <body> <div style="border: 1px solid #dddddd;display: inline-block;"> <div class="sp">-</div> <input class="inp" type="text" /> <div class="sp">+</div> </div> </body> </html> alt没有图片显示文字 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> img{ border: 0; } </style> </head> <body> <div> <div class="item"> <a href="http://www.etiantian.org"> <!--alt没有图片显示文字--> <img src="2.jp" alt="图片"> </a> </div> </div> </body> </html> 默认勾选，默认多勾选 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input value="123"/> <textarea>123</textarea> <select> <!--默认勾选selected--> <option>上海</option> <option selected="selected">广州</option> <option>北京</option> </select> <!--radio的name名相同为互斥,只能选其一--> <!--多个默认勾选--> 男:<input type="radio" name="g1"/> 女:<input type="radio" name="g1" checked="checked"/> <input type="checkbox" name="c1" checked="checked"/> <input type="checkbox" name="c1"/> <input type="checkbox" name="c1" checked="checked"/> <input type="checkbox" name="c1"/> </body> </html> !important的样式标签最优先 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .hide{ display: none !important; } .c1{ color: red !important; } .c2{ color: green; } </style> </head> <body> <!--标签选择器谁在后谁优先高，所以会是显示C2绿色，但使用了!important的样式标签最优先--> <div class="c1 c2">asdfasdfasdfasdf</div> </body> </html> 定义样式变量,调用时可按需应用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*定义样式变量,调用时可按需应用*/ .c1[alex='a']{ color: red; } </style> </head> <body> <div> <div class="c1" alex="a">1</div> <div class="c1" alex="b">2</div> <div class="c1">3</div> <div class="c1" alex="a">4</div> </div> </body> </html> margin: 0 auto居中,按宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--margin: 0 auto居中,按宽度--> <div class="pg-body" style=" 980px;margin: 0 auto;"> <div style=" 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div> <div style=" 80%;float: left;background-color: #2459a2"> sdfsdfasdfasdfsdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdf </div> </div> </body> </html> 定义页眉和页体，不重合布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> /*页眉*/ .pg-header{ position: fixed; top: 0; left: 0; right: 0; height: 48px; background-color: #2459a2; } /*页主体*/ .pg-body{ height: 2000px; /*距顶部48像素，目的是不和页眉重合*/ margin-top: 48px; } </style> </head> <body> <div class="pg-header">asdf</div> <div class="pg-body">老男孩</div> </body> </html> CSS样式before和after前后显示内容 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> .c1:hover{ background-color: #2459a2; } /*before选择器可以在调用时预先显示值*/ .c2:before{ content: '666'; } /*after选择器可以在调用事后显示值*/ .c2:after { content: '777'; } .left{ float: left; } .item{ background-color: red; } .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; } </style> </head> <body> <div class="c1">ddd</div> <div class="c2">888</div> <div style="background-color: red" class="clearfix"> <div class="left" style="height: 100px;background-color: green">1</div> <div class="left">2</div> </div> </body> </html> fontawesome 图标 清除浮动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .left{ float: left; } .clearfix:after{ content: '.'; clear: both; display: block; visibility: hidden; height: 0; } </style> </head> <body> <div style="background-color:red" class="clearfix"> <div class="left" style="height: 100px; background-color: green">1</div> <div class="left">2</div> </div> </body> </html> 小三角 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .icon{ display: inline-block; /*透明*/ border-top: 15px solid transparent; border-right: 15px solid red; border-bottom: 15px solid transparent; border-left: 15px solid transparent; } </style> </head> <body> <div class="icon"></div> </body> </html> http://www.cnblogs.com/wupeiqi/tag/python之路/ javascript 一门语言，javascript代码浏览器识别处理 一、编写 1.使用形式 文件调用 <script type"text/javascript" src="JS文件"></script> html直接使用 <script type"text/javascript"> Js代码内容 </script> 2.代码使用位置 html的head头 html的body代码底部（推荐） 3.变量 (1) var 开头为局部 var name=”shopping”; (2) 直接定义为全局 name=22; (3)例子 var name=”shopping”; //js引擎知道name是字符串 name=22; //这时name自动变成了数 var kk=2; //kk是整数 vary y; //y是undefined类型 4.数据类型 原始类型 数字 NaN,infinity,isNan(),isFinite() 字符串 布尔值 true和false 对象类型 数组 “字典” 特别的，数字、布尔值、null、undefined、字符串是不可变。 5.函数 为完成某一功能代码的集合 function 函数名(参数列表){ 语句;//函数(方法)主体 return 返回值; } 在javascript中用分号表示一个语句的结束 1. javascript基本介绍： 实现网页动态效果的基石，在web的开发中扮演重要的角色，被广泛的应用到各个领域： 1网页游戏 2地图搜索 3股市信息查询 4web聊天 2.代码格式 <script language=”javascript”> js代码 </script> 页面背景色为红色 <html> <head> <title></title> </head> <body bgcolor="white"> <script type="text/javascript"> document.bgColor="red";</script> </body> </html> 弹出框 alert弹框(或window.alert) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>第一个javascript程序</title> </head> <body bgcolor="white"> <script type="text/javascript"> alert('hello world'); </script> </body> </html> 变量分类 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script type="text/javascript"> // 全局变量 name = 'seven'; function func(){ // 局部变量 var age = 18; // 全局变量 gender = "男" } window.alert(name) </script> </body> </html> 变量及加法运算 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> //js中的变量定义，变量都用var表示，不管实际类型怎样 var num1=456; var num2=226; var result=num1+num2; window.alert("结果"+result); </script> </body> </html> 运算符操作 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script language="javascript"> var a=9; var b='9'; if(a==b){ window.alert('ok'); }else{ window.alert('faile'); } </script> </body> </html> (2) 在逻辑运算中，0、""、false、null、undefined、NaN均表示false <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script language="javascript"> var a=0; if(a){ window.alert("ok"); }else{ window.alert("faile"); } </script> </body> </html> JS，alert弹框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> function f1() { // var i = 123; /* i = 123; fkdsjfkdsaf */ i = 123; } function f2() { } f1() alert(i); </script> </body> </html> 滚动横幅 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1" style="display: inline-block;background-color: red;color: white">欢迎宝强莅临指导</div> <div id="i2" style="display: inline-block;background-color: red;color: white">欢迎宝强莅临指导</div> <script> setInterval("f1()",1000); function f1() { // js 获取某一个标签 id=i1 var tag = document.getElementById('i1'); // 获取标签的内容 var text = tag.innerText; var a = text.charAt(0); var sub = text.substring(1,text.length); var new_str = sub + a; tag.innerText = new_str; } </script> </body> </html> JS函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // 普通函数 function func(arg) { return true; } // 匿名函数 var func1 = function(arg){ return "tony"; }; // 自执行函数 (function(arg){ console.log(arg); })('123'); func('xxcx') func1 </script> </body> </html> 循环语句 方式一 <script type="text/javascript"> var names = ["alex", "tony", "rain"]; for(var i=0;i<names.length;i++){ console.log(i); console.log(names[i]); } // for(var l=0;l<names.length;l++){ // alert(i); // alert(names[i]); // } </script> 方式二 <script type="text/javascript"> var names = ["alex", "tony", "rain"]; for(var index in names){ console.log(index); console.log(names[index]); } </script> ----结果 F12 console模式查看 0 alex 1 tony 2 rain 方式三，不做演示 while(条件){ // break; // continue; } 作用域 <script type="text/javascript"> function f2(){ var arg= 111; function f3(){ console.log(arg); } return f3; } ret = f2(); ret(); </script> ----结果 111 <script type="text/javascript"> function f2(){ var arg= [11,22]; function f3(){ console.log(arg); } arg = [44,55]; return f3; } ret = f2(); ret(); </script> ------结果 [44, 55] 闭包 是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分 示例，内部变量无法调用：由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。 function f2(){ var arg= [11,22]; function f3(){ return arg; } return f3; } ret = f2(); ret(); 面向对像，类 <script type="text/javascript"> function Foo (name,age) { this.Name = name; this.Age = age; this.Func = function(arg){ return this.Name + arg + this.Age; } } var obj = new Foo('alex', 18); var ret = obj.Func("sb"); console.log(ret); </script> -----结果 alexsb18 对于上述代码需要注意： Foo充当的构造函数 this代指对象 创建对象时需要使用 new 上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题： function Foo (name,age) { this.Name = name; this.Age = age; } Foo.prototype = { GetInfo: function(){ return this.Name + this.Age }, Func : function(arg){ return this.Name + arg; } } 后台管理系统布局 1.头部：高48像素和对应颜色 2.左菜单：距顶部48像素，宽200像素，对应颜色 3.内容：距顶部48像素，左侧210或200像素，对应的颜色 方式一：头部和左边栏不随滚动条移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg-header{ height: 48px; background-color: #2459a2; } .pg-body .body-menu{ position: absolute; top: 48px; left: 0; bottom: 0; 200px; background-color: red; } .pg-body .body-content{ position: absolute; top: 48px; left: 210px; right: 0; /*bottom: 0;*/ background-color: green; /*overflow: auto; */ } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> adsfksafsafsa<br/> ajfdksafafsafda<br/>jfkdsaf<br/>jfdksajfa<br/> adsfksafsafsa<br/> </div> </div> <div class="pg-footer"></div> </body> </html> 方式二：头部和左边栏随滚动条移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body{ margin: 0; } .pg-header{ height: 48px; background-color: #2459a2; } .pg-body .body-menu{ position: absolute; top: 48px; left: 0; bottom: 0; 200px; background-color: red; } .pg-body .body-content{ position: absolute; top: 48px; left: 210px; right: 0; bottom: 0; background-color: green; overflow: auto; } </style> </head> <body> <div class="pg-header"></div> <div class="pg-body"> <div class="body-menu"></div> <div class="body-content"> adsfksafsafsa<br/> ajfdksafafsafda<br/>jfkdsaf<br/>jfdksajfa<br/> adsfksafsafsa<br/> </div> </div> <div class="pg-footer"></div> </body> </html>