一、HTML+CSS补充
0、常用页面布局
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> /*设置body样式*/ body{ margin: 0; } /*设置left样式*/ .left{ float: left; } /*设置right样式*/ .right{ float: right; } /*设置header样式*/ .pg-header{ height: 48px; background-color: #2459a2; color: white; line-height: 48px; } .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: 44px; background-color: white; color: black; width: 160px; display: none; } .pg-header .user:hover .b{ display: block; } .pg-header .user .b a{ display: block; } .pg-header .logo{ width: 200px; background-color: burlywood; text-align: center; } /*设置内容部分左边菜单样式*/ .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;
} </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="2.jpg"> </a> <div class="b"> <a>我的资料</a> <a>注销</a> </div> </div> <div class="pg-content"> <div class="menu left">a</div> <div class="content left"> <!--<div style="position: fixed;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--> <!--<div style="position: absolute;bottom:0;right:0;width: 50px;height: 50px;">返回顶部</div>--> <!--设置右边content的背景色--> <div style="background-color: purple"> <!--p标签有间距,要设置margin:0--> <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>
1、float,clear:both,margin,padding
float:定义元素在哪个方向上浮动
clear:both定义了元素的哪边上不允许出现浮动元素
<html>
<head>
<style type="text/css">
img
{
float:left;
clear:both;
}
</style>
</head>
<body>
<img src="/i/eg_smile.gif" />
<img src="/i/eg_smile.gif" />
</body>
</html>
margin:简写属性在一个声明中设置所有外边距属性。四个值：上、右、下、左，两个值的时候：上下、左右<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>
padding:简写属性在一个声明中设置所有内边距属性。四个值：上、右、下、左，两个值的时候：上下、左右
<html>
<head>
<style type="text/css">
td.test1 {padding: 1.5cm}
td.test2 {padding: 0.5cm 2.5cm}
</style>
</head>
<body>
<table border="1">
<tr>
<td class="test1">
这个表格单元的每个边拥有相等的内边距。
</td>
</tr>
</table>
<br />
<table border="1">
<tr>
<td class="test2">
这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。
</td>
</tr>
</table>
</body>
</html>
一个列子：
<html>
<head>
<style type="text/css">
div
{
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
}
</style>
</head>
<body>
<div>
<img src="/i/eg_cute.gif" /><br />
CSS is fun!
</div>
<p>
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<p>
在上面的段落中，div 元素的宽度是 120 像素，它其中包含图像。div 元素浮动到右侧。我们向 div 元素添加了外边距，这样就可以把 div 推离文本。同时，我们还向 div 添加了边框和内边距。
</p>
</body>
</html>
2、position：规定元素的定位类型
h2
{
position:absolute;
left:100px;
top:150px;
}
可能的值
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
<html>
<head>
<style type="text/css">
h2.pos_abs
{
/*决定定位，还以为是relative和fixed*/
position:absolute;
left:100px;
top:150px
}
</style>
</head>
<body>
<h2 class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>
</html>
3、left: 规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
<html>
<head>
<style type="text/css">
img
{
position:absolute;
left:20%
}
</style>
</head>
<body>
<h1>这是标题</h1>
<img class="normal" src="/i/eg_smile.gif" />
<p>一些文本。一些文本。一些文本。一些文本。一些文本。一些文本。</p>
</body>
</html>
4、background:简写属性在一个声明中设置所有的背景属性。
- background-color
- background-position
- background-size
- background-repeat
- background-origin
- background-clip
- background-attachment
- background-image
<html>
<head>
<style type="text/css">
body
{
/*背景属性*/
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
</style>
</head>
<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>
</html>
5、text-align:属性规定元素中的文本的水平对齐方式。
<html>
<head>
<style type="text/css">
h1 {text-align: center}
h2 {text-align: left}
h3 {text-align: right}
</style>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
</body>
</html>
6、font-size:属性可设置字体的尺寸。
<html>
<head>
<style type="text/css">
h1 {font-size: 300%}
h2 {font-size: 200%}
p {font-size: 100%}
</style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>
</body>
</html>
7、z-index:设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
<html>
<head>
<style type="text/css">
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
</style>
</head>
<body>
<h1>这是一个标题</h1>
<img class="x" src="/i/eg_mouse.jpg" />
<p>默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</p>
</body>
</html>
8、over-flow:(略）9、:hover:选择器用于选择鼠标指针浮动在上面的元素。
<!DOCTYPE html>
<html>
<head>
<style>
/*悬浮hover和活动链接active的结合*/
a.ex1:hover,a.ex1:active {color:red;}
a.ex2:hover,a.ex2:active {font-size:150%;}
a.ex3:hover,a.ex3:active {background:red;}
a.ex4:hover,a.ex4:active {font-family:‘微软雅黑‘;}
a.ex5:visited,a.ex5:link {text-decoration:none;}
a.ex5:hover,a.ex5:active {text-decoration:underline;}
</style>
</head>
<body>
<p>请把鼠标指针移动到这些链接上。</p>
<p><a class="ex1" href="/index.html">这个链接改变颜色。</a></p>
<p><a class="ex2" href="/index.html">这个链接改变字体大小。</a></p>
<p><a class="ex3" href="/index.html">这个链接改变背景色。</a></p>
<p><a class="ex4" href="/index.html">这个链接改变字体。</a></p>
<p><a class="ex5" href="/index.html">这个链接会出现下划线。</a></p>
</body>
</html>
10、opacity:设置元素的不透明级别。
div
{
opacity:0.5;
}
<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// 返回被选选项的文本
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
{el.style.opacity=opacity;}
else
{alert("Your browser doesn‘t support this example!");}
}
</script>
</head>
<body>
<p id="p1">请从下面的例子中选择一个值，以改变此元素的不透明度。</p>
<select onchange="ChangeOpacity(this);" size="5">
<option />0
<option />0.2
<option />0.5
<option />0.8
<option selected="selected" />1
</select>
</body>
</html>
11、line-height:设置行间的距离（行高）。
12、border:简写属性在一个声明设置所有的边框属性。
<html>
<head>
<style type="text/css">
p
{
/*border属性*/
border: medium double rgb(250,0,255)
}
</style>
</head>
<body>
<p>Some text</p>
</body>
</html>
13、color:规定文本的颜色。
<html>
<head>
<style type="text/css">
body {color:red}
h1 {color:#00ff00}
p.ex {color:rgb(0,0,255)}
</style>
</head>
<body>
<h1>这是 heading 1</h1>
<p>这是一段普通的段落。请注意，该段落的文本是红色的。在 body 选择器中定义了本页面中的默认文本颜色。</p>
<p class="ex">该段落定义了 class="ex"。该段落中的文本是蓝色的。</p>
</body>
</html>
14、display:规定元素应该生成的框的类型
<html>
<head>
<style type="text/css">
span
{
display: block
}
</style>
</head>
<body>
<span>本例中的样式表把 span 元素设置为块级元素。</span>
<span>两个 span 元素之间产生了一个换行行为。</span>
</body>
</html>
<html>
<head>
<style type="text/css">
p {display: inline}
div {display: none}
</style>
</head>
<body>
<p>本例中的样式表把段落元素设置为内联元素。</p>
<p>而 div 元素不会显示出来！</p>
<div>div 元素的内容不会显示出来！</div>
</body>
</html>
15、页面布局主站— <div class=‘pg-header‘> <div style=‘width:980px;margin:0 auto;‘> 内容自动居中 </div> </div> <div class=‘pg-content‘></div> <div class=‘pg-footer‘></div>
后台管理布局： position: fiexd -- 永远固定在窗口的某个位置 relative -- 单独无意义 absolute -- 第一次定位，可以在指定位置，滚轮滚动时，不在了。。。。 a. 左侧菜单跟随滚动条 b. 左侧以及上不不动 ******
二、JavaScript补充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. 函数 function func(arg){
return arg+1 } var result = func(1) console.log(result);
普通函数： function func(){
} 匿名函数：
function func(arg){
return arg+1 }
setInterval("func()", 5000);
setInterval(function(){ console.log(123);
},5000)
自执行函数(创建函数并且自动执行)： 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: val = eval(表达式) exec(执行代码) JavaScript: eval
7、时间 Date类 var d = new Date() d.getXXX 获取 d.setXXX 设置
8、作用域 (1). 以函数作为作用域 （let）
其他语言： 以代码块作为作用域 public void Func(){ if(1==1){ string name = ‘Java‘;
} console.writeline(name);
} Func() // 报错
Python： 以函数作为作用域 情况一： def func(): if 1==1: name = ‘alex‘ print(name)
func() // 成功 情况二： def func(): if 1==1: name = ‘alex‘ print(name)
func() print(name) // 报错
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面向对象
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 函数()
Python的面向对象： class Foo: def __init__(self,name): self.name = name
def sayName(self): print(self.name)
obj1 = Foo(‘we‘)
obj2 = Foo(‘wee‘)
原型：
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、查找
直接查找 var obj = document.getElementById(‘i1‘)间接查找文件内容操作： innerText 仅文本 innerHTML 全内容 value input value获取当前标签中的值 select 获取选中的value值（selectedIndex） textarea value获取当前标签中的值 搜索框的示例
2、操作： 样式操作： className classList classList.add classList.remove obj.style.fontSize = ‘16px‘; obj.style.backgroundColor = ‘red‘; obj.style.color = "red"属性操作： attributes getAttribute
removeAttribute 创建标签，并添加到HTML中：a. 字符串形式b. 对象的方式 document.createElement(‘div‘) 提交表单 任何标签通过DOM都可提交表单 document.geElementById(‘form‘).submit()
其他： console.log() alert var v = confirm(信息) v:true false location.href location.href = "" # 重定向，跳转 location.reload() # 页面刷新 location.href = location.href < === > location.reload() var o1 = setInterval(function(){}, 5000) clearInterval(o1); var o2 = setTimeout(function(){}, 50000); clearTimeout(o2); var obj = setInterval(function(){ }, 5000) clearInterval(obj);
3、事件： onclick，onblur，onfocus
行为 样式 结构 相分离的页面？ js css html
绑定事件两种方式： a. 直接标签绑定 onclick=‘xxx()‘ onfocus b. 先获取Dom对象，然后进行绑定 document.getElementById(‘xx‘).onclick document.getElementById(‘xx‘).onfocus
this，当前触发事件的标签 a. 第一种绑定方式 <input id=‘i1‘ type=‘button‘ onclick=‘ClickOn(this)‘>
function ClickOn(self){ // self 当前点击的标签
} b. 第二种绑定方式 <input id=‘i1‘ type=‘button‘ > document.getElementById(‘i1‘).onclick = function(){
// this 代指当前点击的标签 }
作用域示例： var myTrs = document.getElementsByTagName("tr"); var len = myTrs.length; for(var i=0;i<len;i++){ // i=0,i=1,i=2 myTrs[i].onmouseover = function(){ this.style.backgroundColor = "red"; };
}