HTML学习笔记第二天

最新推荐文章于 2024-11-09 21:24:41 发布

河铃旅鹿

最新推荐文章于 2024-11-09 21:24:41 发布

阅读量728

点赞数 9

文章标签： html 学习笔记

本文链接：https://blog.csdn.net/Word_seeker/article/details/140778471

版权

编写CSS文件

.1元素 2元素{声明样式}
中间为空格的是后代选择器，声明样式适用于1元素中的所有2元素，包括子代及其他

.1元素>2元素{声明样式}
中间为箭头的是子代选择器，声明样式只适用于1元素中的子代2元素，不包括孙代

position 四个属性
adsolute 绝对定位第一个非static定位的父组件，如果找不到，参照物就是HTML（不占空间）
relative 相对定位参照物自身原来的位置占原来的空间
fixed 窗口定位参照物是窗口不占空间
static 流布局定位

注意参照物是谁是否占空间

font-weight: bold;    //字体粗细
font-size: 30px;        //字体大小
font-family: '宋体';     //设置字体
background-image:url(../image/xingkong.jpg);//设置背景图片
background-size: cover;   //背景图片大小
height: 30px;       //设置高度
width: 200px;       //设置宽度

.loginbox{
    border: 2px solid #03A9F4;
    border-radius: 8px;
    position:absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-image:url(../image/xingkong.jpg);
    background-size: cover;
}
.loginbox>.title{
    color: #95cede;
    font-weight: bold;//字体粗细
    font-size: 30px;//字体大小
    text-align: center;
    padding: 20px 0px ;
}
.loginbox label{
    color: #f4c582;
    font-family: '宋体';
    width: 80px;
    text-align: center;
    display:inline-block;
}
.loginbox input{
    height: 30px;
    width: 200px;
    border: none;
    outline: none;
}
.loginbox>.item{
    border-bottom: 1px solid rgb(154, 212, 236);
    margin: 10px  20px  0px;
}
.loginbox button{
    width: 120px;
    height: 48px;
    text-align: center;
    font-size: 25px;
    border: none;
    background-color: rgb(215, 180, 241);
    border-radius: 4px;
}
.loginbox .btnbox{
    text-align: center;
    padding: 20px 0px;
}

获取dom组件对象
var btn=document.getElementById(“btn”);
btn.οnclick=clickme;
document.getElementsByClassName(“”);//通过class属性获取
document.getElementsByName(“”);//通过name属性
document.getElementsByTagName(“”);//通过标签名

编写JS

输出代码：
console.log(对象);
对数组的处理 5个函数
arr=[12,34];
console.log(arr);
arr[8]=99;
arr[3]=“你好”;
arr[4]={};
console.log(arr);
这种代码数组在编写的时候不需设置大小和类型，各种类型都可以放到数组中，数组长度可变，所以这种语言是弱类型语言

   数组添加元素
    //从头部添加
    arr.unshift("头部");

    //从尾部添加
    arr.push("尾部");

    //从头部删除
    arr.shift();

    //从尾部删除
    arr.pop();

    //删除并插入
    arr=[1,2,3,4];
    arr.splice(1);//删除下标位置以及其后所有元素

    arr=[1,2,3,4];
    arr.splice(1,2);//删除下标位置,2是指定个数

    arr=[1,2,3,4];
    arr.splice(1,0,6);//删除下标位置指定个数，添加元素

用let或var修饰的是变量，用const修饰的是常量
typeof obj 返回这个变量类型名称

delete obj.sex;删除属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <button type="button" onclick="easymethod()">点击我</button>
    <script>
        //js代码
        function easymethod(){
            //在浏览器的控制台打印数据
            console.log("this is easymethod");
            //声明对象
            //局部变量
            let obj={};
            //常量
            const username="张三";
            var sex="男";
            obj.name="李四";
            obj.study=function(){
            }
            obj["sex"]="男";
            var proName="sex";
            obj[proName]="nv";
            //删除属性
            delete obj.sex;
            obj="ab\"\"c";
            console.log(obj);
            method(12,23);
        }
        var method=function(a,b){
            if(a){
                console.log(true);
            }else{
                console.log(false);
            }
            console.log(a+"----");
            console.log(b);
            console.log(arguments);
        }

        var str="123";
        console.log(typeof str);//typeof obj  返回这个变量类型名称
        num=123.33;
        console.log(typeof num);
    </script>
</body>
</html>