前端知识
关注
分享
扫一扫
文章平均质量分 85
写一些前端的东西
宁在春
阿里云/InfoQ签约作者，掘金/csdn优质创作者，Java 领域的新生创作者，主要深耕于 Java 领域相关的技术。
喜爱创作，希望自己的文章能够帮助到一些伙伴，也希望能够通过创作结交到一些志同道合的伙伴。
长路修远，吾与子之共适。（长路漫漫，我们一起享受~）
一个喜欢文艺却走上编程的男孩。
望别日，与君相见时，君已有所成。
展开
-
让我们一起来看看可爱的猫咪吧
我想喜欢小猫咪的人，一定非常可爱和温柔吧前言这个视频中的小猫咪贼可爱，然后下面的那给进度条是只小猫咪走来走去的。然后我就想可以拿进度条做点事情，一开始想搜一搜借鉴一下，但是根本没有这种高度自定义的。唉经历互联网当然是无比强大的，经过千辛万苦，还是有找到类似，第一眼我就爱上了那种。图来自于：会编程的银猪我就想着怎么能够把这个小狗换成小猫咪来操作。顺藤摸瓜就找到今天的主角：lottie-web 开源动画库进入正文…Lottie 动画库官方文档它也是机缘巧合下找到的。介绍：Lo.原创 2021-11-20 11:15:13 · 697 阅读 · 0 评论 -
「后端小伙伴来学前端了」Vue集成 Element-tiptap 富文本编辑器，实现气泡菜单，划词弹出菜单
Vue集成 Element-tiptap 富文本编辑器这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战前言今天在写前端的时候，就是遇到一个问题。一开始我以为用textarea去掉角标，实现自动增长，然后就可以了。谁知道它还得加样式，加粗、斜体，老师在最开始给的设计稿上根本没有。直接麻掉。后来就去搞这个富文本编辑器。感觉前端也不容易，要学习的东西真的蛮多。功能需求是这样的就是选中文章，给它加粗，加斜体，加样式，并且选中的时候能够在上面弹出一个小菜单。为了这个气泡菜单，原创 2021-11-09 08:15:18 · 1664 阅读 · 7 评论 -
「后端小伙伴来学前端了」CSS3伪元素选择器 ::before ::after | 记录自己的前端学习日子
前言本文适合前端小白，或者是复习CSS的小伙伴，因为作者还是个前端小白（????）。一直经常会看到这两玩意，但是一直没去了解这个东东，光肝Java啦，现在是为了完成老师的任务，每天是一边学一边敲代码。个人感觉前端好玩还是好玩，样式难调也是真的难调。今天也是学到了这个小知识，趁着更文分享给大家。一、伪元素概念其实从字面意思上理解即可，伪字吗，就是假的意思。伪元素其实就是一个真的存在但又是假的元素，它存在内容，但是它本身并不存在于文档树当中，也没有任何html标签。二、我们为什么要使用伪元素？H原创 2021-11-07 17:00:18 · 516 阅读 · 0 评论 -
「后端小伙伴来学前端了」Element修改默认样式 | 记录自己学习前端踩坑日记
一、Element修改下拉框角标就比如我最近遇上的一个问题，想要重定义 element 组件库中的下拉选择框的角标，一直不知道怎么覆盖才好。最后才知道是由伪元素做的。如果我们想要重定义element中下拉框的图标，就只要将它的伪元素做一下样式的修改就好了。.el-select__caret::before{ content: "\e78f"!important; font-size: 18px;}只要替换content中的内容即可。便可以轻松换掉图标了。我的效果图二、E原创 2021-11-06 23:53:27 · 479 阅读 · 0 评论 -
「后端小伙伴来学前端了」记录自己的踩坑第一天 | CSS:vertical-align 属性
前言最近老师让大家单独写前后端分离项目，真是大家卷完后端，一起去卷前端了。（我以前都是主要负责后端，处于只大致看的懂的级别，说多了都是泪啊）。真是处于一边学一边写的状态，基本就是每天早上看上两~三小时视频（主要是复习css、js、vue框架），之后开始敲代码。只有等到晚上回到寝室才有空写写文章，复习和总结一遍。CSS：vertical-align 属性vertical-align 属性设置元素的垂直对齐方式。我们直接用案例来说明：1）代码：html代码： <div class="b原创 2021-11-04 23:53:02 · 133 阅读 · 0 评论 -
「后端小伙伴来学前端了」CSS 做三角边框，必会的基础操作之一
前言：这个也是我最近学习才发现的一个细节，就是常常会在一些网站，看到下面图中这样的一个小三角，以前没怎么学CSS，我一直以为它是个精灵图之类。????我是最近才开始认真学的前端，比纯小白稍微懂的稍微多一点点。文章如若有那些不足之处，请及时指出，在此郑重感谢。一、CSS三角做法我们先简单说一下，如何把三角画出来，懂用什么画的之后，基本就完事了。html代码：<div class="sanjiao"></div>css代码：.sanjiao { /* 为了原创 2021-11-03 09:30:50 · 219 阅读 · 0 评论 -
中秋我用CSS写了个嫦娥奔月
为了这个中秋创意我觉得我自己也是绞尽脑汁了，看到那个中秋创意的选题，我瞧了瞧Python 画图，不会，又看爬虫，行不通（乱爬听说会被邀请喝咖啡），前端页面制作，我都没写过几个????，越看越难受啊，就没啥能和我扯上关系的。最后实在无路可走了，老老实实复习CSS动画，一下一下的调，色彩搭配，翻各种网站。做完还是让人蛮开心的????最后成果如下图：这个简单的页面在很大程度上还是还原了我内心的想法，有些创意点没法实现，百度都不知道搜啥关键词????，不足之处就是在于夜空的配色调不出来自己满意的。代码演原创 2021-09-21 10:25:27 · 590 阅读 · 5 评论 -
HTML--猫眼电影---浮动练习
HTML–猫眼电影—浮动练习这次是一次回顾的练习。代码照常都是含有详细解释。效果图首先是HTML代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>猫眼电影原创 2020-05-27 14:53:44 · 1272 阅读 · 0 评论 -
二级菜单--竖排---HTML
二级菜单–竖排这是作为回顾之前学习的东西大家也可以康康作为一种回顾二级菜单 —竖 排不足的地方请大家指出来代码照常 都有详细解释效果图<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &原创 2020-05-14 22:10:19 · 6191 阅读 · 11 评论 -
重置样式表--HTML
重置样式表这就是一个简单的我自己使用的重置样式表里面的话 大多数的重置是都有啦的大家没有的可以收藏起来 拿去用html{ /* 标准字体大小可以，在移动端使用的rem适配的话会动态改变。 */ font-size:14px; /* 使用IE盒模型（个人取舍，我一般设置width是这是盒子的真实大小，包括padding和border） */ box-sizing: border-box; } html,body{ /* 在有些手机浏览器中点击一个链接或着可点原创 2020-05-13 12:46:01 · 563 阅读 · 0 评论 -
HTML---百度新闻轮播图--定位练习
HTML—百度新闻轮播图–定位练习照常是记录自己的学习 还有希望能够与大家交流分享如果那里有错误或者是不足的地方，希望大家能够在评论区指出来 都会一一回复的底下的代码都是附带详细解释的这一次的练习 是一种模仿练习 做的地方 有一些细节是与原网页是不一样的希望大家 能够谅解啦以后做的练习也会在博客上和大家一起分享对了 大家也可以一起用博客记录自己的成长经历 很赞的这是静态的效果图图的话 因为那个设置截不了 图 只能以文字的方式 描述给大家啦点进百度新闻–> 鼠标原创 2020-05-13 12:41:25 · 1333 阅读 · 0 评论 -
哔哩哔哩注册--表单练习
哔哩哔哩注册–表单练习HTML代码可能代码有些不足或者用词不当等希望大家能够见谅这是一次bilibili的注册表单练习里面都有详细注释当然一个网页有许多种 这只是其中一种 是为了相互交流希望大家喜欢<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-widt原创 2020-05-11 12:12:29 · 2060 阅读 · 1 评论