随笔分类 - html/css
1
摘要：pointer-events css 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: visibl
阅读全文
posted @ 2021-08-15 17:31
陌路y
摘要：前言 项目启动时 css 应该注意哪些问题 文件名规范 文件名建议用小写字母加中横线的方式。为什么呢？因为这样可读性比较强，看起来比较清爽，像链接也是用这样的方式，例如 // 地址: github的地址 https://github.com/wangjeaf/ckstyle-node 那为什么变量名
阅读全文
posted @ 2021-08-15 17:31
陌路y
摘要：css 变量技术，其兼容性可点击如下链接查看： CSS Variable兼容性 具体用法 使用 -- 声明变量，使用 var() 函数获取变量。 :root{ --header-height: 70px; } body { --color: white; } .header { height: va
阅读全文
posted @ 2021-08-15 17:30
陌路y
摘要：自适应的椭圆 1.自适应的椭圆 实现方式是通过border-radius这个属性；border-radius它可以单独指定水平和垂直半径。用 / 分隔这两个值。并且该属性的值不仅可以接受长度值，还能接收百分比的值。百分比的值会基于元素的尺寸进行解析，宽是水平半径的解析，高是垂直半径的解析。 所以可以
阅读全文
posted @ 2021-08-15 17:28
陌路y
摘要：设置滚动条的样式： div::-webkit-scrollbar { width: 0; } 关于::-webkit-scrollbar ::-webkit-scrollbar css伪类选择器影响了一个元素的滚动条的样式 ::-webkit-scrollbar 仅仅在支持WebKit的浏览器 (例
阅读全文
posted @ 2021-08-15 17:27
陌路y
摘要：最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，在这里做一个简单的总结。 inline-block是什么？ in
阅读全文
posted @ 2021-08-15 17:14
陌路y
摘要：html5是构建Web内容的一种语言描述方式。html5是互联网的下一代标准。css3是css（层叠样式表）技术的升级版本。下面我们来看一下HTML5余css3的新特性有哪些。 CSS3新特性: 1.颜色：新增RGBA，HSLA模式 2. 文字阴影（text-shadow、） 3.边框： 圆角（bo
阅读全文
posted @ 2021-08-15 17:12
陌路y
摘要：css中可以使用cursor属性设置鼠标的手势，cursor属性规定要显示的光标的类型（形状）。该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状。 css设置不同鼠标手势： <html> <body> <p>请把鼠标移动到单词上，可以看到鼠标指针发生变化：</p> <span> Auto<
阅读全文
posted @ 2021-08-15 17:10
陌路y
摘要：css设置div背景透明有两种方法：第一种使用opacity：0~1，这个方法有个缺点，就是内容也会跟着透明；第二种方法就是rgba(0,0,0,0~1)，使用这个方法就只会设置div背景透明，而不会影响到div里的内容。 一、css rgba()设置颜色透明度 语法： rgba（R,G,B,A）;
阅读全文
posted @ 2021-08-15 17:09
陌路y
摘要：新标签页中打开一个网址如何出现安全漏洞 让我们在网站上的新标签页中打开一个网址，html如下 <a href="https://malicious-domain.netlify.com" target="_blank"> 访问恶意网站！ </a> 这里我们有一个指向恶意网站的 href 属性，并以
阅读全文
posted @ 2021-08-15 17:03
陌路y
摘要：html文件乱码一般是因为编码格式不匹配造成的，比如：不同编码内容混杂、浏览器不能自动检测网页编码等等；但无论是哪种情况造成乱码，在html文件头中设置网页编码，匹配好编码格式就可。 下面是一个中文乱码的html： <!DOCTYPE html> <html> <body> <h1>标题</h1>
阅读全文
posted @ 2021-08-15 17:01
陌路y
摘要：给大家整理了 25 个前端相关的学习网站和一些靠谱的小工具，包括一些小游戏、教程、社区网站和博客，以及一些资源网站，希望可以帮助到大家! css 相关 1. css Battle - 在线比拼 CSS https://cssbattle.dev 在线比拼 CSS ，一个挺有趣的竞争性游戏，一共有12
阅读全文
posted @ 2021-08-15 17:00
陌路y
摘要：概念 Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 步骤 1. 设置 Meta 标签 大多数移动浏览器将html页面放大为宽的视图（viewport）以符合屏幕分辨率，可以使用视图的meta标
阅读全文
posted @ 2021-08-15 16:59
陌路y
摘要：响应式布局概念 Responsive design，意在实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。 经过不停地学习和实践，如今总结响应式设计的方法和注意点。其实很简单。 响应式设计的步骤 1. 设置 Meta 标签 大多数移动浏览
阅读全文
posted @ 2021-08-15 16:58
陌路y
摘要：很多人经常会对响应式布局和自适应式布局产生混淆，今天将为大家介绍这两者到底表示的是什么以及它们之间的区别。具有一定的参考作用，希望对大家有所帮助。 一：什么是响应式布局和自适应式布局 1.什么是响应式布局 响应式布局就是实现不同屏幕分辨率的终端上浏览网页的不同展示方式。通过响应式设计能使网站在手机和
阅读全文
posted @ 2021-08-15 16:57
陌路y
摘要：使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏如果给一个元素设置了display
阅读全文
posted @ 2021-07-27 15:45
陌路y
摘要：完整css代码如下 filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(10
阅读全文
posted @ 2021-07-27 15:44
陌路y
摘要：一、js设置样式的方法 1. 直接设置style的属性 某些情况用这个设置 !important值无效 element.style.height = '50px'; 2. 直接设置属性（只能用于某些属性，相关样式会自动识别） element.setAttribute('height',50); el
阅读全文
posted @ 2021-07-27 15:43
陌路y
摘要：preload 可以指明哪些资源在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载。这一机制使得资源可以更早的得到加载并可用，且更不易阻塞页面的初步渲染，进而提升性能。 preload 提供的好处主要是： 将加载和执行分离，可不阻塞渲染和 document 的 onlo
阅读全文
posted @ 2021-07-27 15:42
陌路y
摘要：1.如何将背景图像完美地适合视口 body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&a
阅读全文
posted @ 2021-07-27 15:40
陌路y
浙公网安备 33010602011771号