随笔分类 - html/css
1
摘要：这是我最近在 CodePen 上制作的 WebGL 演示案例。它可以捕获网络摄像头的数据（或在无法访问网络摄像头时，从 placekitten 获取备用图像），并将其实时转换为 ASCII 图像艺术。 为了获得更多的复古性，我使用了 90 年代 DOS PC 中常见的 8x8 像素光栅字体（您可能会
阅读全文
posted @ 2021-07-12 23:16
陌路y
摘要：阶段一、单机构建网站 网站的初期，我们经常会在单机上跑我们所有的程序和软件。此时我们使用一个容器，如tomcat、jetty、jboos，然后直接使用jsP/servlet技术，或者使用一些开源的框架如maven+spring+struct+hibernate、maven+spring+spring
阅读全文
posted @ 2021-07-12 23:14
陌路y
摘要：阶段一、单机构建网站 网站的初期，我们经常会在单机上跑我们所有的程序和软件。此时我们使用一个容器，如tomcat、jetty、jboos，然后直接使用jsP/servlet技术，或者使用一些开源的框架如maven+spring+struct+hibernate、maven+spring+spring
阅读全文
posted @ 2021-07-12 20:45
陌路y
摘要：1. 转义字符的写法。 在html标签中使用。 可以写多个，每有一个则会渲染出一个空格，不会像按多个空格键一样，最终只显示一个。 <div>1 2</div> // 1 2<div>1 2</div> // 1 2 注意：&和结尾的;都不能少 2.  ASCII编码的写法。 在h
阅读全文
posted @ 2021-07-12 20:43
陌路y
摘要：黑夜模式的实现方式 目前很多app，网页都支持黑夜模式，让网站看上去比较暗，亮度较低，这样对视力有一定的保护，更方便晚上阅读使用。这里就简单说下本网站的实现方式：网页右侧添加切换按钮，每次切换后都会存储cookie（需要注意切换时页面的闪烁），这样页面刷新，或者用户下次进来都会显示对应的模式。目前没
阅读全文
posted @ 2021-07-12 20:42
陌路y
摘要：一、传统的图片异常处理 <img> 如果因为网络或者跨域限制等原因无法正常加载，在默认情况下会显示浏览器默认的“裂开”的图片效果，如果设置了 alt 属性值，则 alt 属性对应的内容也会一并显示。例如： <img src="//www.zhangxinxu.com/zxx.ico" alt="鑫空
阅读全文
posted @ 2021-07-05 19:36
陌路y
摘要：在web网站开发中，有时候我们给html元素设置的margin-top或margin-bottom属性，但是无效，并没有取到任何作用,这是什么原因呢?常出现两种情况: 一、兄弟元素之间margin-top失效 先看下面代码： <div> <div class="box1"> float: left
阅读全文
posted @ 2021-07-05 19:35
陌路y
摘要：SQL 注入 在众多安全性漏洞中，SQL 注入绝对是最严重但也是最好处理的一种安全漏洞。在数据库执行查询句时，如果将恶意用户给出的参数直接拼接在查询句上，就有可能发生。 举个例子，假设原本某网站登录验证的查询句长这样： strSQL = "SELECT * FROM users WHERE (nam
阅读全文
posted @ 2021-07-05 19:34
陌路y
摘要：典型的布局示例 如上图所示的布局，方格中间有一定的间隙，间隙是固定的。应该如何布局会更加完美呢，比如要保证在布局完成的情况下，可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候，这样的布局依然能够不受影响。又不用修改太多的内容。 设置宽为100%和块元素的默认宽度 现在在这里说一个问题
阅读全文
posted @ 2021-07-05 19:33
陌路y
摘要：这个功能还比较常见，用来获取文本的长宽（避免了计算不准的问题），主要用于实现 textarea 自动变长。 可以看到在我们使用 textarea 的时候，有时候需要感知内容的高度，然后动态撑开。（elementUI 的 textarea 就提供了 autosize 的功能。） 那我们也想实现这样的功
阅读全文
posted @ 2021-07-05 19:31
陌路y
摘要：我们将使用CSS3动画过渡来创建简单但引人入胜的链接悬停效果，将鼠标悬停在链接上时，会弹出一个小弹出框。我们还将看一下CSS3 Cubic-Bezier（贝塞尔）曲线，它是CSS过渡，为弹出框提供了更加流畅的运动，而不是僵化的机械运动。 这是我们最后的效果： 让我们开始吧！ html部分 这是我们链
阅读全文
posted @ 2021-07-05 19:29
陌路y
摘要：今天介绍一个通过svg来实现移动端1px效果的小技巧 svg的描边方式 通常我们在使用一些设计软件时，描边会有三种选择，分别是内描边、居中描边和外描边，比如 photoshop 那么，svg 中的描边是哪种方式呢？ 答案是居中描边，并且无法更改，如下 <svg height="100px" view
阅读全文
posted @ 2021-07-05 19:27
陌路y
摘要：轮播图是前端最基本、最常见的功能，不论web端还是移动端，大平台还是小网站，大多在首页都会放一个轮播图效果。本教程讲解怎么实现一个简单的轮播图效果。学习本教程之前，读者需要具备html和css技能，同时需要有简单的JavaScript基础。 本实例效果如下图所示： 根据实例效果，需要的元素有图片、中
阅读全文
posted @ 2021-07-05 19:26
陌路y
摘要：方案 1 最初实现的方案是直接使用媒体查询和 css 变量。关键是把区分两个模式的变量抽离出来，分别配置两组变量，核心代码如下： @media screen and (prefers-color-scheme: dark) { :root { --linkColor: #ec9bab; --font
阅读全文
posted @ 2021-06-25 23:53
陌路y
摘要：众所周知css技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。 这就意味着有那么些个特别的
阅读全文
posted @ 2021-06-25 23:52
陌路y
摘要：先介绍一下一个有趣的属性 —— conic-gradient 圆锥渐变！ 对其感兴趣是因为我发现它竟然可以用来做圆饼图！比如这样的：这样的：其原理也很简单：就是以起始点为中心，然后以顺时针方向绕中心实现渐变效果。其必须接收多种颜色值参数，每个颜色值后可以跟两个百分比，为当前颜色值的起始点和终止点（中
阅读全文
posted @ 2021-06-25 23:50
陌路y
摘要：css3 的 calc() 函数允许我们在属性值中执行数学计算操作。例如，我们可以使用 calc() 指定一个元素宽的固定像素值为多个数值的和。 .foo { width: calc(100px + 50px); } 为什么是 calc() 如果你使用过 css 预处理器，比如 SASS，以上示例你
阅读全文
posted @ 2021-06-25 23:49
陌路y
摘要：简介 我们知道可以使用document对象的内置方法通过ID，类，标签名和查询选择器来访问html元素。 DOM 是由节点树构成的，document节点位于根，其他每个节点（包括元素，注释和文本节点）都作为各个分支的节点。 在本教程中，我们回顾一些html术语，这对使用 js 和DOM非常重要，我们
阅读全文
posted @ 2021-06-25 21:30
陌路y
摘要：AVIF 介绍 当然，目前最值得关注的新型图片格式是 AVIF（AV1 Image File Format，AV1图像文件格式，是业界最新的开源视频编码格式AV1的关键帧衍生而来的一种新的图像格式。AVIF 来自于 Netflix(著名的流媒体影视公司), 在 2020 年情人节公布。 当遇到新的技
阅读全文
posted @ 2021-06-25 21:29
陌路y
摘要：1. URL 统一资源定位符 （ Uniform Resource Locator）是对可以从互联网上得到的资源的位置和访问方法的一种简洁表示，是互联网上标准资源的地址； 互联网上的每个文件都有一个唯一的 URL ,它包含的信息指出文件的位置以及浏览器应该怎么处理它 结构 基本的 URL 包含 模式
阅读全文
posted @ 2021-06-25 21:28
陌路y
浙公网安备 33010602011771号