前端小知识

菜而不自知

已于 2024-01-12 13:53:54 修改

阅读量19

点赞数

分类专栏：前端文章标签：前端 javascript css

于 2023-02-09 16:38:02 首次发布

本文链接：https://blog.csdn.net/m0_65245884/article/details/128955616

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中清除表格排序，使用CSS实现背景图片自适应，以及理解CSS3的伪元素`:before`和`:before`的区别。此外，还展示了两栏和三栏布局的实现方法，以及HTML5插入音频和视频的代码示例，最后提到了等高布局和CSS的旋转效果。

摘要由CSDN通过智能技术生成

一键清除table的排序

this.$refs.exampleRef.clearSort();

背景图片与容器大小自适应

<style>
.contain{
    width:300px;
    height:200px;
    background:url(图片地址) center no-repeat;
    background-size:100% auto;
}
</style>

<div class='contain'>
</div>

::before和:before的区别

::before 用于css3伪元素创建一些不存在DOM树种的元素 (div::before{})

:before 用于css3伪类当已有元素处于某种状态时添加的样式（:hover ）

::before的使用

<style>
  div::before{
      content:'❤';
      color:pink;
      font-size:3px;
  }
</style>
<body>
    <div>用于伪元素</div>
</body>


:before的使用

<style>
  div:before{
      content:'❤';
      color:blue;
      font-size:3px;
  }
  div:hover{
      color:purple
  }
</style>
<body>
    <div>用于伪类</div>
</body>

效果图

两栏布局

<style>
  .fu{
      width:100%;
      height:100px;
      display:flex;
  }
  .left{
      width:200px;
      background:pink
   }
  .right{
      flex:1;
      background:yellow
   }
</style>
<body>
   <div class='fu'>
        <div class='left'></div>
        <div class='right'></div>
   </div>
</body>

效果图：

三栏布局（圣杯布局、双飞翼布局）

<style>
 .fu{
    width:100%;
    height:100px
 }
 .fu>div{
    float:left;
    height:100%;
 }
 .center{
    width:100%;
    background:pink;
 }
 .left{
    width:200px;
    background:yellow;
    margin-left:-100%
 }
 .right{
    width:200px;
    background:blue;
    margin-left:-200px
 }
</style>

<body>
    <div class='fu'>
        <div class='center'></div>
        <div class='left'></div>
        <div class='right'></div>
    </div>
</body>

效果图：

Html5插入音频audio

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

<head>
  <meta charset="UTF-8">  // 必须是utf-8
</head>
<body>
  <audio controls>  //增加一个控制按钮
    <source src='音频地址.mp3' type='audio/mpeg'/> //不同音频类型其type值不同
    <source src='音频地址.ogg' type='audio/ogg'/>
    您的设备不支持播放  //如果不支持显示此文字，否则隐藏
  </audio>
</body>
</html>

Html5插入视频video

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

<head>
  <meta charset="UTF-8">  // 必须是utf-8
</head>
<body>
     <video width="450" height="340" controls>
     <source src="jamshed.mp4" type="video/mp4">
     您的设备不支持播放
</video>
</body>
</html>

左右等高布局

两个子元素只给其中一个设置高度

<style>

//使用table
   .layout {
      display: table;
      width: 100%;
    }
   .layout div {
      display: table-cell;
    }

//使用stretch
   .layout {
      display: flex;
      align-items: stretch;
    }

//共同部分
   .layout .left {
      width: 50%;
      height: 200px;
      background: red;
    }
   .layout .right {
      width: 50%;
      background: yellow;
    }
</style>

<body>
   <div class='layout'>
          <div class='layout right'></div>
          <div class='layout left'></div>
   </div>
</body>

div旋转（rotate）单位：deg

<style>
div{
  transform:rotate(45deg)
}
div:hover{
 transform:rotate(90deg)
 tarnsition:all 1s;
}
</style>