- 博客(48)
- 收藏
- 关注
RSS订阅原创 JS--用户名以及密码的检验
前言从同学的优秀作品中获得启发，照猫画虎自己写了一个demo供大家参考下。代码<div class="wrapper"> <h3>登录界面</h3> <div class="w1"> <input type="text" name='name' id='name' required placeholder="用户名" onblur="checkName()">
2021-06-16 22:44:00
1201
1
原创 CSS--input默认样式（包括自动填充，颜色，边框等属性）的清除
前言众所周知，我们在写网页的时候第一步总是要清空元素的默认样式（这些都是浏览器自己渲染的），一般就是直接引用一个重置样式表不过元素属性这么多你也不可能全部都清除掉，接下来讲的就是input默认样式的清除例子清除边框,阴影正确情况下input标签没有获取焦点时是这个样子：获取焦点后是这样子：对应清除代码如下：input{ border: none; box-shadow:none; outline: none;}这样点击的时候就没有边框等的出现！！清除自动填充我用的浏览器
2021-06-16 22:27:54
3029
原创 JS--input密码框数字显示与隐藏
前言这个是js里的一个简单应用，我们只需要搞清楚input标签的属性，详情见下图：与我们这次有关联的是password（这个是隐藏的）和text（这个是显示）<form action="#"> <input type="password" placeholder="请输入您的密码"> <img src="../img/close-eye.png" alt=""> </form>*{ m
2021-06-15 09:00:07
1052
1
原创 JS特效--字体逐渐浮现效果
前言这个特效是我看同学代码然后学会的一种JS特效，感觉还挺好玩的就跟大家分享一下，随便做一下记录！！正片开始<h1></h1>h1{ position: absolute; top: 150px; left: 620px; line-height: 70px; text-shadow: 1px 1px rgba(197, 223, 248,0.8),
2021-06-14 22:37:04
1737
3
原创 JS--session
前言我前面的文章介绍了本地存储，cookie，那么接下来要介绍的就是与cookie密切相关的session，他们四者的辨析见下文！！
2021-06-08 21:30:22
659
原创 cookie、session、localStorage和sessionStorage的区分
前言首先我按照它们存储数据位置不同划分为cookie+session，localstorage+sessionstorage俩大类，划分原因是cookie保存在浏览器端，session保存在服务器端，这两者都不是存储在本地，而后者直接保存在客户端本地了，这大大减轻了服务器端的负担，同时，也加快了访问数据的速度。先讲cookie与session存储位置cookie保存在浏览器端，session保存在服务器端机制cookie：如果不设置过期时间，cookie保存在内存中，生命周期随浏览器的关闭
2021-06-08 19:52:17
420
2
原创 JS--Cookie
前言之前学的是本地存储，然后了解到还有cookie这种存储方法，经过了解，这种方法对后面的学习有很大作用，希望大家能跟我一起开肝，羌胡！！补充一点的就是，ccokie的操作分为服务器端和客户端，这里我没有自己的服务器，所以只讲客户端的！！正题简介cookie是由服务器发送给客户端（浏览器）的小量信息。平时上网时都是使用无状态的HTTP协议传输出数据，这意味着客户端与服务端在数据传送完成后就会中断连接。这时我们就需要一个一直保持会话连接的机制。在session出现前，cookie就完全充当了这种角
2021-06-08 10:32:32
260
原创 JS--本地存储
基础认知localstorage可以说是对cookie的优化，使用它可以方便在客户端存储数据，并且不会随着HTTP传输，说到这里就要跟sessionStorage 做一下区分！！localStorage 和 sessionStorage 属性都允许在浏览器中存储 key/value 对的数据。但是localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去删除。而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。不过他们的一些方法是相似的！！使用
2021-06-07 20:36:40
237
原创 对接口数据的获取--AJAX
前言在做项目的时候，前端需要通过接口从后台那里得到需要使用且不定期更换的一些资源，而如何获取就是至关重要的一步，一般都是通过AJAX来进行这一个操作！！代码如果自己在做练习，只需要获取一两次的可以用下面这个简单点的var xmlhttp;if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); /*一般情况下，我们会使用XMLHttpRequest 来发送 HTTP 请求以实现网站和服务器之间的数据交换。*/} else {
2021-06-07 10:02:26
549
2
原创 JS--3d轮播图
前言这个是我要介绍的第三种轮播图—3d轮播图，这种轮播图在一些app里面会用得比较多，视觉效果很不错！！代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>网易云音乐轮播图实现</title> <link rel="stylesheet" href="./css/iconfont.css"> <link r
2021-06-07 09:21:31
383
原创 js--层级轮播图
前言这个是继我前面讲的水平轮播图后的层级轮播图，这个会更加实用以及没有bug！代码<div class="smallbox"> <div class="slide"> <ul class="ad"> <li> <a href="#"><img src="./img/slide1.jpg" class="slide1">&
2021-06-07 09:07:05
266
原创 CSS轮播图---水平轮播图
前言我到现在用过的轮播图就三种，分别是水平轮播图，层级轮播图以及3d轮播图，今天介绍的就是第一种水平轮播图，这个方法存在一定的bug（放缩时候会出现问题!!）代码<div class="picture"> <ul> <li> <a href="#"> <img src="./image/1.png" alt="">
2021-06-06 22:14:08
435
原创 CSS--动画特效
前言这个是转载自他人博客，我只是纯粹的从它的代码学习一些东西，然后给大家讲解下！原文代码<video src="https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/08reverse.mp4" autoplay muted></video> <h2><span>We</span> must uni<span>te a</span>gains
2021-06-01 10:33:20
152
原创 CSS新属性--mix-blend-mode
基础知识mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。可选值有：normal 正常multiply 正片叠底screen 滤色overlay 叠加darken 变暗lighten 变亮color-dodge 颜色减淡color-burn 颜色加深hard-light 强光soft-light 柔光differenceexclusionhue 色相saturation 饱和度color
2021-05-30 16:27:04
280
原创 CSS---后面学习到的属性（pointer-events）
前言这个属性我上网了解了一下，是一个十分有用的属性，大家可以更加深入的去了解一下！！基础了解该属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。可选值有：这里只挑第一个和第二个讲，因为后面都是只适用于SVG（我不会。。）auto与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同none元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时
2021-05-30 16:08:50
121
原创 CSS--一些我后面学习到的属性（object-fit）
前言这里我将会向大家介绍一些我在学习中学会的一些新属性（虽然不是特别热门但在某些情况下很好用），当然我也会不断更新！！正题object-fitobject-fit CSS 属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这里可能就有人会问了什么是可替换元素呢？我简单科普下：在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影
2021-05-30 15:43:57
114
原创 JS---对伪元素的处理
前言在之前的文章里我需要对伪元素的样式进行修改，这个时候我发现我这一块的知识是一片空白，然后我上网去查阅相关资料然后做了以下总结，如有错误还请大家多多指正！！正题js获取（这里指的是对伪元素属性与属性值的获取，不像那些querySelector()获取元素）这里第一步我们要学会获取伪元素！！*{ padding: 0; margin: 0; } body{ display: flex;
2021-05-28 11:53:44
1546
原创 CSS--创意产品卡
前言这个参考自大佬的文章原文然后做了点改进，多了些js代码<div class="card"> <div class="imgb"> <img src="./90.png" alt=""> </div> <div class="con"> <h2>JORDEN</h2> <div class
2021-05-28 11:02:23
117
原创 JS--与scroll相关的方法
前言因为之前的文章里的js有用到scroll的一些方法以及我之前学得有点快，所以我就专门写一篇文章方便自己后期的温故知新！！！基本了解首先scroll的方法大致分为两个对象：window对象和element对象，我们先看第一个再看第二个window对象下的scrollscrollX（等价于pageXOffset,兼容性好一点）window.scrollX这个方法返回文档/页面水平方向滚动的像素值。（文档被剪去的宽度）用法：var x = window.scrollX;// 如果 scr
2021-05-27 19:51:31
1422
原创 CSS--视频淡出
前言参考自大佬的文章：大佬的文章这里主要是为了实现一种鼠标往下滑，视频的透明度逐渐趋于-1的过程（就是相当于变黑的意思）代码<section> <video src="../112/077680587_main_xl.mp4" muted autoplay loop></video> </section> <section> <div class="content"> <h2>玩会
2021-05-27 15:51:22
75
原创 CSS--box-shadow
前言本文主要是简单学习下box-shadow这一属性的使用方式，如有错误请大家多多指正！！正题简介box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。参数理解X轴偏移量（h-shadow）这个值必需的，表示水平阴影的位置，允许负值正值阴影在右边，负值阴影在左边，0的时候阴影中盒子后面，看不见的，如果有blur值会有模糊效果Y轴偏移量（v-shado
2021-05-27 15:23:55
5071
原创 CSS特效--视频字幕浮现
基本原理这里首先我们要学会怎么使用transition+transform-origin+transform举个例子：<div class="b"> <div class="box"></div> </div> .b{ width: 300px; height: 300px; background-color: springgreen;
2021-05-26 12:09:30
386
原创 元素隐藏方法的异同
前言这个是我偶然间发现scale(0)也是可以隐藏元素的时候尤为好奇的问题，接下来我将通过代码的例子来阐述它们的异同！共同点这个无可置疑的它们都能起到隐藏元素的作用（这个比较简单就不做说明，有兴趣的小伙伴可以自己试一试）不同点先上代码<div class="box"></div><div class="red"></div>.box{ width: 200px; height: 200px;
2021-05-25 20:43:57
86
原创 CSS特效--波浪文本
前言本文参考一位大佬的博客，大家可以通过下方网址去查看原文原文代码（有所不同）* { margin: 0; padding: 0; } .nei { box-sizing: border-box; width: 300px; height: 65px; margin: 100px auto; pad
2021-05-25 20:11:36
190
原创 CSS特效--折叠卡片
前言这里用的主要是flex布局+过渡+基础知识点代码<div class="con"> <div class="a"> <div class="first"> <img src="../瀑布流/img/5.jpg" alt=""> </div> <div class="secon
2021-05-25 12:04:54
479
原创 CSS特效---翻转卡片
前言这个CSS特效用的是过渡与翻转的知识点，不熟悉的靓仔可以先去复习一下再来看这个特效就会比较清楚！代码<div class="big"> <div class="main"> <div class="first"> <img src="../瀑布流/img/4.jpg" alt=""> </div> <div cla
2021-05-25 10:06:22
387
原创 CSS特效--流动字体
前言这里我们要实现这一个特效需要使用新的属性——‘clip-path’，它是css3的一个强大属性，我们可以利用它来绘制各种各样的图形，不过自己写需要时间，一些常用的我们可以用生成器这里我给个网站大家如果参考下：生成器代码版块<div class="top"> <div class="con"> <h2 class="ico1">我想睡觉 啊啊啊啊</h2> <h2 class="
2021-05-25 09:25:19
757
原创 CSS---元素水平居中
前言我们在写网页的时候很多情况下都需要对元素进行居中处理，一方面是为了追求美观，另一方面也是为了产品需要，接下来我将为大家介绍几种常用的方法。（讲的几乎是水平居中，垂直居中同理可得）代码及实现第一种第一种的实现原理：设置margin值<div class="box"><div class="main"></div></div>*{ margin: 0; padding: 0; }
2021-05-24 20:28:31
94
原创 LOGO SEO 强化
前言在某些网页中，为了能让浏览器更好的搜索到该网页，就会使用logo SEO来提权！代码部分<div class="logo"> <h1> <a href="index.html" title="小米商城"> 小米商城 </a> </h1> <!-- 这里设置li就是为了提权,然后h1里面再放一个链接图片由背景
2021-05-24 19:56:49
68
原创 CSS--小三角的制作
介绍接下来我将为大家介绍CSS里各种小三角的制作，希望大家多多点赞支持一下比如说这种：还有这种：以及这种：代码及实现第一种第一种是比较简单的一种，有着比较固定的写法<div class="app"> 下载app </div>*{ margin: 0; padding: 0; } .app{ position: relative;
2021-05-24 19:36:35
280
原创 CSS--文本溢出显示省略号
前言首先这里分为单行文本溢出和多行文本溢出，关键是看你在什么情况下使用！！代码与实现单行文本实现我们创建一个ul，里面放几个li，设置好宽度然后在放入文字<ul> <li> <span>我好想睡觉啊啊啊啊啊啊啊啊啊啊啊啊</span> </li> </ul>样式ul{ width: 150px;
2021-05-24 09:44:43
266
原创 CSS--书写顺序
正题布局定位属性 display/position/float/clear/visibility/overflow自身属性 width/height/margin/padding/border/background文本属性 color/font/text-decoration/text-align/vertical-align/white-space/break-word其他属性 content/cursor/border-radius/box-shaddow/te
2021-05-23 20:22:57
50
原创 CSS--3d导航条
前言这个是过渡transition应用的一个例子,前面讲的是动画的例子！代码与讲解html部分，这里都是按照正常的ul来创建导航条<ul> <li> <div class="box"> <div class="front">1</div> <div class="bottom">2</div>
2021-05-23 20:19:46
158
原创 CSS--旋转木马
前言直接快进到用animation这个新属性来做一些动画，例如下面的3d旋转木马代码以及思路首先先做结构，放六个盒子先<section> <div></div> <div></div> <div></div> <div></div> <div></div> <di
2021-05-23 11:19:34
114
原创 CSS---重置样式表
我们在写网页的时候，浏览器会设置一些默认样式，而这些样式很多时候会影响到我们的布局（就比如那些自带内外边距等等），所以我们一般都会先引入一个重置样式表来清除默认样式！！！话不多说直接上代码：html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins,
2021-05-22 22:49:56
280
原创 开发者工具的简单使用
进入开发者工具这里有两个方法（以chorme浏览器为例）直接F12鼠标右键里面点击检查即可简单使用更改调试窗口的显示位置就是你可以调整开发者工具的位置，个人感觉第三个选项比较舒服选中需要修改的元素以及手机端的调试这里左边可以用来选择元素，右边是手机端调试盒子模型这里当你点击你要的元素时就可以通过盒子模型来查看宽高，边距等等修改设置元素的样式第一步点击左边的代码如何在右边界面进行修改这里直接双击你要修改的代码就行，这里的修改都是不会对源代码产生影响，
2021-05-22 22:45:10
3727
原创 HTML---细节
link标签很多时候我们熟知的link标签都是用来引入css文件，一般都是长这样子<link rel="stylesheet" href="">这里再谈谈它的一些其他属性：charset char_encoding HTML5 不支持该属性。 定义被链接文档的字符编码方式href URL 定义被链接文档的位置。media media_query 规定被链接文档将显示在什么设备上。rel 必需。定义当前文档与被链接文档之间的关系。sizesNew 定义了链接属性大
2021-05-22 21:02:53
67
原创 CSS浅析--单位
长度单位像素：屏幕（显示器）实际上由一个个点构成不同屏幕的像素大小不同，像素越小像素越清晰所以同样的200px在不同的设备下显示效果不同百分比也可以将属性设置为相对于其父元素属性的百分比设置百分比可以使子元素跟随父元素的改变而改变emem是相对于元素的字体大小来计算的1em=1font-size（默认是16px）em会根据大小的改变而改变remrem是相对于根元素（html）来计算对于自己没事写的demo而言，用px就行了，但到了后面需要考虑自适应等相关问题时rem+媒体查询（
2021-05-22 20:51:19
86
原创 CSS浅析--权重
前言我前面结束了那么多种选择器，如果发生了这么一种情况：多个选择器对同一个元素进行样式的修改，最终浏览器会听谁的呢？这个时候我们就需要引入权重这个概念！！正题当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置不同的值，发生样式的冲突时，应用哪个样式由选择器的权重（优先级）决定权重选择器的权重（由高到低）：内联样式 1，0，0，0 --按1000算id选择器 0，1，0，0 --100类和伪类选择器 0,0，1，0 --10元素选择器 0,0,0,1 --1通配
2021-05-22 19:11:39
78
原创 CSS浅析---选择器
前言下面知识点可能会有点多，大家坚持住，如果实在记不住多用用就熟悉了！正题一.常用选择器元素选择器：作用：根据标签名来选中指定的元素语法：标签名（）例子：p{} h1{}p{ color: red; } h1{ color: skyblue; }id选择器作用：根据元素的id属性选中一个元素语法：#id{}例子：#box{}#red{ color: red;
2021-05-22 18:52:24
166
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人