<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>练习页面1</title>
</head>
<body>
</body>
</html>
最基本的html页面 其中 title是页面标题栏的内容
在body中添加页面内容
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>2306</title>
</head> // .sty1{width:100px;height=30px;}
<body>
<input type="text" style="width:100px;height=30px;" /> //class = "sty1";
<input type="button" value="提交" style="width:100px;height=30px;" />
<select>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
涵涵!
</body>
</html>
其中 input 添加内容 type类型 text为文本框 button为按钮 可以在后面添加style变量来改变文本框形状或者内容 也可在head中添加<style>来定义变量在用class来采用之前定义的变量
<select></select>下拉框里面添加<option></option>**内容
border-radius:10px 圆角弧度 background-color 背景颜色 color 字体颜色 0-9,a-f(10-15) 颜色 #加三色混合
margin-left top 边距 左边距上边距
transform:rotate(30deg) 旋转角度
**<div></div>**方块元素 没有高度跟长度需要自己设定
box-shadow 阴影 10px 10px 10px 向右向下扩散 颜色
float:left 飘起了向左对齐
opacity:0.7 透明度 添加这些代码后
<html>
<head>
<meta charset="utf-8">
<title>2306</title>
<style>
.sty{border-radius:10px; background-color:#a00;color:#fff;transform:rotate(30deg);opacity:0.7}
.sty1{width:100px;height=30px;}
.sty2{margin-left:30px;margin-top:30px}
.aaa{width:200px;height:200px;background-color:#2ac;margin-left:100px;margin-top:100px;box-shadow:10px 10px 10px #000;border-radius:10px; float:left;transform:rotate(30deg)}
</style>
</head>
<body>
<input type="text" class="sty1" />
<input type="button" value="提交" class="sty sty1" />
<select class="sty2">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</select>
<div class="aaa">涵涵!</div>
<div class="aaa">涵涵!</div>
<div class="aaa">涵涵!</div>
</body>
</html>
得到
如果要添加动画效果
可以添加标签
<script></script>标签 里面添加function 不区分类型 定义用var
在同一个变量中有两个类型相同的命令 后面回覆盖前面
var x = document.getElementByID("") document 文档 getElementByID 从id获取节点 通过添加事件来触发
如果想要添加文本框动画 通过添加文本框id在进行
<script>
function f3(){
var k = document.getElementById("dd1");
k.style.width = (100 + a)%500 + "px";
k.style.backgroundColor = "#a00";
k.style.transform = "rotate(" + (30+a) +"deg)"; //拼接狗变成"rotate(30deg)"
setTimeout("m1(" + (a+1) + ")",20); // ("m1(1),20)"
}
</script>
通过get方法得到上面div的id 对它添加style变量
字符串拼接 因为字符串可以相加 可以通过字符串拼接实现变量
"rotate(" + (30+a) +"deg)"
拼接成"rotate(30deg)"
setTimeout("m1()" 3000);定时器 在3s后触发m1方法
可以配合onclick 当点击它是时候触发事件来触发
var a = "23"; //有双引号是字符串 可以进行字符串拼接
a = parseInt(a); //parseIint转化为整数类型 用来把字符串转化
数组中可以存放不同类型的数据
var a1 = [1,2,3,"aa","bb",5.2],[1,"aa"];
a2 = a1[6][1]; //结果为aa
var a3 = {
"name":张三,
"age":18,
"height":180
};
console.info(a3.name);// 对象类型 json 直接输出张三
console.info(a3.age);
console.info(a3.height);
在控制台查看输出
var a4 = {
"friends":[{"name":"double","age":18},{"name":"涵涵","height":175}]
};
console.info(a4.friends[1].name);//这样来获取对象类型中嵌套的数组的数据
function中的参数不一定是数 也可能是一个函数
function m(a,b,c){
a(10,20); // 参数为两个函数
b(c,6);
};
m(function(p1,p2){console.info(p1+p2);},
function(p1,p2){console.info(p1-p2);},
30
);
m(function(p1,p2){console.info(p1+p2);},
function(p1,p2){p1(p2+9);},
function(k){ console.info(2*k);}
);