web前端基础

最新推荐文章于 2024-08-30 16:13:36 发布

这个阿伟就是逊

最新推荐文章于 2024-08-30 16:13:36 发布

阅读量29

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/m0_72556244/article/details/131561943

版权

<!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>

得到

如果要添加动画效果

可以添加标签

在同一个变量中有两个类型相同的命令后面回覆盖前面

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);}
);

这个阿伟就是逊

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web前端基础

其中 input 添加内容 type类型 text为文本框 button为按钮可以在后面添加style变量来改变文本框形状或者内容也可在head中添加<style>来定义变量在用class来采用之前定义的变量。<input type="button" value="提交" class="sty sty1" />**<div></div>**方块元素没有高度跟长度需要自己设定。<div class="aaa">涵涵!<div class="aaa">涵涵!<div class="aaa">涵涵!
复制链接

扫一扫