第八周

周一

布局

CSS的大三模型

标签显示模式：

块级元素

h1_h6 p  div   ul   ol  li   table

独占一行

可设置高度

行内元素

a   strong b   i   u   span

多个元素可以在一行

不能改变其高度

行内块

img    input  td  可以对他们设置宽度和对齐属性

和相邻行内元素在一行上，但是之间会有空白缝隙

默认宽度就是它本身内容的宽度

显示模式的转换

display：block 块级元素

display：inline 行内元素

display:inline-block 行内块元素

盒子模型

四大元素：

外边距：margin

边框：border

内边距：padding

内容区域：content

设置内边距可能会撑开父级div我们就用 box-sizing: border-box;属性来控制它

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>仿新浪</title>
    <style>
        * {
            margin: 0;
        }

        .container {
            height: 41px;
            border-top: 3px solid #ff8500;
            background: #fcfcfc;
            border-bottom: 1px solid #edeef0;
            line-height: 41px;
            /*设置DIV内元素垂直居中，可以将line-heiht设置成容器的高度*/


        }

        a {
            color: #4c4c4c;
            font-size: 13px;
            text-decoration: none;
            /*去除a标签的下划线 */
            display: inline-block;
            height: 41px;
            padding: 0 15px;
        }

        a:hover {
            color: #fe8b10;
            background-colorAS: #edeef0;
        }
    </style>
</head>

<body>
    <div class="container">
        <a href="#">设为首页</a>
        <a href="#">手机新浪网</a>
        <a href="#">移动客户端</a>

    </div>
</body>

</html>

浮动

让块级元素显示在一行

清除浮动的步骤：

先定义一个样式：

.类名：：after{
content: "";
display:block;
    clear:both;
}

再在父级元素上加样式

<div class="class1  类名">
    
</div>

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            width: 300px;
            height: 300px;
            border: 1px solid black;
        }
        .left{
            background-color: #ccc;
            display: inline-block;
            height: 300px;
            width: 100px;
            float: left;
        }
        .right{
            background-color: red;
            display: inline-block;
            height: 300px;
            width: 200px;
            float: right;
        }
        .container2{
            width: 400px;
            height: 200px;
            background-color: pink;
        }
        /* 清除浮动的第一步：定义一个选择器，名字叫clearfix */
        .clearfix::after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <!-- 清除浮动的第二步，在我们的浮动元素的父级盒子 上加上第一步定义的选择器 -->
    <div class="container clearfix" >
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="container2">
        第二个div盒子
    </div>
</body>
</html>

定位

周二

继周一的定位

属性：position

浮动的主要目的是让多个块级元素一行显示，定位的主要目的就是移动位置，让盒子到我们想要的位置上去

定位模式

静态定位
相对定位
绝对定位
固定定位

定位属性

元素的定位属性主要包括定位模式和边便宜两部分

边偏移属性	描述
top	顶端偏移量，定义元素相对于其父元素上边线的距离
bottom	底部偏移量，定义元素相对于其父元素下边线的距离
left	左测偏移量，定义元素相对于其父元素左边线的距离
right	右侧偏移量，定义元素相对于其父元素右边线的距离

静态定位

默认为静态定位。静态定位就是所有元素的默认定位方式。

静态位置就是各个元素在HTML文档流中默认的位置

相对定位（保留原位置）

position:relative;

要点：

1、每次移动的位置是以自己的左上角为基点移动

2、移动后，原来所占的位置继续占有。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>相对定位</title>
    <style>
        div:first-child {
            height: 200px;
            width: 200px;
            background-color: palevioletred;
            position: relative;
            top: 100px;
            left: 230px;
        }

        div:last-child {
            width: 300px;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div>第一个盒子</div>
    <div>第二个盒子</div>
</body>

</html>

绝对定位（不保留原位置）

position:absolute;

要点：

若所有的父元素都没有定位，则以浏览器为准对齐父级有定位，则根据最近的已经定位的元素（绝对，相对，固定）进行定位。

快捷键：

   <div class="father">
        <div class="son">

        </div>
</div>
等同于：
    .father>.son

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 5px solid red;
            margin-top: 150px;
            margin-left: 150px;
            position: absolute;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: plum;
            position: absolute;
            top: 10px;
            left: 10px;
        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: rgb(17, 35, 87);
            position:absolute;
            top: 110px;
            left: 110px;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            孩子盒子
        </div>
        <div class="son1">孩子2</div>
    </div>
</body>

</html>

子绝父相

子元素绝对定位，父元素相对定位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子绝父相</title>
    <style>
        .banner {
            margin: 30px auto;
            width: 960px;
            border: 1px solid plum;
            position: relative;
        }

        .content {
            width: 230px;
            margin: 3px;
        }

        .leftIcon {
            width: 30px;
            position: absolute;
            top: 38%;
            left: 0px;
        }
    </style>
</head>

<body>
    <div class="banner">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
            class="content">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
            class="content">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
            class="content">
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/9f18ac756fa2cedb16ea429b9c0001af.png?w=632&h=340" alt=""
            class="content">
        <img src="向左.png" alt="" class="leftIcon">
    </div>

</body>

</html>

固定定位

1、固定定位的元素跟父亲没有任何关系，只认浏览器

2、固定定位完全脱标，不占有位置，不随着滚动条滚动。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .fixed{
            width: 50px;
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
        body{
            height: 40000px;
        }
    </style>
</head>
<body>
    <img src="向左.png" alt="" class="fixed">
</body>
</html>

创建层

叠放次序：

当多个元素同时设置定位时，定位元素之间有可能会发生重叠。使用z-index调整堆叠顺序。取值越大，跃居上。

    <style>
        .father {
            width: 400px;
            height: 400px;
            border: 5px solid red;
            margin-top: 150px;
            margin-left: 150px;
            position: absolute;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: plum;
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 2;
        }

        .son1 {
            width: 100px;
            height: 100px;
            background-color: rgb(98, 107, 134);
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">
            孩子盒子
        </div>
        <div class="son1">孩子2</div>
    </div>
</body>

总结知识：

定位模式	是否脱标占有位置	是否可以使用边偏移	移动位置基准
静态定位	不脱标，正常模式	不可以	正常模式
相对定位	不脱标，占有位置	可以	相对自身位置移动
绝对定位	完全脱标，不占有位置	可以	相对于定位父级移动位置
固定定位	完全脱标，不占有位置	可以	相对于浏览器移动位置

周三（JavaScript）

JavaScript简介

JavaScripe

NetScape公司开发的一种脚本语言

在W3C、ECMA的不懈努力下，随着Microsoft的IE浏览器的不断改进。

JavaScript特点

脚本语言

基于对象

简单性

安全性

动态性

跨平台性

JavaScript的解释和介绍

JavaScript和Java的区别

面向对象和基于对象

解释和编译

代码格式不一样

嵌入方式不一样

强类型和弱类型

静态联编和动态联编

基础语法

JavaScript支持的数据类型共有5种：

数值型

布尔值

字符串形

未定义

变量与表达式

创建变量

表达式与操作符

注意：== 与 === 的区别：

== 会做一定的类型转换

===不做类型转换，接受的相等条件更加严格（全等于类型都要一样）

常用类

函数

Array

Math

Date

String

Array

声明数组

var 数组名 = new Array(size)

var emp = new Array（2）

添加元素

emp[2] = "aa";

也可以

var empp = new Array("AA","BB")；

    <script>
        var arr1 = new Array(3);
        document.write(arr1+"</br>")
        document.write(arr1.length + "<hr/>")

        var arr2 = new Array("aa", 123, "W",5543);
        document.write(arr2 + "</br>");
        document.write(arr2.length + "</br>")

        document.write("<hr/>");
        //创建数组的第三种方法
        var arr3 = ["问天一部",666,123,345,"lwww"];
        document.write(arr3 + "</br>");
        document.write(arr3.length + "<hr/>")

        //遍历数组
        for(var i = 0;i<arr3.length;i++){
            document.write(arr3[i]+"<br/>")
        }

Array的属性

length，指明数组的长度

方法：

join（）将数组值连接变为一个字符串

reverse（）将数组值倒序

sort（）排序

    <script>
        var arr = [11, 2, 33, 4, 21, 213];
        document.write(arr + "</br>");
        arr.sort();  //是按照数组的第一位数字大小排序的
        document.write(arr + "<hr/>");

        //join方法
        document.write(arr.join("-"))
    </script>

Math

Function

function 函数名 （参数）{
    函数体；
    return 表达式；
}

特点：

方法定义是，参数的类型不用写，返回值类型也不写

方法是一个对象，如果定义名称相同的方法，会覆盖

在JS中，方法的调用只与方法的名称有关，和参数列表无关

在方法声明中有一个隐藏的内置对象（数组），arguments封装所有的实际参数

调用:方法名称（实际参数列表）；

    <script>
        //方法中的参数可以不写，默认提供了arguments来接收所有参数
        function method1() {
            print("调用了method1方法");
            for(var i = 0 ; i<arguments.length ; i++){
                print(arguments[i])
            }
        }
        method1(1, "333", true);
        function print(param) {
            document.write(param + "</br>")
        }
    </script>

Date

   <script>
        var date =  new Date();
        print(date);
        print("FullYear:"+date.getFullYear()+"</br>");
        print("Moneth:"+date.getMonth()+"</br>");
        print("Day:"+date.getDay()+"</br>");
        print("date:"+date.getDate()+"</br>")；
        
        function print(param){
            document.write(param + "</br>");
        }

BOM（浏览器对象）

DOM操作（文档对象）

事件

周四

继周三的Math Function 与Date函数

例子（轮播图、倒计时）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1、创建图片容器并初始化
        var pics = [];
        pics[0]="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/11829e973197010c1f012f70aafde8f4.jpg?thumb=1&w=1349&h=506&f=webp&q=90";
        pics[1]="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d498c673c14fac077c37869cd82e38a9.jpg?w=2452&h=920";
        pics[2]="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/a532e33470d046b3f044d5ea49fc5e9e.png?thumb=1&w=1349&h=506&f=webp&q=90";
        //2、定义一个函数来切换图片
        var picIndex = 0; 
        function show(){
            //得到img对象

            var imgElement = document.getElementById("bannerImg");

            //按顺序取容器中的图片  
            var imgsrc = pics[picIndex]
            picIndex++;
            if(picIndex == pics.length){
                picIndex = 0;
            }
            //将取到的图片src赋值给第一步得到的img对象的src
            imgElement.src = imgsrc

        }
        //3、设置一个定时器        
       setInterval(show,2000)
    </script>
    <style>
      
      div {
            width: 700px;
            margin: 0 auto;
        }
       
        #bannerImg{
            width: 100%;
        }
    </style>
</head>
<body>
    <div>
        <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d498c673c14fac077c37869cd82e38a9.jpg?w=2452&h=920" alt="" id="bannerImg"> 
    </div>
</body>
</html>

倒计时

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //1、定义方法改变秒数
        var second = 5
        function changeSeconds() {
            //1得到秒数的element对象
            var spanElement = document.getElementById("seconds");
            //2 秒数 --
            second--;
            //3 将秒数赋值给1获得的Element对象
            spanElement.innerHTML = second;
            //4 当前秒数等于0的时候，跳转网页
            while (second == 0) {
                location.href = "http://www.cqyti.com/";
            }
        }
        //2、定义一个定时器，重复执行1的方法
        setInterval(changeSeconds, 1000)
    </script>
    <style>
        #seconds {
            color: pink;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <span id="seconds">5</span>秒之后跳转到学校官网
</body>

</html>

DOM

动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口

DOM的分类

Core DOM

定义了一套标准的针对任何结构化文档的对象

XML DOM

定义了一套标准的针对XML文档的对象

HTML DOM

定义了一套标准的针对Html文档的对象

Node层次

节点列表

事件

JavaScript事件：

事件是发生并得到处理的操作

JavaScript事件处理程序就是一组语句，在时间发生时执行。

JavaScript常用事件

鼠标移动事件
鼠标点击事件
加载与卸载事件
聚焦事件
提交与重置事件
选择与改变事件

posted @ 2021-10-31 17:24 喂s别闹阅读(53) 评论(0) 编辑收藏举报

刷新页面返回顶部

第八周

周一

布局

显示模式的转换

盒子模型

浮动

定位

周二

继周一的定位

定位模式

定位属性

静态定位

相对定位（保留原位置）

绝对定位（不保留原位置）

子绝父相

固定定位

创建层

周三（JavaScript）

JavaScript简介

JavaScript特点

JavaScript的解释和介绍

JavaScript和Java的区别

基础语法

变量与表达式

表达式与操作符

常用类

函数

Array

Math

Function

Date

BOM（浏览器对象）

DOM操作（文档对象）

事件

周四

例子（轮播图、倒计时）

DOM

Node层次

节点列表

事件

JavaScript常用事件

公告