目标：利用html+c 实现鼠标移到菜单栏时，菜单栏会缓慢出现的效果 我们可以用两种方法来解决这个问题 方法一：过渡（transition） 对forum-1开启绝对定位(absolute)，让里面的li从其父元素中脱离出去，不然会把之后的内容往右挤，并且设置overflow：hidde...[2021/3/29]

元素俩端对齐的排列布局在实际的开发当中随处可见，使用flex布局的--justify-content ： space-between即可轻松实现，但有些场景下需要考虑兼容等问题，不得不放弃flex布局，所以我们想要实现同样的效果就需要研究排版，在网络搜索了一番答案后，发现真正简单且实质性能够解决问...[2021/3/29]

文字轮播在生活中很常见，各个超市及实体店门头通常会有文字轮播的广告牌，本文详细介绍下实现逻辑。 场景 商店门头广告牌，需要通过横向移动的文字来展示公告（加边框是为了更好演示）。 逻辑说明 实现文字无限轮转的逻辑主要有两点： 文字水平移动 文字首尾相接...[2021/3/29]

今天的文章很有意思，讲一讲整块文本溢出省略打点的一些有意思的细节。 文本超长打点 我们都知道，到今天（2021/03/06），CSS 提供了两种方式便于我们进行文本超长的打点省略。 对于单行文本，使用单行省略： { width: 200px; white-space: no...[2021/3/24]

插槽内容使用方法介绍 父组件中引用支持插槽内容的子组件，形如以下(假设子组件为NavigationLink.vue) <navigation-link url="/profile"> Your Profile </navigation-link> 然后在子组件&...[2021/3/24]

前端要不要学习数据结构 　　作为一名IT技术人员，需要不断的完善自己的知识体系来提升自己，类似数据结构、网络等。在工作中大部分时间我们都是做应用层面的开发，有时候对数据结构、算法这些基本功要求不是很高，但是一些基本得知识点我们还是需要掌握。 到底什么是数据结构 　　是不是经常听别人说数据结构、...[2021/3/24]

Echarts实现图表联动（多图联动、图表间联动） 一、背景 Echarts.js目前已经提供了connect功能，只要图标的legend一样，那么就能实现联动。 下面两个链接是介绍Echarts connect的用法的。 ECharts 联动效果 官方文档中connect的使用方法 二、...[2021/3/8]

之前有些过两篇关于字体的文章，是关于如何定义字体的： 你该知道的字体 font-family Web 字体 font-family 再探秘 本文将会和这篇 -- CSS 奇思妙想边框动画类似，讲一些文字效果，利用不同的属性搭配，实现各式各样的文字动效。 Google Font 在写各种 ...[2021/3/8]

一，innerHTML innerHTML在javaScript中具有双向功能，一是可以从指定的元素对象中获取内容，二是可以把自定义内容插入到指定的元素对象中去。 定义和用法: innerHTML属性用于设置或返回指定标签之间的HTML内容 Object.innerHTML = "HT...[2021/3/8]

在很久之前的一篇文章，有讲到 -webkit-box-reflect 这个属性 -- 从倒影说起，谈谈 CSS 继承 inherit -webkit-box-reflect 是一个非常有意思的属性，它让 CSS 有能力像镜子一样，反射我们元素原本绘制的内容。 上一次写它，它的兼容性还非常非常...[2021/3/8]

各种概念 HTTP HTTP（HyperText Transfer Protocol） —— 超文本传输协议 它可以拆成三个部分：“超文本”、“传输”、“协议” 协议必须要有两个或多个参与者，也就是“协” HTTP是一个用在计算机世界里的协议。它使用计算机能够理解的语言确立了一种计算机...[2021/3/8]

代码规范 1. 概述 欢迎使用品优购代码规范， 这个是我借鉴京东前端代码规范，组织的品优购内部规范。旨在增强团队开发协作、 提高代码质量和打造开发基石的编码规范， 以下规范是团队基本约定的内容，必须严格遵循。 HTML规范 基于 W3C、苹果开发者 等官方文档，并结合团队业务和开发过程中...[2021/3/8]

正文从下面开始。 w3xue下载： 纯CSS3实现超逼真的蜡烛火焰燃烧动画效果源码 今天的小技巧是使用纯 CSS 生成火焰，逼真一点的火焰。 嗯，长什么样子？在 CodePen 上输入关键字CSS Fire，能找到这样的： 或者这样的： 我们希望，仅仅使用 CS...[2021/3/8]

在web设计中，使用一种井井有条的方法来展示数据是十分重要的，这样用户就可以很清晰的理解网站所展示的数据结构和内容，使用有序列表就是实现数据有组织的展示的一种简单方法。 如果你需要更加深入地控制有序列表数字的样式，你可能会觉得必须通过增加更多的 html DOM 结构或者通过 JavaScri...[2021/3/8]

本文主要介绍了c 圆形镂空(常用做优惠券背景图)，分享给大家，具体如下： .hollow-compose-three-circles { width: 300px; height: 100px; position: relative; background: r...[2021/3/1]

你可能经常见到下面这样的效果： 没错，就是页面上常用的“展开收起”交互形式，通常的做法就是控制display属性值在none和其他值之间切换，但是虽说功能可以实现，效果却非常生硬，所以就会有这样的一个需求 —— 希望元素在展开收起时能够有明...[2021/3/1]

1.html超文本标记语言,图片,链接,文字组成. 2.常用的浏览器:IE,火狐,谷歌浏览器.   浏览器内核:   IE      Trident   firefox Gecko   chrome&nbs...[2021/3/1]

本文其实应该叫，Web 用户体验设计提升指南。 一个 Web 页面，一个 APP，想让别人用的爽，也就是所谓的良好的用户体验，我觉得他可能包括但不限于： 急速的打开速度 眼前一亮的 UI 设计 酷炫的动画效果 丰富的个性化设置 便捷的操作 贴心的细节 关注残障人士，良好的可访问性 ... ...[2021/3/1]

盒子模型分为标准盒子模型和怪异的盒子模型 1.标准的盒模型 （content-box） 　　你设置的宽和高（width/height）是内容的部分宽高，所以盒子的实际宽度=内容的宽高+boder+padding         &nb...[2021/3/1]

封装的函数主要用于检查用户是否登录 封装一个全局函数 在main.js文件下定义checkLogin全局函数,代码的注解都在代码块里面 参数说明： backpage, backtype 2个参数分别代表： backpage : 登录后返回的页面 backtype : 打开页面的类型[1 : re...[2021/3/1]

现在实现的有基础用法、可清空、密码框，参考链接：https: element.eleme.cn/#/zh-CN/component/input        HTML代码：想要测试哪个组件，直接将对应组件解开注释即可，标红的js和c 记得修...[2021/3/1]

例如有一个输入框 <el-input ref="mySearch" cla ="mySearch" size="small" placeholder...[2021/3/1]

交集选择器 交集选择器由两个选择器直接连接构成，其中第一个选择器必须是元素选择器，第二个选择器必须是类选择器或者 ID 选择器，两个选择器之间必须连续写，不能有空格。 交集选择器选择的元素必须是由第一个选择器指定的元素类型，该元素必须包含第二个选择器对应的 ID 名或类名。交集选择器选择的元素...[2021/3/1]

1.使用浮动的方式 效果图： 代码如下：(注意，此时.content的高度是500px，即父元素的高度，但是浮动元素在 .content 上方，盖住了 .content，将 .nav背景样式改为 background-color: rgba(0,0,0,0.1);可观察到效果) ...[2021/3/1]

前言 为了按照常规WEB布局，这里全部采用拥有header和footer模式进行左中右布局编写。 第一种：基于float实现 实现思路 常规思路，使左右两个Aside分别浮动至左右两侧即可 代码实现 <!-- HTML部分 --> <div cla ...[2021/3/1]

发挥你的想象，CSS也能实现拖拽效果。 一、拖拽效果示例 这是移动端很常见的一个效果，可以按住拖来拖去，比如下面的 起点中文网 [1] 触屏版： 这类效果用JS可以很容易实现，无非就是多了一些计算，多考虑了一些临界场景，然后代码量也多了一些。不过，经过我的一番脑洞，发现CSS也能几...[2021/3/1]

CSS Position(定位) position 属性指定了元素的定位类型。 position 属性的五个值： static relative fixed absolute sticky 元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定posi...[2021/2/22]

什么是 CSS Float（浮动）？ CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。 Float（浮动），往往是用于图像，但它在布局时一样非常有用。 元素怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左...[2021/2/22]

c 解析 　　c 从右边往左开始解析，过多的嵌套会影响性能，最好不要超过三层。c 尽可能的复用代码块，减少重复代码 c 优先级 　　c Specificity中文一般译为c 优先级、c 权重。相比权重，优先级更好理解。简单理解就是一个DOM元素有多个c 样式设置，优先级高的那...[2021/2/22]

1.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。 设置到元素的宽度将防止它溢出到容器的边缘。 元素通过指定宽度，并将两边的空外边距平均分配：   .center { margi...[2021/2/22]

CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔） 相邻兄弟选择器（以加号分隔） 普通兄弟选择器（以破折号分隔） 1.后代选择器 后代选择器用于选取某元素的后代元素。 以下实例选取所有 &l...[2021/2/22]

CSS伪类是用来添加一些选择器的特殊效果。 语法： 伪类的语法: selector:pseudo-cla {property:value;}   CSS类也可以使用伪类： selector.cla :pseudo-cla {property:v...[2021/2/22]

一、CSS 伪元素 CSS伪元素是用来添加一些选择器的特殊效果。 语法 伪元素的语法： selector:pseudo-element {property:value;} CSS类也可以使用伪元素： selector.cla :pseudo-element {pro...[2021/2/22]

经常看一些 LOL 比赛直播的小伙伴，肯定都知道，在一些弹幕网站（Bilibili、虎牙）中，当人物与弹幕出现在一起的时候，弹幕会“巧妙”的躲到人物的下面，看着非常的智能。 简单的一个截图例子： 其实，这里是运用了 CSS 中的 MASK 属性实现的。 mask 简单用法介绍 ...[2021/2/22]

CSS 导航栏 垂直   水平   一、导航栏 熟练使用导航栏，对于任何网站都非常重要。 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表 作为标准的HTML基础一个导航栏是必须的 。在我们的例子中我们将建立一个标准...[2021/2/22]

目录方法一：使用flex布局方法二：使用transform将元素进行移动，必要时可将margin设为负值（需要知道元素的尺寸）方法三：通过改变父元素和子元素的position属性实现居中效果方法四：子元素设置display: inline-block，父元素设置text-align: c...[2021/2/22]

使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果。 1.基本下拉菜单 当鼠标移动到指定元素上时，会出现下拉菜单。 代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta char...[2021/2/22]

CSS 盒子模型(Box Model) 所有HTML元素可以看作盒子，在CSS中，”box model”这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 盒模型允许我们在其它元素和周围元素边框之间的空间放置...[2021/2/22]

目录如何与博主拥有同款博客园皮肤？一 、github下载源码二、在博客园的管理中做些改动1、设置2、文件上传三、效果展示 如何与博主拥有同款博客园皮肤？ 一 、github下载源码 Cnblogs-Theme-SimpleMemory git clone https: github...[2021/2/22]

目录初识HTML什么是HTMLHTML发展史HTML5的优势W3C标准常见IDEIDEA开发HTMLIDEA创建HTML文件，并用浏览器打开配置浏览器HTML基础HTML基本结构HTML注释网页基本信息网页基本标签图像标签链接标签块元素和行内元素列表标签表格标签媒体元素：音频和视频页面结...[2021/2/22]

边框样式 边框样式属性指定要显示什么样的边界。 border-style属性用来定义边框的样式 border-style的值 代码演示： <!DOCTYPE html> <html lang="en"> <head&g...[2021/2/22]

前端同学在日常开发中精彩会因为一些动效和设计争的面红耳赤，设计希望用代码实现，前端要设计出gif图，最后谁也不让谁，设计走了，留下了前端独自加班...... CSS技术是前端必须掌握的一项技能，不仅要掌握，而且要精通。现在前端框架横行的趋势，程序员写样式的机会也越来越少，组件式开发，一个页面几...[2021/2/22]

前言 通知栏组件是一个比较常见的组件了，基本上每个站点都会有怎么个组件，主要就是通告站点的一些变化或者是告知一些中奖名单等作用。 最近在复习CSS3动画部分内容，想着平时通知栏组件大部分还是用JS来实现，正好拿这块组件来当复习，下面写了三个小例子在此分享，欢迎大家观看，如有疑问，欢迎留言评论哈...[2021/2/22]

CSS组合选择符包括各种简单选择符的组合方式。 在 CSS3 中包含了四种组合方式: 后代选择器(以空格分隔) 子元素选择器(以大于号分隔） 相邻兄弟选择器（以加号分隔） 普通兄弟选择器（以破折号分隔） 1.后代选择器 后代选择器用于选取某...[2021/2/22]

div背景透明常见的有两种方法： 1. 通过opacity属性设置，取值0~1,0表示透明，1表示不透明，但是这种方法会把div上的内容也同时进行透明设置。 效果如下： 2.通过rgba格式的background-color设置，格式为：background-color:rgba(...[2021/2/22]

隐藏元素 - display:none或visibility:hidden 隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。 visibility:hidden可以隐藏某个元素，但隐...[2021/2/19]

HTML <div cla ="spinner"></div> CSS .spinner { width: 40px; height: 40px; background-color: #333;...[2021/2/19]

分组选择器 在样式表中有很多具有相同样式的元素。 h1 { color:green; } h2 { color:green; } p { color:green; } 为了尽量减少代码...[2021/2/19]

 一、网页布局思路 　　　　通过盒子模型，知道大部分html标签是一个盒子； 　　　　通过c 浮动，定位，可以让每个盒子排列成网页； 　　　　一个完整的网页是由标准流、浮动、定位一起完成布局的，每个都有自己专门的用法；   　1、网页布局准则 　　　　　　多个...[2021/2/19]

padding（填充） 当元素的 padding（填充）内边距被清除时，所释放的区域将会受到元素背景颜色的填充。 单独使用 padding 属性可以改变上下左右的填充。   可能的值 属性 描述 length 定义一个固定的填充（像素、pt、em、等） ...[2021/2/19]