随笔分类 - html/css
摘要：本文介绍三个非常棒棒的css技巧，完全可以在你的项目中代替JavaScript，一起来看看这些技巧吧。 :active伪类与css数据上报 超实用超高频使用的:empty伪类 用好:only-child伪类 1. :active伪类与CSS数据上报 如果想要知道两个按钮的点击率，CSS开发者可以自己
阅读全文
摘要：最近有人提需求，产品要适配横竖屏，这就令人头秃了呀。 这在家办公也不让闲着点。虽然说需求提出来了，但是我们身为一个前端er，还是要有自己的想法呀，我们要统计一波数据看看到底有多少人在横屏使用我们的产品。demo测试地址 方案一：orientation window.addEventListener(
阅读全文
摘要：前段时间公司网页被 xss 搞了一下，微信把域名封了，通宵搞了好几天。这两天把公司好几年来的代码都改了一遍，这工作丧心病狂。 什么是 xss？ XSS 攻击指通过巧妙的方法注入恶意指令代码到网页，使用户加载并执行攻击者恶意制造的代码。 危害有什么？ 跳转到广告页面，页面注入广告等等。 导致公司域名被
阅读全文
摘要：css3的calc() 函数用于动态计算长度值。 calc()函数允许我们在属性值中执行数学操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 说明： 需要注意的是，运算符前后都需要保留一个空格，
阅读全文
摘要：前言 自定义属性（有时可以称为css变量或者层叠variables）是由css作者定义的实体，这些实体在一个document内可以被重用。一般按照自定义属性的符号设置（比如，--main-color: black；）然后使用var()函数使用。（例如color: var(--main-color)）
阅读全文
摘要：普通用户下载图片时只需一个「右键另存为」操作即可完成，但当我们做在线编辑器、整个 UI 都被自定义时，要如何赋予用户一个安全下载页面中图片功能的能力呢？ 0. 利用 <a> 标签下载资源 最简单的办法，当然是利用 <a> 标签。根据 MDN 描述， <a> 标签有一个属性叫 download ，此属
阅读全文
摘要：一、需要通过css传参的背景 css中有很多媒体查询的用法，例如设备尺寸判别，是否支持鼠标行为，是否是黑暗模式，是否是省电模式等。 比方说最近经常提到的黑暗模式，深色主题： @media (prefers-color-scheme: dark) { /* 黑暗模式，深色主题 */ } @media
阅读全文
摘要：page-break-after可以实现强制分页，比如始终在<footer>元素后插入分页符, @media print 表示这段css只在打印时起作用。 @media print { footer {page-break-after: always;} } css 语法 page-break-af
阅读全文
摘要：简单来说 src 就是 “我想加载这个资源”，而 href 就是 “我想和这个资源建立关联” src 主要用于元素替换，href 用于和相关文档和外部资源建立相关链接。href 属性说明本地Web资源和定义的资源建立了链接。 如： vi设计http://www.maiqicn.com 办公资源网站大
阅读全文
摘要：前些日子总被人问起 iOS Retina 屏，设置 1px 边框，实际显示 2px，如何解决？原来一直没在意，源于自己根本不是像素眼……今天仔细瞅了瞅原生实现的边框和css设置的边框，确实差距不小…… 上图是原生实现，下图是 css 边框，手机上对比更加明显 然后，如何解决呢？搜遍整个谷歌，发现好多
阅读全文
摘要：JavaScript 与 css 已经相生相伴 20 年了，但是要在它们之间共享数据却非常困难。当然，这方面肯定有过一些尝试，不过我想到的是简单而又直观的做法：不需要做代码结构上的改动，而是利用 CSS 自定义属性，甚至是 Sass 变量。 CSS 自定义属性 CSS 自定义属性现在也不算什么稀罕物
阅读全文
摘要：在网页的布局中几大段文字挤在一起总归是不好看的，这时候我们就需要来设置行间距来让文字看起来不拥挤，也让整个页面看起来美观整洁，那么，行间距该如何设置呢？本篇文章就来给大家介绍一下css行间距的设置方法。 html 行间距的设置方法与问题 设定一段文字内的行距： <p> 但我们怎么设定两段文字之间的行
阅读全文
摘要：了解字体的一样常识，不管做一份文档编辑还是网页开发，都是很有必要的。整齐划一，井然有序才终是大家之道。 1.字体 在文档编辑中，我们常用的是宋体，小四号字，新罗马字体，字母和数字用的是Arial字体,段落首行缩进2个字体，采用多倍行距中的1.25倍行距。 在网页开发中，普遍偏爱微软雅黑与宋体，14/
阅读全文
摘要：html文件乱码一般是因为编码格式不匹配造成的，比如：不同编码内容混杂、浏览器不能自动检测网页编码等等；但无论是哪种情况造成乱码，在html文件头中设置网页编码，匹配好编码格式就可。 下面是一个中文乱码的html： <!DOCTYPE html> <html> <body> <h1>标题</h1>
阅读全文
摘要：给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站，希望可以帮助到大家! css 相关 1. css Battle - 在线比拼 CSS https://cssbattle.dev 在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有12
阅读全文
摘要：概念 Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 步骤 1. 设置 Meta 标签 大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率，可以使用视图的meta标
阅读全文
摘要：什么是“层叠上下文” 层叠上下文(stacking context)，是html中一个三维的概念。在css2.1规范中，每个盒模型的位置是三维的，分别是平面画布上的X轴，Y轴以及表示层叠的Z轴。一般情况下，元素在页面上沿X轴Y轴平铺，我们察觉不到它们在Z轴上的层叠关系。而一旦元素发生堆叠，这时就能发
阅读全文
摘要：响应式布局等于流动网格布局，而自适应布局等于使用固定分割点来进行布局。 自适应布局给了你更多设计的空间，因为你只用考虑几种不同的状态。而在响应式布局中你却得考虑上百种不同的状态。虽然绝大部分状态差异较小，但仍然也算做差异。它使得把握设计最终效果变得更难，同样让响应式布局更加的难以测试和预测。但同时说
阅读全文
摘要：我遇到过一些人，他们根本不认为css与国际化有关，但如果你仔细想想，国际化不仅仅是把你网站上的内容翻译成多种语言，然后就收工了。该内容的呈现方式有各种细微的差别，这些细微的差别会影响到母语人士使用您的网站的体验。 对于国际化，没有统一的规范定义，但是W3C提供以下指导： 国际化是指在设计和开发产品、
阅读全文
摘要：我们都知道，一个完整的IT项目是由多个不同岗位的成员共同完成，包含UI规划、前端开发、后端开发、测验等。为了完成项目的完整性，前后端需求运用技能完成联通。不过，前后端交互技能有哪些呢？目前常用的完成前后端交互的技能有三个： 1、ajax ajax是一种用于创建快速动态网页的技能。经过在后台与服务器进
阅读全文
浙公网安备 33010602011771号