Web前端
关注
分享
扫一扫
文章平均质量分 72
Web前端基础
双星。
这个作者很懒，什么都没留下…
展开
-
Git的基本使用
目录一、Git是什么？二、Git的特性2.1Git的记录快照2.2 几乎所有操作都是本地执行三、Git中的三个区域3.1 工作区中文件的4种状态四、Git中的三种状态五、Git的全局配置六、Git基本命令使用6.1、git init编辑 6.2、git add6.3、git commit6.4、git status 和 git status -s七、使用Github创建和维护远程仓库7.1、远程仓库的两种访问方式7.2、SSH key7.原创 2022-05-24 15:16:52 · 873 阅读 · 1 评论 -
JS贪吃蛇练习
效果图：完整代码如下：html：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0原创 2022-03-15 10:02:27 · 146 阅读 · 2 评论 -
节流阀解决JS动画抖动问题
文章目录系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结在使用JS动画做一些练习的时候我发现在动画执行时间内快速移开鼠标时会出现动画因鼠标移动过快从而导致代码冲突让画面抖动的bug ，今天我们就来解决这个bug。示例：可以看到当鼠标慢慢移动时，动画正常执行出现和退回，但当在动画执行过程中快速移动鼠标后，画面会出现抖动的bug。以下是效果图源代码：<!DOCTYPE html><...原创 2022-03-10 15:29:11 · 1048 阅读 · 1 评论 -
JS冒泡排序
文章目录系列文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结前言算法是每一个程序员都绕不过去的坎，不管是前端还是后端，在写代码中都会用到算法，虽然对于前端来说算法暂时不用研究太深入，但基础还是要打好的，而基础算法我们就从排序算法开始学习吧，本文主要分享排序算法的入门：冒泡排序。一、冒泡排序描述冒泡排序（Bubble Sort），是一种计算机科学领域的较简单的排序算法。它重复地走访过要排序的元素列，依次比较两个相邻的元...原创 2021-12-14 15:09:25 · 330 阅读 · 10 评论 -
纯CSS实现网页侧边栏滑出滑进并停留
当我们打开网页的时候，经常都能看到上图所示的那种导航栏，鼠标一放上去就会出现一个弹窗，非常的美观和实用，那么这种效果是如何做到的呢？接下来就让我们一起来实践一下。html代码部分：<body> <div class="subnav"> <ul> <li> <div>123</div> </li> ...原创 2021-12-06 19:50:42 · 3278 阅读 · 4 评论 -
移动web之响应式布局
1.响应式开发原理响应式开发原理：就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。设备的划分情况：尺寸划分 尺寸区间 超小屏幕（手机，小于 768px） 小于768的为超小屏幕（手机） 小屏幕（平板，大于等于 768px） 768~992之间的为小屏设备（平板） 中等屏幕（桌面显示器，大于等于 992px） 992~1200的中等屏幕（桌面显示器） 大屏幕（大桌面显示器，大于等于 1200px） 大于1200的宽.原创 2021-11-23 14:35:27 · 234 阅读 · 9 评论 -
CSS渐变-圆形年轮
文章目录一、径向渐变二、重复的径向渐变三、制作步骤四、详细代码总结最近用径向渐变做了一个圆形年轮，感觉挺有意思的，分享给大家看一下。一、径向渐变径向渐变（radial-gradient）：指从一个中心点开始沿着四周产生渐变效果。语法： background：radial-gradient（起始方向，颜色1，颜色2，…）; background：-webkit-radial-gradient（left，red，blue）;（兼容性） bac...原创 2021-11-12 19:52:52 · 2477 阅读 · 8 评论 -
CSS元素的显示和隐藏
目录前言一、display二、visibility三、overflow总结前言在CSS中，隐藏和显示是我们经常会用到的方法，最常用的方法有三种：display、visibility、overflow。它们的主要目的是让一个元素在页面中消失，但并不是让它们被删除掉，比如网页中的小广告，关掉以后再次刷新页面又会重新出现。一、display要点：display元素隐藏后，不再占有原来的位置。用途：配合js做特效，比如下拉菜单，原先没有，鼠标经过显示下拉菜单，...原创 2021-10-15 10:35:57 · 788 阅读 · 2 评论 -
HTML5的新特性
目录前言一、语义化标签二、多媒体标签 1.视频标签-video 2.音频标签-audio三、新增表单属性总结前言HTML5 的新增特性主要是针对于以前的不足，增加了一些新的标签、新的表单和新的表单属性等。这些新特性都有兼容性问题，基本是 IE9+ 以上版本的浏览器才支持，如果不考虑兼容性问题，可以大量使用这些新特性。一、语义化标签 <header> 头部标签 <nav>...原创 2021-10-29 08:38:38 · 1351 阅读 · 8 评论 -
CSS定位position的层级关系问题
目录前言一、position是什么？二、position属性1.静态定位(static)2.绝对定位（absolute）3.相对定位（relative）4.固定定位（fixed）三、层级关系示例：总结 前言CSS属性一共有x、y、z三条轴，但z轴只有使用了position属性时，z轴上的层级关系才体现出来，所以z-index这个属性只有定位元素才有。 一、position是什么？position 属性规定元素的定位类型。 二、positi原创 2021-10-11 09:28:36 · 1874 阅读 · 14 评论 -
新增结构伪类选择器的使用
一、属性选择器的定义1.属性选择器，按照字面意思，都是根据标签中的属性来选择元素2.属性选择器可以根据元素特定属性的来选择元素。 这样就可以不用借助于类或者id选择器3.属性选择器也可以选择出来自定义的属性注意：类选择器、属性选择器、伪类选择器，权重为 10二、属性选择器的选择符...原创 2021-10-25 10:48:19 · 237 阅读 · 0 评论 -
CSS3 3D转换
目录前言一、三维坐标系二、3D转换3D转换知识要点：1.3D 位移：translate3d(x, y, z)2.3D 旋转：rotate3d(x, y, z)3.透视：perspctive4.3D呈现 transfrom-style总结前言我们平时生活的环境是3D的，那么如何让3D的东西在2D上呈现呢？照片就是3D物体在2D平面呈现很好的一个例子。特点：1、近大远小2、物体后面遮挡不可见当我们在网页上构建3D效果的时候参考这些特点就能产生3D.原创 2021-11-04 15:48:57 · 358 阅读 · 8 评论 -
CSS选择器，盒子模型及浮动
CSS 选择器，盒子模型及浮动文章目录CSS 选择器，盒子模型及浮动前言一、CSS选择器1.基础选择器2.复合选择器二、CSS盒模型1.组成2.圆角边框3.盒子阴影4.文字阴影三.浮动1.浮动特性2.清除浮动总结前言经过一段时间web前端的学习，我大致了解了CSS的作用，CSS是层叠样式表（Cascading Style Sheets）的简称。CSS也是一种标记语言。CSS主要用于设置HTML页面中的文本内容（字体、大小、对其方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示原创 2021-09-23 19:32:04 · 516 阅读 · 9 评论