HTML 相关
关注
分享
扫一扫
文章平均质量分 60
迟早有一天，你会感谢现在努力的自己
叫我 + V
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
vue3 实现web网页不同分辨率适配
本文介绍了Vue3实现网页不同分辨率适配的方法。首先建议使用弹性盒子和百分比布局，文本大小和间距采用rem单位。推荐使用vscode的"px to rem"插件转换单位。核心实现是在页面加载时，根据当前宽度与设计宽度1920的比例动态调整html的font-size。这种方法虽简单有效，但存在两个问题：需要将现有px单位改为rem，修改工作量较大；第三方组件内部的px单位可能无法适配。该方法适合新项目采用，老项目改造需谨慎考虑成本。原创 2025-08-12 15:41:56 · 296 阅读 · 0 评论 -
vue 实现通过字符串关键字符动态渲染 input 输入框
今天做一个简单的demo，就是有一个字符串，字符串里面有标识符，前端检测到标识符之后，需要将这个标识符转换成一个 input 输入框并且进行数据输入和绑定功能。原创 2022-12-08 15:08:51 · 2561 阅读 · 13 评论 -
前端大屏页面布局经验
前端大屏页面布局经验额··· 其实谈不上经验，只能说是开发过程中值得记录一下的东西，不一定是对的。分辨率首先一点，大屏对分辨率和显示器是有要求的，因为他不像一般的页面，出个纵向的滚动条啥的无所谓，不是特殊情况下，大屏是不能出现滚动条的，所以其实不是随便一台电脑，随便一个分别率都可以使用大屏的，目前一般的分别率是 19201080100%的，但是具体得根据设计师设计图决定，还有，大屏是一般是全屏效果，就是F11电脑全屏，不加上浏览器上不标签栏、地址栏和书签栏的区域。Echarts再一个，大屏开原创 2021-10-12 11:21:00 · 6181 阅读 · 4 评论 -
vue实现div高度可拖拽
vue实现div高度可拖拽这里有一个现成的demo，可以实现页面div的拖拽功能，但是和我想要的效果不是很一样，所以说后边有根据我的实际需求又重新修改了一下，先看一下现在的demo效果。<template> <div id="eagleMapContainer" style="border: 1px solid red;overflow-y: auto;" title=""> <div id="tz" @mousedown="dragEagle" style="原创 2021-07-13 13:39:15 · 2590 阅读 · 0 评论 -
HTML table标签实现表头固定
HTML table标签实现表头固定<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div> <table cellspacing="0" border="0" cellpadding="0"> <原创 2021-06-09 16:25:06 · 2258 阅读 · 0 评论 -
Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能
Vue 实现图片监听鼠标滑轮滚动实现图片缩小放大功能其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。其实就是这种效果：其实代码不是很难。HTML代码：<img id="img" :src="src" alt="" @mousedown.prevent="dropImage" @mousewheel.prevent='gunlun' :style="{transform:'scale('+multiples+')'}">原创 2021-06-09 14:27:06 · 2683 阅读 · 1 评论 -
原生的HTML Table表格实现表头添加斜杠
原生的HTML Table表格实现表头添加斜杠其实就是实现类似的这样一个功能，但是呢，方式很多，有的要固定长宽，有的要固定大小，有的要写JS，有的要用动画，很费劲，然后从网上找了一个demo，稍微改一下就很简单的实现了，其实就几行CSS代码。废话不多说，直接上代码！HTML代码：<table style="border-collapse:collapse;" cellspacing="0" cellpadding="0"> <tbody> <tr>原创 2021-06-09 14:10:00 · 5681 阅读 · 2 评论 -
JS设置浏览器缩放比例
JS设置浏览器缩放比例因为 windows10 的操作系统，尽管是19201080的分辨率，但是发现我的页面显示是正常的，但是我同学打开说滚动条特别多，然后就特别的丑陋，尤其是出现了横向的滚动条，这个就很难让人接受，但是我这边就显示正常，核对了一下，我们用的都是19201080的分辨率，理论上是不会出现这种问题的，于是想到了可能是由于windows 操作系统缩放的问题，windows 操作系统尽管是 1920*1080，但是默认他会推荐你使用125%的缩放比例，也就是说操作系统的所有页面都被放大了，所以说原创 2020-08-27 09:31:28 · 20631 阅读 · 8 评论 -
CSS修改滚动条的样式
CSS修改滚动条的样式修改某个div的滚动条/*修改某个div的滚动条样式*/div::-webkit-scrollbar{ width:5px; height:5px; /**/}div::-webkit-scrollbar-track{ background: #fff; border-radius:2px;}div::-webkit-scrollbar-thumb{ background: #444; border-radius:10px;}div::-w原创 2020-08-26 11:36:18 · 1094 阅读 · 0 评论 -
JS代码查看浏览器页面放大比例
JS代码查看浏览器页面放大比例在做前端项目的时候会遇到这样的问题，比如说我适配的 1920*1080 100% 缩放比例，在这种情况下页面的布局展示都是OK的，但是如果用户自行修改缩放比例，那么这个页面可能会出现一些小的问题，比如错版和展示不开显示滚动条的问题，所以说我们可以在最开始的时候来使用JS代码检测一下用户有没有采用100%的比例展示页面，如果进行了缩放，检测缩放的比例是多少，可以提醒用户使用100%的缩放比例体验最好的页面效果。主要的就是一段简单的JS代码：// 检测浏览器缩放比例fu原创 2020-08-26 11:28:14 · 845 阅读 · 0 评论 -
HTML5实现div拖拽
HTML5实现div拖拽<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ht...原创 2020-03-03 19:28:49 · 1273 阅读 · 0 评论 -
HTML5 WEB 存储
HTML5 WEB 存储WEB 存储系统 - 互联网最初的设想是作为信息展示的一种方式，信息处理是后来才逐渐出现的。 - 但是 WEB 的本质没有改变，数据依然是在服务器上完成的，在客户端显示。 - 对任何程序来讲，实现数据存储是必备的功能之一，并且在需要的视乎提供数据。 - Cookie 曾经是用来存储少量的信息，但是受限于性质，智能存储简短的字符串。 ...原创 2020-02-21 17:26:45 · 280 阅读 · 0 评论 -
HTML5 SVG
HTML5 SVGSVG ·SVG （Scalable Vector Graphics - 可自由伸缩的矢量图） -是一种使用 XML 技术扫描二维图形的语言。 ·SVG 可以使用三种方式描述二维图形。 -矢量图（vector graphic shapes），例如直线或者曲线构成的路径。 -图片（Image） -文本（text...原创 2020-02-21 17:24:16 · 313 阅读 · 0 评论 -
HTML5 Chart.js 框架
HTML5 Chart.js 框架Chart.js概述：chart.js 是一个简单的、面向对象、为设计者开发者准备的图表绘制工具。点击进入官方网址 chart.js 的特点基于 HTML5 chart.js 基于 HTML5 canvas 技术，支持所有主流浏览器。 针对 IE7/IE8 提供了降级解决方案。简单灵活 chart.js 不...原创 2020-02-21 17:21:32 · 1211 阅读 · 0 评论 -
HTML5 Canvas 画布
HTML5 Canvas 画布什么是Canvas Canvas 是 HTML5 新推出的元素标签，用户图形绘制。 和所有 DOM 元素一样，拥有自己的属性、方法和事件，其中包含绘图的方法。 通过 JavaScript 脚本可以调用绘图 API 在网页上完成绘图功能。 Canvas 是 HTML5 中最强大的特性之一。 允许开发者使用动态和交互的方法，在 Web ...原创 2020-02-21 17:18:52 · 464 阅读 · 0 评论 -
HTML5 多媒体音视频处理
HTML5 多媒体音视频处理音频处理 -audioHTML5 Audio 音频 目前大多数音频是通过哦插件的形式来播放的。 不同浏览器在网页上播放音频的标准都不一样。 基于以上现状，HTML5 提供了 audio 元素在网页中嵌入音频元素。audio 元素 audio元素可以实现在HTML页面中嵌入音频内容。 audio元素的属性可以设置是否自动...原创 2020-02-21 17:14:54 · 611 阅读 · 0 评论 -
HTML5 表单元素和属性学习
HTML5 表单元素和属性学习 版权声明：未经博主授权，内容严禁转载 ！表单元素简介 无论实现提交功能还是展示页面功能，表单在HTML中的作用都十分重要。 在其他版本的HTML中，表单能够包含的元素很少，属性也不多。 再起表单验证需要写大量的 JavaScript 代码去实现。 在HTML5中，增加了许多标签和属性，为开发带来了极大的便利。表单元素 -d...原创 2020-02-21 17:12:35 · 616 阅读 · 0 评论 -
HTML 基础知识
HTML 基础知识HTML语义化标签概念如果没有语义化标签，上面这些 div 都是没有实际意义的，只是我们提供给浏览器的指令。和 语义化 代码对比：什么是语义化 1. 根据内容结构化（内容语义化）。 2. 选择合适的标签（代码语义化）. 3. 便于开发者阅读和写出更好的代码，或者让浏览器的爬虫和机器很好的解析。语义化的意义： 1.遵...原创 2020-02-20 20:12:42 · 303 阅读 · 0 评论