加减输入框
"""
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;
width: 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="width: 980px;margin: 0 auto;">
<div style="width: 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
<div style="width: 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;
width: 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;
width: 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>
