- 博客(27)
- 收藏
- 关注
RSS订阅原创 关于 CSS backgroundImage 的几个好用的技巧
背景适配视口背景图像是我们所有前端开发人员在我们的职业生涯中使用过无数次的CSS属性之一。有事候我们总是发现图片不能很好的与浏览器视口适配，特别是职场小白很容易把兼容漏掉，在用了 background-image后，background-repeat: no-repeat，background-position: center，background-attachment: fixed，background-size: cover，属性不设置出现不适配。这时让背景图适配视口很容易，需要使用下面 CSS 即可
2020-09-20 20:00:45
859
原创 CSS3的巧妙应用
巧用 CSS 实现酷炫的充电动画知识点添加波浪效果知识点1.运用border-radius2.使用强大的 CSS 滤镜来实现安卓充电动画效果总结知识点使用 filter: hue-rotate() 对渐变色彩进行色彩过渡变换动画，而我们无法对一个渐变色直接进行 animation ，这里通过滤镜对色相进行调整，从而实现了渐变色的变换动画。我们知道，低电量时，电量通常表示为红色，高电量时表示为绿色。我们给色块添加点阴影的变化，有呼吸的感觉，让充电的效果看起来确实是在动，这是一个可以用在对要求不高
2020-09-20 19:09:02
770
原创 项目中的懒加载——随手小记
图片懒加载在一些图片密集型的网站中运用比较多，通过图片懒加载可以让一些不可视的图片不去加载，避免一次性加载过多的图片导致请求阻塞（浏览器一般对同一域名下的并发请求的连接数有限制），这样就可以提高网站的加载速度，提高用户体验。在做项目时我们需要让我们html中需要懒加载的img标签的src不设置，然后自定义一个属性，值为真正的图片或者原图的地址（比如下面的data-src），并且我们定义一个类名，表示该图片是需要懒加载的（比如下面例子的lazy-image），这有两个作用： 1、为以后获取需要懒加载图片的i
2020-09-13 22:40:51
149
1
原创 导航栏不能使用CSS3的过渡问题
项目场景：问题描述：提示：这里描述项目中遇到的问题：例如：数据传输过程中数据不时出现丢失的情况，偶尔会丢失一部分数据APP 中接收数据代码：@Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分
2020-09-13 20:17:41
194
1
原创 小白在项目中的增删改查错误逻辑（贰）
项目场景：XXX仓库货物进出记录清单之记录员添加、查找、修改、删除（谨慎使用）【增删改查】问题描述：前面我们说到了登录（注册）中的bug，在记录人员进行清单的添加、查找、修改、删除时，在记录员填写信息时，出现错误信息也进行了清单的添加、查找、修改（错误信息也发送了ajax请求），在记录员做这些前我们的程序是需要做一些逻辑判断，不能出现错误信息，这里我们就用简单的人员简单信息清单举例，在清单中人员姓名不能出现字母、数字、非法字符等（这里按照中国人人名来，后面同理【请杠精注意不要说外国人名哦 ,^
2020-08-28 19:22:26
418
原创 小白在项目中的增删改查错误逻辑（壹）
项目场景：XXX仓库货物进出记录清单之记录员登录注册问题描述：在我们进行清单的添加、查找前需要登录（每个记录员只有自己的数据不共享，第一次使用需注册），这个过程中用户名验证（用户名、密码正则验证）发送ajax请求，确认注册（登录）时错误信息注册（登录）请求发送成功，数据代码：// 注册请求$('#but').on('click',function(){ // 判断是否为空 不为空判断下一步 if($(".name").val()!=="" && $("#p
2020-08-28 18:43:10
183
原创 Bootstrap之Less
使用 LessLess 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。在Bootstrap 中的 CSS 文件是通过 Less 源码编译而来的。Less 是一门预处理语言，支持变量、mixin、函数等额外功能。对于希望使用 Less 源码而非编译而来的 CSS 文件的用户，Bootstrap 框架中包含的大量变量、mixin 将非常有价值。本人使用的识 Koala编译软件。我们先在你的项目中创建一个css
2020-08-17 19:16:32
552
原创 初识Bootstrap框架
BootstrapBootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计。Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。它支持 Sass 变量和 mixin、响应式栅格系统、自带大量组件和众多强大的 JavaScript 插件。一个框架、多种设备在 Bootstrap 的帮助下通过同一份代码快速、有效适配手机、平板、PC 设备，这一切都是 CSS
2020-08-17 18:36:47
178
原创 用ECHARTS模拟COVID-19感染统计图
ECHARTS地理数据可视化的地图2019年是不平凡的一年，因为COVID-19突然出现…现在因为国家和一群白衣天使的逆行者我们复工了。但是你有没有想过我们在严控那一段时间，COVID-19感染数据统计是以中国地图的形式展现出来的，全国不同省市区感染者不一样展现出来的地图颜色也不一样，这是怎么实现的呢？这就是 ECHARTS地理数据可视化地图了，话不多说，直接上。<!DOCTYPE html><html lang="en"><head> <me
2020-08-14 18:41:53
261
转载 一款中国人开发的数据展示图表ECHARTS
ECHARTSecharts特性丰富的可视化类型千万数据的前端展现在如今大数据分析时代，密密麻麻的数据需要我们去分析时总会眼花缭乱，这时各种表格不能满足我们需求时，图表（echarts）应运而生，echarts一款开源免费，遵循 Apache-2.0 开源协议，免费商用；功能丰富，涵盖各行业图表，满足各种需求。只需把API调用就可以根据需求来实现所需的图表，把密密麻麻的数据清晰清楚的展现出来。echarts特性ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC
2020-08-14 18:17:49
449
原创 jQuery实例方法与DOM操作【壹】
jQuery实例方法与DOM操作get()eq()find()filter()get()get([index])[index] Number 取得第 index 个位置上的元素。从0开始，返回的是DOM对象，类似的有eq(index),不过eq(index)返回的是jQuery对象。这能够让你选择一个实际的DOM 元素并且对他直接操作，而不是通过 jQuery 函数。(this).get(0)与(this).get(0)与(this).get(0)与(this)[0]等价。比如：<
2020-07-31 00:13:18
65
原创 我待jQ如初恋，jQ虐我千百遍
jQuery入门基础jquery是什么？jquery的优势jquery底层jquery是什么？jQuery 就是一个 JavaScript 库。里面封装了一堆的js函数，各种各样的js插件，是一个“写的更少，但做的更多”的轻量级 Js 库。基本上，会用到如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等任务。应用不难，但是原理不简单。注意：1.jQuery只是一个辅助工具，不能完全代替js，jquery实现不了，还是得用原声js实现，jquery和js是并存出现在项目中2.
2020-07-28 20:45:56
106
原创 不用借助JavaScript的CSS3动画
CSS3动画animation 动画CSS3 动画属性CSS3 动画用法动画效果animation 动画通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。在CSS3 中创建动画，您需要学习 @keyframes 规则，在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。下面两张图片就是纯CSS3写出来的，没有借助js和图片。CSS3 动画属性属性 描述 CSS@keyframes ：规定动
2020-07-23 21:21:57
202
原创 炫酷的css3
CSS3文字效果边框文字效果在CSS2.1时代，想要为文字添加阴影，来达到炫酷的效果，除非使用图片，否则无法为文字添加阴影效果。而现在CSS3为我们提供了可以为文字添加阴影，不再需要把文字变成图片再来做出效果，可以直接添加效果。我通过新属性;text-shadow :[颜色] 水平偏移（数值为正是向上，为负时向下） 纵向偏移（数值为正是向右，为负时向左） [模糊半径]（在chrome中还会影响字体清晰度，其它正常）其中颜色和模糊半径是可选值。颜色未指定时，将和文本颜色一致;模糊半径未指定
2020-07-21 23:55:39
135
原创 聊聊HTML5 Canvas 2D
Canvas 2D1、什么是Canvas2、Canvas 2D原理3、Canvas 2D特效1、什么是CanvasCanvas,意思就是画布。主要用于图形表示、图表绘制、游戏制作等。运用到web中网页内容会更加丰富，效果更加炫目。主要特征有：。就像传统的荧幕，可宽、可长，就是不能圆，它是一个矩形。。canvas需要使用JavaScript在web上绘制各种图形。。canvas中的每一个像素都可控，即所谓的像素级操作。。可以拥有多种绘制路径，矩形、圆形、字符以及添加图片等。。canvas不需要插
2020-07-16 19:45:26
391
原创 关于html5的Web存储
在HTML5之前，主要是使用cookies存储，cookies的缺点有：需要在请求头上带着数据，存储大小在4k之内。而HTML5 web 存储，是一个比cookie更好的本地存储方式。HTML5在客户端存储数据的两个对象为：1、localStorage - 没有时间限制的数据存储，第二天、第二周或下一年之后，数据依然可用；2、sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除。我们在使用 web 存储前,应检查浏览器是否支持 localSto
2020-07-14 19:47:43
210
原创 今天正在摸鱼时公司新来的试用期妹纸问我怎么写轮播图
今天本来正在舒服的摸鱼时公司新来的试用期妹纸问我怎么写轮播图，我就把我知道的都分享出来了。上代码//html<div class="banner" id="main"> <ul id="pic"> <li><a href="#"><img src="img/banner03.jpg" alt="" width="1020px" height="360px"/></a></li> <li
2020-07-08 23:45:43
477
原创 收货地址的JavaScript城市三级联动【干货拿走不谢！＞_＜】
城市三级联动在我们网上购物时会有收货地址一栏让我们选择收货地址，当中有省、市、区等选择项，如下图：在添加收货地址时我们会先选择省再选市最后选所在区，这些都是下拉列表式的选择，选择完成才会填写具体地址。这时在我们平时练习时，代码如下：//html 省：<select name="" id="sname" > <option value="">----请选择----</option> <option value=""&
2020-07-06 19:45:10
2970
5
原创 夕阳落山图（js 夕阳下山）
直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>夕阳落山图</title> <style> #xy{
2020-06-23 20:04:18
243
原创 HTML5通过Geolocation接口获取用户地理位置信息
//直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>获取位置</title></head><body> <p>
2020-06-18 20:34:35
213
原创 第三方接口调用
接口调用 //jQ 文件根据需要自己引入//css样式 </tr> <tr> <td>城市</td> <td class="chengshi"></td> </tr> <tr> <td>省份</td> <td class=...
2020-06-18 20:28:24
253
原创 JS增删改查（1）———之增查
车辆管理系统 </tr> <tr> <td> <button onclick="but()" name="car" id="car"> 1、添加车辆 </button> </td> <td> <button o...
2020-06-02 20:34:22
126
原创 java script document.write()表格制作
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>作业一</title></head><body><script...
2020-05-25 20:23:55
1949
原创 HTML+CSS网页编辑一
Document .id{width: 55%;}.nav{width: 900px;height: 200px;border: 1px solid red;background-image: url(ps/效果图_01.png);background-size: 900px 200px;}.sp{background-color: rgb(235, 226, 226);text-align: center;height: 200px;}...
2020-05-14 20:36:20
246
原创 2020.5.12第一次博客
作业 彼岸の花 偏安一隅 静静生活 商品分类> 我喜欢一些花儿，静静地开放，从不声张。小小的花朵，有着异样的芬芳... ...
2020-05-12 21:15:37
621
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人