Javascript案例——01跳转页面、倒计时

目录

1、实现的html界面（两个）

1.1首先实现页面布局

1.1.1 布局——居中

1.1.2 实现列表的信息

1.2 实现第二个支付页面

1.3 运用JS实现页面跳转

1.3.1 一些知识点

1.3.2 代码

1.4 实现支付后时间加载

1.4.1 实现倒数计时器，以及页面跳转

---

1、实现的html界面（两个）

 

1.1首先实现页面布局

1.1.1 布局——居中

1. 在这里我们先设置一个div，让整个div在页面居中。我们取名为container（容器），让接下来所写的代码都在里面，格式如下：

<div class= "container">
    <div class="">...</div>
    <div class="">...</div>
    <div class="">...</div>
</div>

     2.关于container的css设置

     ① 先写出大小【即宽（width）和高（height）】，让他以区块的形式出现

     ② 设置背景【background-color】

     ③ 让块级元素居中【margin】

常用的块级元素:div、p、列表、h1~h6、pre（格式化文本）

ℹ️MARGIN居中用法

    margin：auto 0; //上下居中，左右为0

    margin: 0 auto; //上下不居中，左右居中

    margin:auto;//上下左右都居中

代码如下;

.container {
    width: 300px;
    height: 350px;
    display: block; //元素会以区块的方式呈現
    background-color: #BBFFEE;
    margin: 100px auto;
}

1.1.2 实现列表的信息

1. 方法一：使用p标签实现