菜鸡的求学之路--HTML5

啥也不懂

1.存储的各种形式
2.grid布局
3.三角形
4.audio和video
5.3d实现
6.input显示已经写过的内容
7.transition
8.练习1
9.拖拽问题
10.轮播图
11.遮罩层
12.照片居中

存储样式

1. **localStorage**(本地存储):**持久化**，电脑关机，并不会消息。 2. **sessionStorage**(会话存储):**非持久化**,**浏览器一关闭**,就会消失。

grid布局

1. 首先外部的大盒子是display:grid,同时自己设置column的大小和row的大小，其次你把自己需要的东西，放到指定的位置，依靠grid-area这个玩意。

// html样式
<div>
      <div class="container">
        <div class="item-1">1</div>
        <div class="item-2">32</div>
        <div class="item-4">6</div>
        <div class="item-3">7</div>
        <div class="item-5">7</div>
      </div>
    </div>
//css样式
.container{
    // grid样式
    display: grid;
    // 3列 中间自适应
    grid-template-columns: 100px auto 100px;
    // 3行 各自的高度
    grid-template-rows: 200px 200px 200px;
    //各各区域的grid-area
    grid-template-areas:
    "header header header"
    "main slid gogo"
    "footer footer footer";
    //列之间的间隙
    column-gap: 10px;
    //行之间的间隙
    row-gap: 10px;
    //第一个grid对象
    .item-1{
      grid-area: header;
      border: 1px solid black;
    }
    //第二个grid对象
    .item-2{
      grid-area: main;
      border: 1px solid black;
    }
    //第三个grid对象
    .item-4{
      grid-area: slid;
      border: 1px solid red;
    }
    //第四个grid对象
    .item-3{
      grid-area: footer;
      border: 1px solid black;
    }
    //第五个grid对象
    .item-5{
      grid-area: gogo;
      border: 1px solid black;
    }
  }

1. 如果需要写对齐方式的话，全体的水平依赖justify，纵向依赖align-items，如果单独设置的话，依赖align-self和justify-self。

三角形

1. 简单来说就是利用伪元素加上border来进行使用。

.coco::after{
      content: '';
      position: absolute;
      right: 0;
      bottom: 0px;
      border-width: 20px;
      border-style: solid;
      上透明 右下有颜色 左透明
      border-color: transparent   rgba(240, 7, 7, 0.425)  rgba(240, 7, 7, 0.425) transparent;
      background-image: url(./五角星.png);
      background-position: 0px 1px;
      background-size: 10px 10px;
      background-repeat: no-repeat;
    }

audio和video

1. audio和video标签中间也可以写文字，这些文字是为了兼容旧版本显示不出来所写，如果不兼容，那么就显示这些字。
2. 如果video不兼容的话，可以使用object标签（引用外部资源）。
3. 如果audio不兼容的话，可以使用source标签。

3d实现

这个就是实现一个正方形从左到右从上到下得3d旋转

/* 为了实现3d就必须得有perspective */
    @keyframes rotateplane {
	0% {
		transform: perspective(120px) rotateX(0deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
		-webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
	}
	100% {
		transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
		-webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
	}

input实现已经写过的内容

id和list一样

<input type="text" list="koko">
//实现下拉出现已经用过的内容
  <datalist id="koko">
    <option  value="345"></option>
    <option  value="345"></option>
    <option  value="345"></option>
  </datalist>

transition

1. 由一个未有的，到一个现有的。只需要重新添加一个类就可以重新渲染样式。

transition：all time ease-in；

练习1

展示

1.css部分
body{
      width: 100vw;
      height: 100vh;
      /* justify-content: center;
      align-items: center; */
      background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80');
      background-repeat: no-repeat;
      background-size: cover;
      transition: 0.4s;
    }
    .mask{
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.7);
    }
    .container{
      position: relative;
      width: 70vw;
      height: 70vh;
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2),0 3px 6px rgba(0, 0, 0, 0.23);
      overflow: hidden;
    }
    .slide{
      position: absolute;
      opacity: 0;
      width: 100vw;
      height: 100vh;
      background-position: center center;
      top: -15vh;
      left: -15vw;
      transition: all 0.4s ease;
      background-size: cover;
    }
    .slide.active{
      opacity: 1;
    }
    .leftButton{
      position: fixed;
      transform: translateY(-50%);
      left: calc(15vw - 43px);
      padding: 5px;
      border: 2px solid lightcoral;
      border-right: 0;
    }
    .rightButton{
      position: fixed;
      transform: translateY(-50%);
      right: calc(15vw - 43px);
      padding: 5px;
      border: 2px solid lightcoral;
      border-left: 0;
    }
2.html部分
<div class="mask">
    <div class="leftButton">
      <img src="./xiajiantou.png" alt="">
    </div>
    <div class="container">
      <div class="slide active" style="background-image:url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); ;"></div>
    </div>
    <div class="rightButton">
      <img src="./xiajiantou.png" alt="">
    </div>
  </div>
3.js部分
const divs = document.querySelectorAll('div')
    const body = document.querySelector('body')
    divs[1].addEventListener('click',function(){
      body.style.backgroundImage = "url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80')"
      divs[3].style.backgroundImage = "url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80')"
    })

拖拽问题

样子

1.css部分
*{
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body{
      display: flex;
      width: 100vw;
      height: 100vh;
      justify-content: center;
      align-items: center;
      background-color: #4682b4;
    }
    .box{
      width: 100px;
      margin-right: 10px;
      height: 100px;
      background-color: white;
      border: 3px solid black;
      overflow: hidden;
    }
    img{
      width: 100px;
      height: 100px;
    }
    .back{
      width: 100px;
      margin-right: 10px;
      height: 100px;
      background-color: black;
      border: 3px dashed white;
      overflow: hidden;
    }
    .empty{
      width: 100px;
      margin-right: 10px;
      height: 100px;
      overflow: hidden;
      background-color: white;
      border: 3px solid black;
    }
2.html部分
<div class="box" ondrop="drop(event)" ondragover="allowDrop(event)">
    <img id="drag1" src="./9835VicmIhquvD.jpg" alt="photo" title="smile" draggable="true" ondragstart="drag(event)">
  </div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <div class="box" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
3.js部分
const divs = document.querySelectorAll('div')
    const drag1 = document.getElementById('drag1')
    function allowDrop(ev)
{
    
    ev.preventDefault();
}
 divs.forEach(item=>{
  item.addEventListener('dragenter',hidden1)
  item.addEventListener('dragleave',hidden2)
  item.addEventListener('drop',drop)
 })
function hidden1(){
  let timer = null
  clearTimeout(timer)
  timer = setTimeout(()=>{
    this.className = 'back'
  },100)
}
function hidden2(){
  let timer = null
  clearTimeout(timer)
  timer = setTimeout(()=>{
    this.className = 'empty'
  },100)
}
function drag(ev)
{
  setTimeout(()=>{
    drag1.style.display = 'none'
  },100)
  ev.target.parentNode.classList.toggle('back')
    ev.dataTransfer.setData("Text",ev.target.id);
}
 
function drop(ev)
{
    this.className = 'empty'
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    drag1.style.display = 'block'
}

拖拽问题

const ul = document.querySelector('ul')
    let index = 1
    setInterval(()=>{
      if(index>3)
      {
        index = 0
        ul.style.transition = 'none'
        ul.style.left = index * -400 + 'px' 
        index++
      }else{
        ul.style.transition = 'all 0.7s ease-in'
      ul.style.left = index * -400 + 'px' 
      index++
      }
    },2000)

遮罩层

1. 普通的就是定位
2. 通过inset属性进行遮罩层

照片居中

display:table-cell
text-align:center
vertical-align: middle;