一、css常用标签及页面布局
1、常用标签
position(定位) z-index(定位多层顺序) background(背景)
text-align(针对字符自动左右居中) margin(外边距) padding(内边距)
font-size(字体大小) over-flow(修剪hidden,srcoll,auto)
:hover(设置对象在鼠标悬停时的样式) opacity(页面透明度)
float(让标签浮动起来) clear:both(让浮动标签沉下来) line-height(上下居中)
border(边框) color(字体颜色) display(设置或检索对象是否及如何显示)
2、两种页面布局
(1)主站
<div class='pg-header'> <div style='980px;margin:0 auto;'> 内容自动居中 </div> </div> <div class='pg-content'></div> <div class='pg-footer'></div>
(2)后台管理布局
position:
fiexd --永远固定在窗口的某个位置
relative --单独无意义
absolute --第一次定位,可以在指定的位置;滚轮滚动时,就变了
a、左侧菜单跟随滚动条
b、左侧及以上不动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"/> <style> body{ margin: 0; } .left{ float: left; } .right{ float: right; } .pg-header{ height: 48px; background-color: #2459a2; color: white; line-height: 48px; } .pg-header .logo{ width: 200px; background-color: #204982; text-align: center; } .pg-header .icons{ padding: 0 20px; } .pg-header .icons:hover{ background-color: #204982; } .pg-header .user{ margin-right: 60px; padding: 0 20px; color: white; height: 48px; } .pg-header .user:hover{ background-color: #204982; } .pg-header .user .a img{ height: 40px;width: 40px;margin-top: 4px;border-radius: 50%; } .pg-header .user .b{ z-index: 20; position: absolute; top: 48px; right: 0; background-color: white; color: black; width: 160px; display: none; font-size: 14px; line-height: 30px; } .pg-header .user .b a{ padding: 5px; color: black; text-decoration: none; } .pg-header .user .b a:hover{ background-color: #dddddd; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .pg-content .menu{ position: absolute; top:48px; left: 0; bottom: 0; width: 200px; background-color: #dddddd; } .pg-content .content{ position: absolute; top: 48px; right: 0; bottom: 0; left: 200px; overflow: auto; z-index: 9; } </style> </head> <body> <div class="pg-header"> <div class="logo left"> 老男孩 </div> <div class="user right" style="position: relative"> <a class="a" href="#"> <img src="22.jpg"> </a> <div class="b"> <a href="#">我的资料</a> <a href="#">注销</a> </div> </div> <div class="icons right"> <i class="fa fa-commenting-o" aria-hidden="true"></i> <span>5 </span> </div> <div class="icons right"> <i class="fa fa-bell-o" aria-hidden="true"></i> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <!--<div style="position: fixed;bottom:0;right:0; 50px;height: 50px;">返回顶部</div>--> <!--<div style="position: absolute;bottom:0;right:0; 50px;height: 50px;">返回顶部</div>--> <div style="background-color: purple"> <p style="margin: 0;">asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> <p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p><p>asdf</p> </div> </div> </div> <div class="pg-footer"></div> </body> </html>
二、js回顾及补充
1、for循环的两种写法
for(var item in [11,22,33]){
console.log(item);
continue;
}
var arra = [11,22,32,3] for(var i=0;i<arra.lenght;i=i+1){ break; } while(条件){ }
2、条件语句的写法
if(){ }else if(){ }else{ }
name='3'; switch(name){ case '1': age = 123; break; case '2': age = 456; break; default : age = 777; }
3、函数
(1)普通函数
function func(){ }
(2)匿名函数
function func(arg){ return arg+1 } setInterval("func()", 5000); setInterval(function(){ console.log(123); },5000)
(3)自执行函数(创建函数并且自动执行)
function func(arg){ console.log(arg); } // func(1) (function(arg){ console.log(arg); })(1)
4、序列化
JSON.stringify() 将对象转换为字符串
JSON.parse() 将字符串转换为对象类型
5、转义
客户端(cookie) =》 服务器
将数据经过转义后,保存在cookie
6、eval
python的eval:
val = eval(表达式)
val = exec(执行代码)
JavaScript:
eval包含上面的两种功能
7、时间
Date类
var d = new Date()
d.getXXX 获取时间
d.setXXX 设置时间
8、作用域******
(1)函数作为作用域
a、其他语言:以代码块作为作用域
public void Func(){
if(1==1){
string name = 'Java';
}
console.writeline(name);
}
Func()
// 报错 这里以{}为代码块,name在另一个{},里外面的console.writeline(name)调用不了
b、Python:以函数作为作用域
情况一:
def func():
if 1==1:
name = 'alex'
print(name) #这个name是在func函数里的
func()
// 成功
情况二:
def func():
if 1==1:
name = 'alex'
func()
print(name) #这里的name是拿不到函数func里的name的
// 报错
c、JavaScript:默认是以函数作为作用域的
function func(){
if(1==1){
var name = 'alex';
}
console.log(name);
}
func()
(2)函数的作用域在函数未被调用之前已经创建
function func(){ if(1==1){ var name = 'alex'; } console.log(name); }
(3)函数的作用域存在作用域链(函数嵌套关系),并且也是在未被调用前创建
示例一:
xo = "alex"; function func(){ // var xo = 'eric'; function inner(){ // var xo = 'tony'; console.log(xo); } inner() } func()
示例二:
xo = "alex"; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } return inner; } var ret = func() ret()
示例三:
xo = "alex"; function func(){ var xo = 'eric'; function inner(){ console.log(xo); } var xo = 'tony'; return inner; } var ret = func() ret()
(4)函数内局部变量 声明提前
function func(){ console.log(xxoo); } func(); // 程序直接报错 function func(){ console.log(xxoo); var xxoo = 'alex'; } 解释过程中:var xxoo; func(); // undefined
9、JavaScript面向对象
function foo(){ var xo = 'alex'; } foo() function Foo(n){ this.name = n; this.sayName = function(){ console.log(this.name); } } var obj1 = new Foo('we'); obj1.name obj1.sayName() var obj2 = new Foo('wee'); obj2.name obj2.sayName() ==============》 a. this代指对象(python self) b. 创建对象时, new 函数()
原型:
function Foo(n){ this.name = n; } # Foo的原型 Foo.prototype = { 'sayName': function(){ console.log(this.name) } } obj1 = new Foo('we'); obj1.sayName() obj2 = new Foo('wee');
三、DOM
1、查找
(1)直接查找
var obj = document.getElementById('i1')
(2)间接查找
文件内容操作:
A:innerText 获取的仅文本(忽略标签)
如下图:
B:innerHTML 全内容(内部所用的东西)
如下图:
C:value
input标签 value获取当前标签中的值
select标签 获取选中的value值(selectIndex)
textarea标签 value获取当前标签中的值
2、操作:
(1)样式操作:
className
classList
classList.add classList.remove
(2)属性操作:
attributes getAttibute removeAttribute