css样式与JavaScript
css样式
避免页面大小不同导到样式被改变
页面最外层：像素的宽度 ===> 最外层设置绝对宽度
<body>
<div class="pg-header"></div>
<div style="width: 980px;">
头部数据
</div>
<div class="pg-body">
<div style="width: 980px;">
中间内容
</div>
</div>
<div class="pg-footer">
<div style="width: 980px;">
底部菜单
</div>
</div>
</body>
默认img标签有1px的边框（去掉边框的方法）
1 <style> 2 img{ 3 border: 0; 4 } 5 </style>
form标签
1 <form action="http://baidu.com"method="GET" enctype="multipart/form-data"></form> 2 3 - action="http://baidu.com" # 后台数据提交到什么地方 4 - method="GET" # 请求方法 5 - enctype="multipart/form-data" # 上传文件到后台，不设置上传的文件无法到后台
postition：可以使模块分层
1 fixed: 固定在页面的某个位置 2 - top 3 - buttom 4 - left 5 - right 6 7 <div style="width:70px; height:30px; 8 background-color: black; color: red; 9 position: fixed; 10 bottom: 20px; 11 right: 20px; 12 ">返回顶部</div> 13 14 /* 菜单一直在页面上方 */ 15 .pg-header{ 16 background-color: black; 17 position: fixed; 18 color: #DDDDDD; 19 top: 0; 20 left: 0; 21 right: 0; 22 } 23 24 relative + absolute: 组合使用，做一个相对定位，定位在父亲框中 25 <div style='postition: relative;'> 26 <div style='position: absolute; top:0; left:0;'></div> 27 </div> 28 29 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;"> 30 <div style="position: absolute; left: 0;bottom: 0;width: 50px;height: 50px; background-color: black"></div> 31 </div> 32 33 34 opcity： 透明度（0-1，1为完全看不见） 35 z-index: 层级顺序，谁的值大谁在上面 36 37 <body> 38 <div style="z-index: 10; position: fixed; 39 top: 50%; 40 left: 50%; 41 background-color: #FFFFFF; 42 width: 500px; 43 height: 400px; 44 margin-left: -250px; 45 margin-top: -200px; 46 "></div> 47 48 <div style="z-index: 9; position: fixed; background-color: black; 49 top: 0; 50 bottom: 0; 51 right: 0; 52 left: 0; 53 opacity: 0.2; 54 "></div> 55 56 <div style="height: 5000px; background-color: green">文本内容。。。</div> 57 </body>
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 img{ 7 border: 0; 8 } 9 10 .pg-header{ 11 background-color: black; 12 position: fixed; 13 color: #DDDDDD; 14 top: 0; 15 left: 0; 16 right: 0; 17 } 18 </style> 19 20 </head> 21 <body> 22 23 <div class="pg-header">头部</div> 24 25 <div style="width:70px; height:30px; 26 background-color: black; color: red; 27 position: fixed; 28 bottom: 20px; 29 right: 20px; 30 ">返回顶部</div> 31 32 <div style="height: 500px; background-color: #DDDDDD; margin-top: 30px">内容</div> 33 34 35 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;"> 36 <div style="position: absolute; left: 0;bottom: 0;width: 50px;height: 50px; background-color: black"></div> 37 </div> 38 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto"> 39 <div style="position: absolute;right: 0;bottom: 0;width: 50px;height: 50px; background-color: black;"></div> 40 </div> 41 <div style="position: relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto"> 42 <div style="position: absolute;right: 0;top: 0;width: 50px;height: 50px; background-color: black;"></div> 43 </div> 44 45 </body>
overflow： 防止内容过大，撑开外层定义的大小
- auto 是出现下拉框 - hidden 出现隐藏超过的内容 <div style="width: 200px;height: 150px; overflow: auto"> <img src="vivo.jpg"> </div>
hover: 当鼠标点到当前位置时样式才应用
1 <head> 2 <meta charset="UTF-8"> 3 <title>Title</title> 4 5 <style> 6 .pg-header{ 7 position: fixed; 8 right: 0; 9 left: 0; 10 top: 0; 11 height: 48px; 12 background-color: #2459a2; 13 line-height: 48px; 14 } 15 16 .pg-body{ 17 margin-top: 50px; 18 } 19 20 .w{ 21 width: 980px; 22 margin: 0 auto; 23 } 24 25 .pg-header .memu{ 26 display: inline-block; 27 padding: 0 10px; 28 color: white; 29 } 30 /*当鼠标移动到当前标签上时,以下css属性才生效*/ 31 .pg-header .memu:hover{ 32 background-color: blue; 33 } 34 35 </style> 36 </head> 37 <body> 38 39 <div class="pg-header"> 40 <div class="w"> 41 <a class="logo">LOGO</a> 42 <a class="memu">笑话</a> 43 <a class="memu">技术文档</a> 44 <a class="memu">视频</a> 45 <a class="memu">小说</a> 46 </div> 47 </div> 48 49 <div class="pg-body"> 50 <div class="w">ffff</div> 51 </div> 52 </body>
backgroup参数
background-image: url('image/4.gif; height: 40px') # 默认div多大，图片重复多大
background-repeat: repeat-y; (repeat-y: y轴重复，no-repeat不重复，repeat-x：x轴重复)
background-postition-x: x轴方向移动
background-position-y: y轴方向移动
background-position: 10px 10px (x轴方向移动10px,y轴方向移动10px)
background: 后面接不参数也可以实现同样效果
<div style='background-image: url("vivo.jpg");height: 600px;
background-repeat: repeat-y;background-position-x: 200px;
background-position-y: 80px;'></div>
登录框后面嵌图片：
<div style="height: 35px; width: 400px; position: relative">
<input type="text" style="height: 35px; width: 360px; padding-right: 40px;" />
<span style="position: absolute;top: 5px;right: 6px; background-image: url(logo.jpg); width: 30px; height: 30px; display: inline-block;"></span>
</div>
实现菜单不动，内容移动的功能：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 body{ 9 margin: 0; 10 } 11 .left{ 12 float: left; 13 } 14 .right{ 15 float: right; 16 } 17 18 .pg-header{ 19 height: 40px; 20 background: #ddd; 21 } 22 23 .pg-content .menu{ 24 width: 20%; 25 background: red; 26 min-width: 200px; 27 /*position: fixed;*/ 28 position: absolute; 29 left: 0; 30 top: 40px; 31 bottom: 0; 32 } 33 34 .pg-content .content{ 35 width: 80%; 36 min-width: 800px; /*最小宽度*/ 37 background: purple; 38 /*position: fixed;*/ 39 position: absolute; 40 top: 40px; 41 left: 200px; 42 bottom: 0; 43 right: 0; 44 overflow: auto; 45 } 46 47 </style> 48 49 </head> 50 <body> 51 52 <div class="pg-header"></div> 53 54 <div class="pg-content"> 55 <div class="menu left"></div> 56 <div class="content left"> 57 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 58 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 59 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 60 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 61 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 62 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 63 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 64 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 65 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 66 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 67 68 </div> 69 </div> 70 71 <div class="pg-footer"></div> 72 73 </body> 74 </html>
固定首页加载小图标(下载地址：http://www.fontawesome.com.cn/)：
<link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 线上采用这种压缩
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css"> 7 8 <style> 9 body{ 10 margin: 0; 11 } 12 .left{ 13 float: left; 14 } 15 .right{ 16 float: right; 17 } 18 19 .pg-header{ 20 height: 40px; 21 background: #ddd; 22 line-height: 40px; 23 text-align: center; 24 } 25 26 .pg-header .icon{ 27 padding-left: 20px; 28 line-height: 40px; 29 } 30 31 .pg-header .a{ 32 /*width: 200px;*/ 33 height: 40px; 34 display: block; 35 margin-right: 60px; 36 background: greenyellow; 37 position: relative; 38 padding: 0 20px; 39 } 40 41 .pg-header .a:hover{ 42 background: navajowhite; 43 } 44 45 .pg-header .a img{ 46 width: 30px; 47 height: 30px; 48 margin-top: 4px; 49 border-radius: 50%; 50 } 51 52 .pg-header .a .b{ 53 position: absolute; 54 top: 40px; 55 left: -25px; 56 background: white; 57 z-index: 20; 58 width: 100px; 59 display: none; 60 } 61 62 .pg-header .a:hover .b{ 63 display: block; 64 } 65 66 .pg-header .a:hover .b a{ 67 display: block; 68 } 69 70 .pg-content{ 71 z-index: 10; 72 } 73 74 .pg-content .menu{ 75 width: 200px; 76 background: red; 77 /*position: fixed;*/ 78 position: absolute; 79 left: 0; 80 top: 40px; 81 bottom: 0; 82 } 83 84 .pg-content .content{ 85 /*width: 80%;*/ 86 min-width: 800px; 87 background: purple; 88 /*position: fixed;*/ 89 position: absolute; 90 top: 40px; 91 left: 200px; 92 bottom: 0; 93 right: 0; 94 overflow: auto; 95 } 96 97 .pg-header .message{ 98 padding: 2px 6px; 99 border-radius: 50%; 100 background: green; 101 font-size: 12px; 102 line-height: 1; 103 } 104 105 </style> 106 107 </head> 108 <body> 109 110 <div class="pg-header"> 111 <div class="left" style="width: 200px; background: wheat">老男孩</div> 112 <div class="a right"> 113 <div class="left"> 114 <img src="22.jpg" alt="头像"> 115 <div class="b"> 116 <a href="">首页</a> 117 <a href="">注销</a> 118 </div> 119 </div> 120 </div> 121 <div class="right" style="width: 80px;"> 122 <i class="fa fa-bell-o icon" aria-hidden="true"></i> 123 <span class="message">5</span> 124 </div> 125 126 <div class="right" style="width: 80px;"> 127 <i class="fa fa-envelope-o icon" aria-hidden="true"></i> 128 </div> 129 130 </div> 131 132 <div class="pg-content"> 133 <div class="menu left"></div> 134 <div class="content left"> 135 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 136 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 137 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 138 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 139 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 140 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 141 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 142 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 143 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 144 <p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p><p>sdfjkaldfa</p> 145 146 </div> 147 <div style="clear: both"></div> 148 </div> 149 150 <div class="pg-footer"></div> 151 152 </body> 153 </html>
鼠标指向标签时，不同行出现不同的效果：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 7 <style> 8 .item{ 9 background: #ddd; 10 } 11 .item:hover{ 12 color: red; 13 } 14 .item:hover .b{ /* */ 15 background: green; 16 } 17 </style> 18 </head> 19 <body> 20 <div class="item"> 21 <div class="a">123</div> 22 <div class="b">456</div> 23 </div> 24 25 </body> 26 </html>
JavaScript：独立的语言，浏览器具有js解释器功能
JavaScript代码存在形式： - head中 <script type="text/javascript"> // type="text/javascript"默认值，可以不写 alert(123); //javascript代码 </script> - 文件 <script src="js文件路径"></script // js可以是本地文件，也可以是远程文件 PS: JS代码需要放置在<body>标签内部的最下方，即使js耗时严重，也不影响用户看到页面效果，只是js实现特效慢而已 注释 当行注释 // 多行注释 /* */ 变量： python: name = 'alex' JavaScript: name = 'alex' # 默认全局变量 var name = 'eric' # 局部变量 写Js代码： - html文件中编写 - 临时， 浏览器的终端 console
数据类型
- 数字
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
parseInt(..) 将某值转换成数字，不成功则NaN
parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
NaN，非数字。可使用 isNaN(num) 来判断。
Infinity，无穷大。可使用 isFinite(num) 来判断。
1 常量 2 Math.E # 常量e，自然对数的底数。 3 Math.LN10 # 10的自然对数。 4 Math.LN2 # 2的自然对数。 5 Math.LOG10E # 以10为底的e的对数。 6 Math.LOG2E # 以2为底的e的对数。 7 Math.PI # 常量figs/U03C0.gif。 8 Math.SQRT1_2 # 2的平方根除以1。 9 Math.SQRT2 # 2的平方根。 10 11 静态函数 12 Math.abs( ) # 计算绝对值。 13 Math.acos( ) # 计算反余弦值。 14 Math.asin( ) # 计算反正弦值。 15 Math.atan( ) # 计算反正切值。 16 Math.atan2( ) # 计算从X轴到一个点的角度。 17 Math.ceil( ) # 小数点数值全部往上升一个。 18 Math.cos( ) # 计算余弦值。 19 Math.exp( ) # 计算e的指数。 20 Math.floor( ) # 舍弃小数点后的数。 21 Math.log( ) # 计算自然对数。 22 Math.max( ) # 返回两个数中较大的一个。 23 Math.min( ) # 返回两个数中较小的一个。 24 Math.pow( ) # 计算xy。 25 Math.random( ) # 计算一个随机数。 26 Math.round( ) # 舍入为最接近的整数。 27 Math.sin( ) # 计算正弦值。 28 Math.sqrt( ) # 计算平方根。 29 Math.tan( ) # 计算正切值。
- 字符串
obj.length 长度
obj.trim() 移除空白
obj.trimLeft()
obj.trimRight)
obj.charAt(n) 返回字符串中的第n个字符
obj.concat(value, ...) 拼接
obj.indexOf(substring,start) 子序列位置
obj.lastIndexOf(substring,start) 子序列位置
obj.substring(from, to) 根据索引获取子序列,包含from，不包含to
obj.slice(start, end) 切片
obj.toLowerCase() 大写
obj.toUpperCase() 小写
obj.split(delimiter, limit) 分割
obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效)
obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项，
$数字：匹配的第n个组内容；
$&：当前匹配的内容；
$`：位于匹配子串左侧的文本；
$'：位于匹配子串右侧的文本
$$：直接量$符号
- 布尔值
布尔类型仅包含真假，与Python不同的是其首字母小写。
== 比较值相等
!= 不等于
=== 比较值和类型相等
!=== 不等于
|| 或
&& 且
- 数组（列表）
obj.length 数组的大小
obj.push(ele) 尾部追加元素
obj.pop() 尾部获取一个元素，获取的元素从列表中删除
obj.unshift(ele) 头部插入元素
obj.shift() 头部移除元素
obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素
- start 索引的位置
- deleteCount 要删除的元素个数
- value 要插入或者替换的元素值
obj.splice(n,0,val) 指定位置插入元素
obj.splice(n,1,val) 指定位置替换元素
obj.splice(n,1) 指定位置删除元素
obj.slice( ) 切片
obj.reverse( ) 反转
obj.join(sep) 将数组元素用"sep字符"连接起来以构建一个字符串
obj.concat(val,..) 连接数组合并成一个列表
obj.sort( ) 对数组元素进行排序
- 字典
a = {"k1":"u1","k2":"u2"}
str = JSON.stringify(a) 序列化
JSON.parse(str) 反序列化
PS： 数字、布尔值、null、undefined、字符串是不可变
null：JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”
undefined：是一个特殊值，表示变量未定义。
条件语句：
if(条件){
}else if(条件){
}else{
}
for 循环：
1. 循环时，循环的是元素索引(支持列表、字典)
a = [11,22,33,44]
for(var item in a){
console.log(item)
}
2. 不支持字典
a = [11,22,33,44]
for(var i=0;i<a.length;i++){
console.log(item)
}
1 <div id="il">欢迎老男孩莅临指导</div> 2 <script> 3 function func() { 4 //根据ID获取指定标签的内容,定于局部变量接受 5 var tag = document.getElementById('il'); 6 //获取标签内部数据 7 var content = tag.innerText; 8 9 var f = content.charAt(0); 10 var l = content.substring(1,content.length); 11 12 var new_content = l + f; 13 14 tag.innerText = new_content; 15 } 16 setInterval('func()', 500); 17 </script>
定时器：
setInterval('执行的代码', 间隔时间)
输出内容到控制台：
console.log(123)
基本函数
JavaScript中函数基本上可以分为一下三类：
// 普通函数
function func(arg){
return true;
}
// 匿名函数
var func = function(arg){
return "tony";
}
// 自执行函数
(function(arg){
console.log(arg);
})('123')
补充知识点
cursor: pointer; # 光标呈现为指示链接的指针（一只手）
min-height: 100px; # 设置最小的高度值
vertical-align:text-top; # 垂直对齐一幅图像
button实现跳转到指定页面：
<button type="button" onclick="location.href='index.html'"></button>
placeholder 文本搜索字段： <form action="demo_form.asp" method="get"> <input type="search" name="user_search" placeholder="Search W3School" /> <input type="submit" /> </form> 定义和用法 placeholder 属性提供可描述输入字段预期值的提示信息（hint）。 该提示会在输入字段为空时显示，并会在字段获得焦点时消失。 注释：placeholder 属性适用于以下的 <input> 类型：text, search, url, telephone, email 以及 password。
