随笔分类 - html/css
摘要：font-size:字体大小 说明 用于设置字号，属性的值推荐使用像素单位px或者em px是像素单位，em是相对单位 语法 {font-size:12px;} 注意 属性值为数值型时，必须给属性值加单位，属性值为0时除外。 单位还可以是1em ，根据父元素值来确定； font-family:字体
阅读全文
posted @ 2021-07-27 14:34
笑人
摘要：一、什么是两列布局 两列布局分为两种，一种是左侧定宽、右侧自适应，另一种是两列都自适应（即左侧宽度由子元素决定，右侧补齐剩余空间）。在css面试题里面属于常考题，也是一个前端开发工程师必须掌握的技能，下面将分别介绍实现方式。 二、左侧定宽、右侧自适应如何实现？ 1.双inline-block 原理：
阅读全文
posted @ 2021-07-27 14:31
笑人
摘要：多语言版静态网页，通常都是先做一个语言的网页，比如中文版，或英文版，然后找人翻译成另一种语言，最后合作一起，上传到网页服务器。 这种方法，在后续的改动时，往往容易改了一个语言的网页、遗漏了另一个语言的网页更改；或者翻译多语言时，一不小心误删除了某个网页的某个部分，或者多键入了无关的字符，造成多个语言
阅读全文
posted @ 2021-07-27 14:30
笑人
摘要：在之前某一个前端技术群里，有一个群友说他面试的时候遇到了一个问题，就是面试官让他用纯 css 来实现一个根据鼠标移动位置觉得物体移动方向的 DEMO。 给出的初始结构如下： <style>body { padding: 2em; text-align: center;}.block { positi
阅读全文
posted @ 2021-07-27 14:29
笑人
摘要：优秀的网站要对用户的互动做出反应。做到这一点的一个很好的方法就是对有人向下滚动你的页面做出反应。 除了视差组件和滚动事件外，添加响应式触摸的一种好方法是使元素在滚动视图时淡入。 在本技巧中，将介绍如何使用滚动事件和css转换在vue3中实现此功能。 这是我们将学习如何在本教程中进行构建的屏幕截图。
阅读全文
posted @ 2021-07-27 14:28
笑人
摘要：生活中有很多事情是低效益，重复性。比如每天上某些网站，先登录再签到打卡，比如每隔一段时间清理回收站的文件等等。一个成熟的软件工程师应该想到用软件解决他。 对于这些简单的小任务，一般用脚本实现。比如Python脚本或者JavaScript脚本等等，不过还得装运行环境。如果能在电脑上直接用就好了，那么有
阅读全文
posted @ 2021-07-27 14:26
笑人
摘要：本节我们学习 Less 中的嵌套，嵌套应该很容易理解，html 语言中就支持标签的嵌套。我们在使用 css 时，如果想要为多层嵌套的元素设置样式，要么给元素加上一个类选择器或ID选择器，要么使用后代选择器。例如： .xkd{ font-size: 14px; } .xkd p{ line-heigh
阅读全文
posted @ 2021-07-27 14:25
笑人
摘要：每次滚动到元素时，都显示加载动画，如何添加？ 元素添加初始参数 以上图中的动画为例，添加俩个左右容器，将内容放置在容器内部。 添加初始数据，默认透明度0、左右分别移动100px。 //左侧容器 .item-leftContainer { opacity: 0; transform: translat
阅读全文
posted @ 2021-07-27 14:24
笑人
摘要：现在，Safari（技术预览版106）和Firefox（版本78）的预览版均支持新的css :is() 和 :where() 伪类。 Chrome的实施仍然落后。 使用 :is() 减少重复 你可以使用 :is() 伪类来删除选择器列表中的重复项。 /* BEFORE */ .embed .save
阅读全文
posted @ 2021-07-27 14:23
笑人
摘要：一 . 安装 在命令行中执行： 使用npm或者cnpm安装 npm install animate.css --save 或 cnpm install animate.css --save 使用yarn安装 yarn add animate.css 二. 引入 在main.js全局引入 import
阅读全文
posted @ 2021-07-27 14:21
笑人
摘要：我们学习 html 的时候学过一些用于字体加粗、倾斜的标签，但是使用标签来实现的效果肯定没有我们通过 css 中的样式来的方便。 接下来我们会给大家介绍下面这几个属性的使用： 属性描述 font-family 设置元素的字体 font-size 设置字体的大小 font-style 设置字体的风格
阅读全文
posted @ 2021-07-12 20:08
笑人
摘要：狸猫换太子 北宋真宗时，有李妃和刘妃两位小主都有了龙种，谁生了儿子，谁就能豪横。谁曾想刘妃不是个善茬，把剥了皮的狸猫换了李妃刚生完的孩子。天可怜见，执行任务的宫女人性未泯，将孩子送往八贤王处抚养，这才引出后来，包拯陈州放粮救李妃，仁宗认母家团圆。那位说了，好好的谈装饰器模式这怎么说上故事了。各位看官
阅读全文
posted @ 2021-07-12 20:07
笑人
摘要：一、什么是BFC？ BFC是页面上的独立渲染区域 二、BFC产生规则 1、根标签(body) 2、float的值不为none 3、overflow的值不为visible 4、display的值为inline-block 5、position的值为absolute或fixed 三、BFC的特性 1、垂
阅读全文
posted @ 2021-07-12 20:05
笑人
摘要：1. svg 文件模板 SVG 的相关知识可以在 SVG | MDN (mozilla.org) 学习。为了生成完整的 svg 文件，为其准备了一个文件模板字符串： // svg 文件模板 const svgTemplate = `<svg xmlns="http://www.w3.org/2000
阅读全文
posted @ 2021-07-12 20:04
笑人
摘要：css背景缩写属性可以在一个声明中设置所有的背景属性,css背景图像支持引入多个图像. 主要属性有:background-color,background-image,background-repeat,background-position,background-attachment,backgr
阅读全文
posted @ 2021-07-12 20:03
笑人
摘要：Mac OS 系统上，在获得焦点程序的周边，有一层浅灰色外阴影，使得应用程序看起来略带立体感；其阴影渐进变淡，与背景色融合在一起，也使得看起来流畅自然，不突兀。在一些优质博文中，所搭配的图片，也经常能看到这样的设计，增色不少。那如何为文章图片，添加好看的外阴影效果呢？本文即对此做出一些探讨。 对于这
阅读全文
posted @ 2021-07-12 20:01
笑人
摘要：XML概述： XML英文全写为eXtensible Markup Language（称之为 可拓展的标记语言），它是由W3C制定出来的一套关于 数据传输，使传输的数据内容统一 的规范；它是跨平台并且与软硬件无关的工具，开发中经常用于去配置文件。 解析XML的几种方式： XML的解析方式分为四种：DO
阅读全文
posted @ 2021-07-12 20:00
笑人
摘要：fillStyle 属性设置或返回用于填充绘画的颜色、渐变或模式。 浏览器支持 Internet Explorer 9、Firefox、Opera、Chrome 和 Safari 支持 fillStyle 属性。 注意：Internet Explorer 8 及之前的版本不支持 <canvas> 元
阅读全文
posted @ 2021-07-12 19:57
笑人
摘要：用一个css属性创建一个响应式网站，让我们来看看它是如何做到的。以这个模板为例，没有应用css属性。 使用 clamp() CSS函数，我们可以创建仅具有一个属性的响应式网站。 现在添加魔术CSS clamp(minimum, preferred, maximum); 在这里！你已经完成了 http
阅读全文
posted @ 2021-07-12 19:56
笑人
摘要：前端模块化 JavaScript 在早期的设计中就没有模块、包甚至类的概念，虽然 ES6 中有了 class 关键字，那也只是个语法糖。随意随着项目复杂度的增加，开发者必然需要模拟类的功能，来隔离、封装、组织复杂的 JavaScript 代码，而这种封装和隔离，也被被我们称之为模块化。 模块就是一个
阅读全文
posted @ 2021-07-12 19:55
笑人
浙公网安备 33010602011771号