html页面常用样式代码示例

1. 浏览器默认样式处理

@charset "utf-8";
*{ padding: 0;margin: 0; border: 0; list-style-type: none; text-decoration: none; font-family: '微软雅黑','宋体';color: #333;outline:none;}

2. input checkbox 实现 switch 样式

<style>
.switch{appearance: none;display: block;width: 60px;height: 28px;background-color: #bbbbbb;border-radius: 20px;cursor: pointer;}
.switch:before{content: "";display: block;width: 20px;height: 20px;border-radius: 10px;background-color: #ffffff;margin-top: 4px;margin-left: 5px;transition: 0.2s;}
.switch:after{content: "关闭";display: block;font-size: 12px;margin-top: -20px;line-height: 20px;color: #ffffff;margin-left:28px;}
.switch:checked{background-color: #5FB878;}
.switch:checked:before{margin-left: 35px;transition: 0.2s;}
.switch:checked:after{content: "开启";display: block;font-size: 12px;margin-top: -20px;line-height: 20px;color: #ffffff;margin-left:8px;}
</style>
<input type="checkbox" class="switch"/>

3. html整屏滚动

<style>
/* 移除浏览器默认滚动条*/
html,body {margin: 0;padding: 0;height: 100%;overflow: hidden;}
/* 增加整屏滚动元素 100vh 相对浏览器窗口高度 scroll-snap-type: y mandatory; 启动水平强制捕捉 */
.scroll_box{height: 100vh;scroll-snap-type: y mandatory;overflow-y: scroll;}
/* scroll-snap-align: start;强制选中当前元素 */
.section1 {height: 100%;scroll-snap-align: start;text-align: center;line-height: 100vh;}
.section1:nth-child(odd) {background-color: #bbbbbb;}
.section1:nth-child(even) {background-color: #dddddd;}
.section2 {height: 3000px;background-color: #999999; scroll-snap-align: start;text-align: center;line-height: 100vh;}
</style>
<div class="scroll_box">
  <div class="section1">Section 1</div>
  <div class="section1">Section 2</div>
  <div class="section1">Section 3</div>
  <div class="section1">Section 4</div>
  <div class="section2">Section 5</div>
</div>

4. css两端对齐

<style>
.box{display:flex;justify-content: space-between;}
.item {height: 100%;scroll-snap-align: start;text-align: center;line-height: 100vh;}
</style>
<div class="box">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
</div>

5. css上下居中

<style>
.box{display:flex;align-items: center;}
.item{text-align: center;}
.item:nth-child(odd){background:#bbbbbb;height: 100px;line-height:100px;}
.item:nth-child(even){background:#eeeeee;height:150px;line-height:150px;}
</style>
<div class="box">
    <div class="item">item 1</div>
    <div class="item">item 2</div>
    <div class="item">item 3</div>
    <div class="item">item 4</div>
</div>

6. pc上展示手机页面

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,initial-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

7. 进度条

<div class="progress-container" id="progress-container">
  <div class="progress-bar" id="progress-bar"></div>
</div>
<style>
  .progress-container{
    width: 400px;
    height: 30px;
    border-radius: 25px;
    background-color: #e0e0e0;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.2);
    overflow: hidden;
  }
  .progress-bar{
    width: 0px;
    height: 30px;
    line-height: 30px;
    color: #ffffff;
    background-color: #5FB878;
    text-align: center;
    border-radius: 25px;
    /* transition: 0.3s; */
  }
</style>
<script>
  const container = document.getElementById("progress-container")
  
  function showBar(event){
      const bar = document.getElementById("progress-bar")
      bar.style.width= event.offsetX + "px";
      bar.innerHTML = parseInt((event.offsetX / container.clientWidth) * 100) > 8 ? parseInt((event.offsetX / container.clientWidth).toFixed(2) * 100) + "%" : "";
  }

  container.addEventListener("mousedown",(event) => {
    const bar = document.getElementById("progress-bar")
    bar.style.transition= "0.15s";
    bar.style.width= event.offsetX + "px";
    setTimeout(() => {
      bar.style.transition= "0s";
    }, 150);

    container.addEventListener("mousemove",showBar);
    container.addEventListener("mouseup",() => {
      container.removeEventListener("mousemove",showBar);
    });
    container.addEventListener("mouseleave",() => {
      container.removeEventListener("mousemove",showBar);
    });
  });
</script>

8. 缩略图

<input type="file" id="upload" class="upload">
<img src="" alt="" id="img">
<style>
  .upload{ width: 0;height: 0;}
  .upload::before{ display: inline-block; position: absolute; content: "上传文件"; width: 80px; height: 30px; line-height: 30px; text-align: center; background-color: #ccc; border-radius: 10px; cursor: pointer; }
  .upload::after{ display: inline-block; content: ""; width: 80px; height: 30px; line-height: 30px; text-align: center; background-color: #ccc; border-radius: 10px; cursor: pointer; }
</style>
<script>
  var upload = document.getElementById("upload");
  var img = document.getElementById("img");
  console.log(upload)
  upload.addEventListener("change",function(){
    // 1. 不需要后续处理 纯粹展示
    // var url = URL.createObjectURL(this.files[0])
    // img.src = url
    
    // 2. 后续需要处理 - 例如合并图片
    var fileReader = new FileReader();
    fileReader.readAsDataURL(this.files[0]);
    fileReader.onload = function(){
      img.src = url = this.result;
    }
  })
</script>

9.瀑布流

<div class="container" id="container"></div>
<style>
  .container{width: 830px; display: flex; flex-wrap: wrap; justify-content: space-between;}
  .container .item{max-width: 200px;}
  .container .item img{width: 100%; height: auto; display: block;margin-bottom: 10px;}
</style>

<script>
  var imgs = [
    "https://via.placeholder.com/500x800",
    "https://via.placeholder.com/400x300",
    "https://via.placeholder.com/200x400",
    "https://via.placeholder.com/300x500",
    "https://via.placeholder.com/800x300",
    "https://via.placeholder.com/800x700",
    "https://via.placeholder.com/600x700",
    "https://via.placeholder.com/300x200",
    "https://via.placeholder.com/900x800",
    "https://via.placeholder.com/200x500",
    "https://via.placeholder.com/900x400",
    "https://via.placeholder.com/700x700",
    "https://via.placeholder.com/900x700",
    "https://via.placeholder.com/600x700",
    "https://via.placeholder.com/900x500",
    "https://via.placeholder.com/400x200",
    "https://via.placeholder.com/500x800",
    "https://via.placeholder.com/3000x3000",
    "./1.jpg",
  ]

  function createContainerItem(url){
    return new Promise((resolve, reject) => {
      var img = new Image();
      img.src = url;
      img.onload = function(){
        resolve({width:img.width,height:img.height,src:url});
      }
      img.onerror = function(){
        reject(new Error(`Failed to load image: ${url}`));
      }
    });
  }
 
  async function showContainer(imgs,itemWidth) {
    var container = document.getElementById("container");
    var boxWidth = container.offsetWidth;
    var num = parseInt(boxWidth / itemWidth);

    var boxHeight = [];
    var itemData = [];
    for (let index = 0; index < num; index++) {
      boxHeight[index] = 0;
      itemData[index] = [];
    }

    var imgData = imgs.map(item => {
      return createContainerItem(item).catch((err) => {
        console.log(err)
        return {width:0,height:0,src:""}
      })
    });

    var itemArr = await Promise.all(imgData);
    itemArr.forEach(item => {
      if(item !== null && item.width > 0 && item.height > 0){
        var itemHeight = Math.ceil(item.height * itemWidth / item.width);
        var key = boxHeight.indexOf(Math.min(...boxHeight))
        itemData[key].push(item.src);
        boxHeight[key] += itemHeight;
      }
    });

    var html = "";
    itemData.forEach(item1 => {
      html += '<div class="item">';
        item1.forEach(item2 => {
        html += `<img src="${item2}" alt="">`;
      });
      html += '</div>';
    });
    container.innerHTML = html;
  }
  showContainer(imgs,200)
</script>

10. 通过canvas播放视频

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<canvas class="canvas" id="canvas" width="800" height="400"></canvas>
<!-- <video src="http://domain.com/test.mp4" style="display: none;"></video> -->
<button id="button">播放</button>
<style>
    .canvas{width: 800px;height: 400px;border: 1px solid #cccccc;}
</style>
<script>
    // 需要播放的视频地址
    var url = "http://domain.com/test.mp4";
    const button = document.getElementById('button');
    const canvas = document.getElementById('canvas');
    const context = canvas.getContext('2d');
    const video = document.createElement('video');
    video.src = url;
    // video.controls = "controls";
    video.crossOrigin = "anonymous";
    // document.body.appendChild(video)
    
    const width = canvas.width;
    const height = canvas.height;
    console.log(width,height)

    let s;

    function drawVideo(){
        // 先清空画布再绘制
        context.clearRect(0, 0, width, height);

        // 视频本身的宽高
        let videoWidth = video.videoWidth;
        let videoHeight = video.videoHeight;

        // 计算在canvas里面需要绘制的宽高
        let canvasVideoWitch = width;
        let canvasVideoHeight = height;
        if(videoWidth / videoHeight < width / height){
            canvasVideoWitch = parseInt(height * videoWidth / videoHeight);
        }else{
            canvasVideoHeight = parseInt(width * videoHeight / videoWidth);
        }

        // 计算canvas左上角的坐标
        let startWidth = parseInt((width - canvasVideoWitch) / 2);
        let startHeight = parseInt((height - canvasVideoHeight) / 2);

        // 在canvas里面绘制视频 1000/60 每秒钟绘制60次
        s = setInterval(function(){
            console.log(123)
            context.drawImage(video,startWidth,startHeight,canvasVideoWitch,canvasVideoHeight)
        },1000 / 60);
    }

    // 视频加载完成
    // video.onloadeddata = function(){
    //     // 默认显示第0帧的内容
    //     video.currentTime = 0;
    //     drawVideo();
    //     clearInterval(s)
    // }

    // 视频加载完成
    video.addEventListener("loadeddata",function(){
        // 默认显示第0帧的内容
        video.currentTime = 0;
        drawVideo();
        setTimeout(() => {
            clearInterval(s)
        },1000)
    })

    // 点击播放绘制 - 暂停停止绘制
    button.addEventListener("click",function(){
        if(video.paused){
            drawVideo();
            video.play()
            button.textContent = "暂停";
        }else{
            clearInterval(s)
            video.pause();
            button.textContent = "播放";
        }
    })

</script>