html页面常用样式代码示例

原创

93年的老男孩 2024-08-19 16:14:16 博主文章分类：前端 ©著作权

©著作权归作者所有：来自51CTO博客作者93年的老男孩的原创作品，请联系作者获取转载授权，否则将追究法律责任

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. 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">

6. 进度条

<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>

7. 缩略图

<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>

8.瀑布流

<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>