css的filter
摘要：<template> <div> <div class="filter-container1"></div> <div class="filter-container2"></div> </div> </template> <script setup></script> <style scoped>
阅读全文
摘要：<template> <!-- <meta name="viewport" content="...,viewport-fit=cover"> --> <div class="safe-area-inset-bottom"></div> </template> <script></script> <
阅读全文
摘要：[TOC] ####一、tailwindcss基本使用 #####1、设置tailwind和postcss * 命令 ``` * npm init -y * npm i tailwindcss postcss-cli autoprefixer * npx tailwind init ``` + 编辑
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>flex布局处理文本溢出</title> <style> .container { display: flex; } .left, .right { flex:
阅读全文
摘要：<template> <div class="outer"> <div class="inner" v-for="item of 3" :key="item"></div> </div> </template> <script lang="ts"> import { defineComponent
阅读全文
摘要：####七、移动端 #####1、viewport <!-- - width=device-width：宽度为设备宽度 - initial-scale=1.0：初始缩放比 - user-scalable=no：禁止缩放 --> <meta name="viewport" content="width
阅读全文
摘要：####一、html #####1、文档声明与字符编码 * <!DOCTYPE html>：特殊且固定的文档声明标签 * <html lang="en">：搜索引擎优化和浏览器有帮助 - lang：文件使用的语言。浏览器的翻译此页功能与此相关 * <meta charset="UTF-8">： -
阅读全文
摘要：<template> <div style="width: 50%;height: 100%;overflow-y: auto" class="zm-scrollbar"> <div style="height: 6000px"></div> </div> </template> <script>
阅读全文
摘要：<template> <div> <form action="" class="zm-form"> <label><input type="radio" name="radio" value="pm25" checked="checked"><span>PM2.5</span></label> <l
阅读全文
摘要：<template> <div> <div id="container"> <div class="item item-1">1</div> <div class="item item-2">2</div> <div class="item item-3">3</div> <div class="i
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>自定义input[type='file']样式</title> </head> <body> <input type="file"/> <style type=
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>my-vue</title> <style> #app { width: 600px; height: 300px; overflow: auto; } tab
阅读全文
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>点划线边框</title> </head> <body> <div></div> <style> div { width: 100px; height: 100
阅读全文
摘要：一、mask <template> <div> <div class="textGradient" data-text="这是一段中文">这是一段中文</div> </div> </template> <script> export default { name: "a9" } </script>
阅读全文
摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css弹性盒骰子</title> <style> * { margin: 0; padding: 0 } div { width: 200px; height: 200px; bo
阅读全文
摘要：一、输入框自动填入背景透明 input { /*背景透明*/ background-color: transparent; /*去边框*/ border: 0; /*去外边框*/ outline: none; /*文本颜色*/ color: white; } input:-webkit-autofi
阅读全文
摘要：一、塌陷问题 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .out { width: 300px; background: re
阅读全文
摘要：一、定位居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> .out { width: 300px; height: 300px;
阅读全文
摘要：<template> <div style="height: 100%;"> <table style="table-layout: fixed"> <tr> <td style="width: 100px"> <span>这是一段中文这是一段中文这是一段中文</span> </td> <td></
阅读全文
摘要：一、服务端字体 1、下载字体文件 2、使用 @font-face { font-family: fontname; src: url("./font/fontfile.ttf"); } .div { font-family: fontname; } 二、媒体查询 @media mediatype a
阅读全文
