CSS | 探人间

html/css 参考

阻止表单提交

onsubmit="return subtest();"
//时间未到时点击交卷
    function subtest() {
        var al=confirm("是否交卷？");
        if(al==true){
            alert("交卷成功！");
        }else{
            return false;
        }
}

返回顶部显示隐藏

window.onscroll = function() {scrollFunction()};
function scrollFunction() {
    if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
        $(".back-to-ceiling").css("visibility","visible");
    } else {
        $(".back-to-ceiling").css("visibility","hidden");
    }
}

解决返回顶部的滑动速度

function returntop() {
    var s=document.documentElement.scrollTop;
    // 定时器 每10ms执行一次
    var timer=window.setInterval(function (){
        // 每次走50
        s-=20;
        //  到顶部后清除定时器  必须清定时器  不然就死循环了
        if (s<0){
            window.clearInterval(timer);
        }
        window.scrollTo(0,s);
    },10);
}

头像变圆

border-radius: 50%;
overflow: hidden;

不可编辑

readonly="readonly" 不可编辑

禁止点击

disabled 禁止点击 disabled:disabled

隐藏框

<input type="hidden"/>//隐藏的输入框  hidden隐藏

form提交

form：action提交地址

line-height://行号
border-style//边框样式

圆角边框

border-radius: 100%; 圆角边框

点击跳转事件

onclick="location.href='index.jsp'"  //跳转页面

文字描述

label:文字描述

音频标签

<audio src="音频地址" controls></audio> controls:显示音频播放控件
<video src="视频地址" controls></video> controls:显示视频播放控件

背景

background:背景

//保留小数2位
var dj=price * number.value;
priceBox.innerHTML =toFixed(2);

background-color 背景颜色
background-image:url（图片地址） 背景图片
background-repeat:背景重复情况 
repeat(重复 ，默认值)
no-repeat:不重复，只有一张
repeat-x:沿着x轴重复
repeat-y：沿着y轴重复

backgroud-position:背景图片的位置
值得写法很多
1.方位名词（left，right，center，top，bottom）
background-position: center;//x,y都是center
background-position：left center;//y-left x-ceter

2.像素单位（px）
background-position: 0px;(x,y都是0px)
background-position: 0px，100px（x:0px,y:100px）

3.百分比
background-position: 100% 50%；

字体

字体
color：颜色
text-indent:2em 字体缩进 -2em字体突出
1em=14px
可以使用负数值，相当于突出
white-space：处理空白符
默认的多个空格和换行会合并成一个空格
值：
pre：不会忽略空格和换行；
nowrap：除了br换行，所有的换行都将取消 弄成一行
font-weight:字体加粗  bold加粗  100-600正常 700以上加粗
font-size:字体大小
font-family:字体样式  如宋体 微软雅黑....
text-align:字体对齐方式
text-decoration:文本效果：上划线，下划线，删除线
letter-spacing: 字体间隔

a标签

链接
4个状态：
link：未被访问的
visited:被访问过的
hover:鼠标悬停在该链接上
active：鼠标按下的时候，还没松开。
target="_black"//新开一个页面
 target="_self"//自己窗口打开

常用的属性：
text-decoration:划线情况
color：字体颜色
background-color：背景颜色

选择器+状态的写法：
选择器：状态{}
比如：  a:link{}    .a:vissted{}
四种状态的顺序：
hover必须在link和visited之后
active必须在hover之后

列表

列表
list-style-tpye:修改列表的项目符合：和tpye属性差不多，比type要丰富
list-style:none;取消前面的标记
list-style-type: circle;空心圆的标记
list-style-image: url("图片地址");图片点缀标记
list-style-position: initial;实心圆点

type ： none 无前缀  square:实心放块圆  circle 空心圆  disc 实心圆

表格的样式

1.border：表格边框的所有样式包括边框的宽度，边框的颜色，边框的线的类型
1.1 border-width：边框的宽度像素单位
1.2border-color：边框的颜色
1.3 border-style：边框的类型 ：实线，虚线，双实线，双虚线，内凹的，外凸
还可以对单独的某条边框进行设置，
border-方位名词（上右下左，top，right，bottom，left）
border-bottom: 1px solid blue;最下面的那一条边框 蓝色宽度1px
outline-width：5px 外边框的宽度
outline-style: dashed;外边框样式
outline-color: greenyellow;外边框颜色
cellspacing="0px" 边框合并
align="center" 表格居中
rowspan="2" 列合并
colspan="2" 行合并

2.border-collaspe:collaspe;将边框折叠（ 不同于属性的属性的间距）
相同点就是看上去只有一条边框了，区别：宽度不一样。折叠只有1倍border-width的宽度
colspacing-表格的宽度+单元格td的宽度
 
3.text-algin文本对齐，对应属性有
 
4.内边距：padding，对应于属性celpadding  调整边框与内容的距离
vertical-align:方位   字体向上靠
 
轮廓（不同边框，在边框的外面一层）
outline：轮廓属性
不占界面的空间

5.Visibility：元素隐藏后占位置（hidden/visible）
this.style.visibility=“hidden/visible”;

盒子模型

思想：一切皆为块

padding:内边距，内容和边框之间的部分

border：框的边框

方向：上右下左

margin：外边距，边框以外的部分 margin :0px auto居中

外边距合并：

当两个框平行的时候，他们的挨在一起的外边距会自动合并。合并的外边距的值是两个中间大的这个。

display：框的属性

值：inline ，变成一行，高度也会压缩

none:框删除，不显示，也不占位置

block：显示为块框

display: inline;变成一行高度压缩

CSS定位

position:absolute 绝对地位
position:relative 相对地位

属性position；
html稳定的布局默认是流式布局：按照元素的先后编写的顺序在网页上显示

值absolute：(a be s lu d)绝对定位。相对于包含块进行定位，会将它从原来的文档流中删除

。元素原来所占的位置空出来，后面的元素补上。

会结合top，left，right，bottom几个方位名词来确定定位元素的偏移值。

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，

那么它的位置相对于最初的包含块

值relative：相对定位，相对于它自身本来改出现的位置进行偏移

CSS浮动

float：元素向某个中心浮动到碰到边框为止

值left：向左浮动

值right：向右浮动

浮动的元素也会从原来的文档流中删除

placeholder 文本密码框通用 输入东西消失提示 如请输入密码 。。。

onblur="函数"  //失去焦点 
onfocus="函数" // 获取焦点 

伪类标签 input的
 input[type="text"]:focus{/*获取焦点*/
               border: 3px dashed green;
            }
            input[type="text"]:hover{/*鼠标悬停到输入框上*/
                background-color: palevioletred;
            }

input[type="text"]{/*框里输入文字为红色*/
                color: red;
            }

marquee 滚动字体 center居中

style="border: none ; outline: none"   去掉输入的边框

placecholder 框内隐藏文本

link:未被访问的
visited：已经访问过的
hover：鼠标悬停
active：按下没松
list-style:列表样式
border：边框
padding：内边距
border-collaspe:折叠边框
outline：轮廓

媒体标签

<audio src="音频地址" controls></audio> ：音频播放
<video src="视频地址" controls ></video>：视频播放

表单

  <!---
            表单：用户和服务器交互的控件
            表单元素form:
              属性：
                 action:url
                 表单提交的地址，表单数据发送的位置
                 metod:提交方式
                  post get
                  post:在浏览器地址栏看不到发送的数据
                  get:在浏览器上看到发送的数据

                  表单的元素 input:是什么样的组件 由type
                  type=text ：文本输入框
                    size:长度
                    maxlength:最大输入的个数
                    name:输入框的名字
                    value:默认值 获取输入框的数据
                    height:高度 通过style设置
                  type=password:密码框
                    size:长度
                    maxlength:最大输入的个数
                    name:输入框的名字
                    value:默认值 获取输入框的数据
                 type=radio 单选按钮
                    要一组单选按钮互斥 单选择按钮要有相同的name
                    checked=checked  默认
                 type="checkbox" 复选框 同一组选择多个
                    同一组复选框 name值也要
                type=reset 重置按钮
                  value 个给按钮命名

select:下拉框 <option>下拉框内容</option> selected：默认选择
            --->
<!---
             type=sumit  提交按钮
              将网页的页面跳转到action地址  value按钮上显示的文字
             type:buttom  普通按钮
              一般绑定js事件 
              type:file  文件选项
              <select>----列表
                  <option>选项一</option>
                  <option>选项二</option>
                  <option>选项三</option>
              </select>
              select属性：
                size>=2的时候显示为清单的形式
                multiple="multiple" 多选
              option属性
                selected="selected"默认选择

                <textarea></textarea>多行文本
                  属性：rows:行数
                       cols:列
                <bottom type="">

                </bottom>按钮同input
                  type属性和input相同值 submit reset button
            -->

表格合并

rowspan 行合并
colspan 列合并
 <input type="hidden"/>隐藏标

鼠标悬停变手

 button  鼠标悬停时变成手  cursor: pointer;

div宽度自适应

float: left; 设置浮动 高为自动

span自适应

width: fit-content;
width: -webkit-fit-content;
width: -moz-fit-content;

指定选择标签

first-child

first-child表示选择列表中的第一个标签。代码如下：

li:first-child{background:#090}

上面的意思是，li 列表中的第一个li模块的背景颜色。

last-child

last-child表示选择列表中的最后一个标签，代码如下：

li:last-child{background:#090}

nth-child(3)

表示选择列表中的第3个标签，代码如下：

li:nth-child(2){
  background:#090
}

H5新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

常用标签

<header>头部</header>

导航栏nav

<nav>军事 | 体育 | 财经 | 少儿 | 百度 | 友情链接</nav>

侧边栏aside

<aside>侧边栏</aside>

文章

页面的独立区域 article

<article>文章</article>

定义文档中的节（section、区段）文章中的区段 section

<article>
        <section>文章的部分 定义文章中的节</section>
    </article>

底部 footer

<footer>底部</footer>

form表单

文本框提示

placeholder="提示"

必须值自动判断是否满足input框的条件

required

获取焦点 autofocus 属性规定在页面加载时，域自动地获得焦点。

autofocus
<input type="text" placeholder="提示" autofocus />

文件上传选择多个文件 multiple

<input type="file" multiple/>

音频标签

音乐标签（audio）

<audio src="audio/苏音 _ 小奶瓶 - 最甜情歌 (DJ热播版).mp3" controls></audio>

歌曲播放

        var p=true;
        var mp3=document.querySelector("audio");//得到播放的标签
      function pof(){
        if(p){
            mp3.play();//音乐播放
        }else{
            mp3.pause();//音乐暂停
        }
        p=!p;
}

获取音乐的时长（mp3.duration）

//获取总时间
       document.querySelector("#musleng").innerHTML=mp3.duration;

播放的时间时间在动

//当音乐时间更新的时候
        mp3.ontimeupdate=function(){
            //当前时间
            var time=parseInt(mp3.currentTime);
            var m=time%60;
            if(m<10){
                m="0"+m;
            }
            var f=parseInt(time/60%60);
            var tm=f+":"+m;
            document.querySelector("#mustime").innerHTML=tm;
        }

进度条 layui

<div style="margin-top: 15px; width:300px;margin-left: 200px;">
        <div class="layui-progress" lay-filter="demo" layui-bg-blue>
          <div class="layui-progress-bar layui-bg-blue layui-font-12 "></div>
        </div>
    </div>

进度条js

layui.use('element', function(){
          var element = layui.element;
          //当前时间/总时间*100
          var ti=(time/musleng)*100+"%";
          element.progress('demo', ti);
       });

web储存

sessionStorage

（关闭浏览器就会没有）

保存数据

//保存数据 （关闭窗口会删除数据）
            sessionStorage.setItem("info1", "数据包");
            sessionStorage.setItem("info2", "嗖嘎");

取出

//取出数据
           var value = sessionStorage.getItem("info1");
           alert(value);

删除数据

//删除数据
           sessionStorage.removeItem("info2");

删除所有

//删除所有
           sessionStorage.clear();

取出下标

//取出下标
           var seleng = sessionStorage.length;
           //循环输出所有的key
           for (var i = 0; i < seleng; i++) {
               console.log(sessionStorage.key(i));
          }

保存复杂数据

//储存复杂数据 sessionStorage :不可以直接存对象 
       //保存赋值数据
       function objset() {
           var obj = new Object();
           obj.name = "张三";
           obj.age = 18;
           obj.friends = ["张三", "李四", "王五", "李云"];
           var vg = JSON.stringify(obj);//对象转换json
           sessionStorage.setItem("obj", vg);
       }

取出复杂数据

//取出复杂数据
       function objget() {
           var obj = sessionStorage.getItem("obj");
           var th = JSON.parse(obj);//json转换字符串
           console.log(th);
           console.log(th.friends[1])
       }

localStorage

移掉

localStorage.removeItem("key");

保存值

localStorage.setItem("test1", "神经病");

取值

x=localStorage.getItem("ly");

案列

var sz=[];//定义数组
 var x=localStorage.getItem("ly");
 var cnnr=JSON.parse(x);//json转字符串
 show();
 //显示方法
 function show(){
     sz=[];
     x=localStorage.getItem("ly");//取出key为ly
     cnnr=JSON.parse(x);
     if(x==null){
         return;
     }
     var dr=document.querySelector("#d1");
     dr.innerHTML="";
     for(var i=cnnr.length-1;i>=0;i--){
         var na=cnnr[i].name;
         var con=cnnr[i].nr;
         var t=cnnr[i].time;
         var h1=document.createElement("h1");
         h1.innerHTML=na;
         var h5=document.createElement("h5");
         h5.innerHTML=con;
         var sp=document.createElement("span");
         sp.innerHTML=t;
         var h4=document.createElement("hr");
         dr.appendChild(h1);
         dr.appendChild(h5);
         dr.appendChild(sp);
         dr.appendChild(h4);
         sz.push(cnnr[i]);
     }
     
 }

 //设置值
 function losave() {
     var na = document.querySelector("#name").value;
     var con = document.querySelector("#cont").value;
     var da = new Date();
     var tim = dateFormat("YYYY-mm-dd HH:MM:SS", da);
     sz.push({"name":na,"nr":con,"time":tim});
     var s=JSON.stringify(sz);//对象转json
     localStorage.setItem("ly",s);
     show();
 }
 //时间格式化
 function dateFormat(fmt, date) {
     let ret;
     const opt = {
         "Y+": date.getFullYear().toString(),        // 年
         "m+": (date.getMonth() + 1).toString(),     // 月
         "d+": date.getDate().toString(),            // 日
         "H+": date.getHours().toString(),           // 时
         "M+": date.getMinutes().toString(),         // 分
         "S+": date.getSeconds().toString()          // 秒
         // 有其他格式化字符需求可以继续添加，必须转化成字符串
     };
     for (let k in opt) {
         ret = new RegExp("(" + k + ")").exec(fmt);
         if (ret) {
             fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
         };
     };
     return fmt;
 }

canvas绘图

绘图元素

<canvas width="600" height="300" id="can1"></canvas>

绘图js

var c=document.querySelector("#can1");
var cat=c.getContext("2d");
cat.fillStyle="#01AAED";//颜色
cat.fillRect(0,0,600,300);//填充颜色

cat.strokeStyle="red";//画笔的颜色
cat.moveTo(0,0);
cat.lineTo(600,300);

cat.moveTo(600,0);
cat.lineTo(0,300);

cat.moveTo(280,200);
cat.lineTo(280,300);

cat.moveTo(320,200);
cat.lineTo(320,300);

cat.moveTo(280,300);
cat.lineTo(320,300);

cat.moveTo(280,200);
cat.lineTo(320,200);

cat.stroke();

CSS3

边框

border-radius:300px;//圆角

盒阴影

box-shadow:10px 50px 5px gray;//距离左边 距离上面 模糊 颜色

阴影云朵效果

#cloudy{
            margin-left: 600px;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background-color: cornflowerblue; /**65 -15 0 -5**/
            box-shadow:cornflowerblue 65px -15px 0px -5px,
            cornflowerblue 25px -25px,
            cornflowerblue 30px 10px,
            cornflowerblue 60px 15px 0px -10px,
            cornflowerblue 85px 5px 0px -5px;
        }

渐变

线性渐变

background-image: linear-gradient(to top,#34bee6,#2bcbdd);

渐变一个颜色开始一个结束

background-image: linear-gradient(to right,red,red 30%,green 30%,green 60%,blue 60%,blue 100%);

伪元素

before 之前 after之后

元素名称：：before 或者 after 必须要定位position 和 content

#wys2::before {
           content: '';
           width: 16px;
           height: 16px;
           position: absolute;
           background-image: url(账号.webp);
           margin-top: 3px;
       }

       label {
           position: relative;
           margin-left: 20px;
       }

透明度

opacity: 1;

2D移动

第一个参数 x 第二个y

transform: translate(500px,0px);

2D旋转

30deg=30度

transform: rotate(30deg);

2D缩放

transform: scale(1.5);

X轴旋转

变矮

transform: rotateX(70deg);

Y轴旋转

变窄

transform: rotateY(70deg);

动画过渡

所有样式都过渡15s

transition: all 15s;

宽度过渡 15s

transition: width 15s;

linear匀速 0s延时

transition: all 3s linear 0s;

动画

定义动画帧

@keyframes mydiv{
            0%{
                transform: translate(0px,0px)
            }
            25%{
                transform: translate(500px,0)
            }
            50%{
                transform: translate(500px,400px)
            }
            75%{
                transform: translate(0px,400px)
            }
            100%{
                transform: translate(0px,0px)
            }
        }

绑定动画

animation: 动画帧名字时间匀速无限

animation: mydiv 5s linear infinite;

多列

设置为三列

column-count: 3;

指定了列与列间的间隙

column-gap: 50px;

设置列边框

column-rule: 1px solid lightblue;

指定元素跨越多少列

column-span: all;//跨所有

设置列宽

设置列宽时不设列数

column-gap: 50px;

弹性布局 flex

样式为flex

display: flex;

宽度不够时会自动适应大小

反向排序

默认是左–>右

flex-direction: row-reverse;

上到下排序

flex-direction: column;

下到上排序

flex-direction: column-reverse;

让div自动换行（默认一行不换行）

flex-wrap:wrap;//换行  wrap-reverse：反转

flex-flow

是 flex-direction 和 flex-wrap的结合

flex-flow: row wrap;//行方向换行

内容对齐（justify-content）行轴对齐

右边对齐

justify-content:flex-end;

居中对象

justify-content:center;

各个值解析:

flex-start：
弹性项目向行头紧挨着填充。这个是默认值。第一个弹性项的main-start外边距边线被放置在该行的main-start边线，而后续弹性项依次平齐摆放。
flex-end：
弹性项目向行尾紧挨着填充。第一个弹性项的main-end外边距边线被放置在该行的main-end边线，而后续弹性项依次平齐摆放。
center：
弹性项目居中紧挨着填充。（如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
space-between：
弹性项目平均分布在该行上。如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。否则，第1个弹性项的外边距和行的main-start边线对齐，而最后1个弹性项的外边距和行的main-end边线对齐，然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
space-around：
弹性项目平均分布在该行上，两边留有一半的间隔空间。如果剩余空间为负或者只有一个弹性项，则该值等同于center。否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。

内容对齐（align-items）竖轴对齐

垂直对齐方式（stretch 默认值）

flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐。
stretch：如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制。

垂直上对齐

align-items: flex-start;

垂直下对齐

align-items: flex-end;

垂直居中对齐

align-items: center;

order调整顺序

默认值为0

style="order: 1;" 越小越靠前

放大平分比例

调整数值改变比例大小

style="flex-grow: 1;"

媒体查询

通过查询来对不同设备进行响应改变

max-width的大小来设置对应的样式

@media screen and (max-width: 480px) {
          body {
              background-color: lightgreen;
          }
      }
      @media screen and (min-width: 1000px) {
          body {
              background-color: gold;
          }
      }

瀑布流

原理：行当中最矮的一列

<!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>
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            padding: 15px 0 0 15px;
            float: left;
        }

        .pic {
            padding: 10px;
            border-radius: 2px;
            border: 1px solid #ccc;
            box-shadow: 0 0 10px #ccc;
        }

        .pic img {
            width: 150px;
            height: auto;
        }
    </style>
    <script>
        window.onload = function () {
            //得到所有的box
            var boxs = document.body.children;
            //得到网页的宽度
            var htmlwidth = document.body.offsetWidth;
            //得到单个box的宽度
            var boxwidth = boxs[0].offsetWidth;
            //得到一共有几列
            var cols = parseInt(htmlwidth / boxwidth);
            //保存box高度
            var boxheight = [];
            for (var i = 0; i < cols; i++) {
                boxheight.push(boxs[i].offsetHeight);
            }

            //调整第一行 后面的盒子的位置
            for (var h = cols; h < boxs.length; h++) {
                var obj = findmin(boxheight);
                boxs[h].style.position = 'absolute';
                boxs[h].style.left = obj.column * boxwidth + "px";
                boxs[h].style.top = obj.min + "px";

                //调整数组的高度
                boxheight[obj.column] += boxs[h].offsetHeight;
            }
        }

        //找出最小的高度  行数
        function findmin(arr) {
            var obj = { min: 0, column: 0 };
            obj.min = arr[0];
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] < obj.min) {
                    obj.column = i;
                    obj.min = arr[i];
                }
            }
            return obj;
        }
    </script>
</head>

<body>
    <div class="box">
        <div class="pic">
            <img src="../img/0.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/1.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/2.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/3.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/4.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/5.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/6.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/7.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/8.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/9.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/10.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/11.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/12.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/13.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/14.webp" />
        </div>
    </div>
    <div class="box">
        <div class="pic">
            <img src="../img/15.webp" />
        </div>
    </div>
</body>

</html>

窗口改变大小函数

window.onresize=function(){
          location.href=location.href;
       }

阻止表单提交

返回顶部显示隐藏

解决返回顶部的滑动速度

头像变圆

不可编辑

禁止点击

隐藏框

form提交

圆角边框

点击跳转事件

文字描述

音频标签

背景

字体

a标签

列表

表格的样式

盒子模型

CSS定位

CSS浮动

媒体标签

表单

表格合并

鼠标悬停变手

div宽度自适应

span自适应

指定选择标签

first-child

last-child

nth-child(3)

H5新特性

常用标签

头部标签header

导航栏nav

侧边栏aside

文章

form表单

音频标签

web储存

sessionStorage

localStorage

canvas绘图

CSS3

边框

盒阴影

渐变

伪元素

透明度

2D移动

2D旋转

2D缩放

X轴旋转

Y轴旋转

动画过渡

动画

绑定动画

多列

设置为三列

指定了列与列间的间隙

设置列边框

指定元素跨越多少列

设置列宽

弹性布局 flex

反向排序

上到下排序

下到上排序

让div自动换行（默认一行 不换行）

flex-flow

内容对齐（justify-content）行轴对齐

内容对齐（align-items）竖轴对齐

垂直上对齐

垂直下对齐

垂直居中对齐

order调整顺序

放大平分比例

媒体查询

瀑布流

窗口改变大小函数

羡羡

让div自动换行（默认一行不换行）