- 博客(400)
- 收藏
- 关注
RSS订阅原创 web前端入门到实战：css绘制各种形状图形
虽然我们现在大都使用字体图标或者svg图片，似乎使用 CSS 来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。一、实心圆.circle { width: 120px; height: 120px; background: #8BC34A; border-radius: 100%;}二、圆环（空心圆）.ring {...
2019-11-03 21:59:59
2073
原创 web前端入门到实战：CSS3 filter（滤镜）属性
css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。一、blur(px)高斯模糊二、brightness(%)亮度三、contrast(%)对比度四、drop-shadow()阴影注意： 这个 drop-shadow 与 box-shadow 都是在说阴影，但还是有区别的，看下图...
2019-11-03 21:59:55
1189
原创 web前端入门到实战：纯css3漂亮的checkbox和radio美化效果插件Pretty.css插件
插件介绍pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和radio进行美化，还可以制作按钮点击时的动画效果。浏览器兼容性教程pretty.css是一款纯css3漂亮的checkbox和radio美化效果。pretty.css可以和多种字体图标结合使用，对原生的checkbox和ra...
2019-11-03 21:59:50
1635
原创 web前端入门到实战：CSS单位讲解
像 px、rem、em、% 这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3 又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。单位作用特性px页面按精确像素展示绝对单位rem相对根节点html字体大小来计算相对单位em基准点为相对父节点字体的大小相对单位%相对于父元素的大小设定的比率相对单...
2019-11-03 21:59:49
382
原创 web前端入门到实战：css实现文字竖排的方式
html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列.onecn{ width: 20px; margin: 0 auto; line-height: 24px; }.oneen{ width: 15px; margin: 0 auto; line-height: 24px; ...
2019-11-02 21:59:54
1827
原创 web前端入门到实战：总结清除浮动的方法
方法一、在结尾处添加空div标签clear:both在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.<div class="box"> <div class="red">1</div> <d...
2019-11-02 21:59:54
343
原创 web前端入门到实战：异步加载CSS最简单的实现方式
我们想提高网页性能的最有影响力的措施之一，就是以不延迟网页渲染的方式加载CSS。在默认情况下，浏览器在加载CSS时将终止页面的样式呈现（同步加载），也就是加载CSS会阻塞DOM树的渲染（但并不会阻塞DOM树的构建），可以简单理解为：当在加载CSS的同时，也在构建DOM树，只是没有应用上样式。渲染流程简单过一遍浏览器渲染的流程：加载HTML资源解析HTML加载CSS资源，同时构建DOM...
2019-10-31 21:34:47
655
原创 web前端入门到实战：css3循环，模拟拼多多动画效果
模拟拼多多动画效果，最终效果图如下：我们看一下实现过程。主框架是vue开发，做成了一个动画组件，因为涉及到多个页面引用，最主要的实现是css3语法实现过程，并且要做到循环播放。左边出来动画时间是0.5秒，停留3秒往上走，然后动画时间0.5秒，停留3秒后然后消失，消失动画时间0.5秒，总共的时间消耗是7.5秒。可以得到以下计算比例如果大家对编程，web前端感兴趣，想要学习，打算深入...
2019-10-31 21:34:45
1012
1
原创 web前端入门到实战：css骚操作之表单验证
效果图原理表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、身份证…）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素；于是就可以随便搞啦，上面的效果图只是做一些简单的效果，更多效果以及限制大家就发挥自己的想象力咯；html布局很简单，input跟button是兄弟节点的关系，require...
2019-10-30 21:59:59
291
原创 web前端入门到实战：撸两个天气小程序
经过最近两年多的发展，小程序的地位也逐渐越来越高了，各个平台前赴后继做了自家的小程序平台，随着市场的需求越来愈多，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。效果图1、获取位置信息在定位功...
2019-10-30 21:59:57
850
原创 web前端入门到实战：用css3实现惊艳面试官的背景即背景动画（高级附源码）
我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。1.实现内部虚线边框知识点：outline核心代码.dash-border{ width: 200px; height: 100px;...
2019-10-30 21:59:56
1002
原创 web前端入门到实战：CSS导航条菜单：带小三角形
很多网页的导航条都会有小三角形，其实实现这个功能也挺简单。拿菜鸟教程首页导航做个例子首先写一个大的div_nav，而“首页”“菜鸟笔记”“菜鸟工具”“参考手册”等则作为div包含在div_nav中。div_nav背景色设置为对应的颜色。背景色的设置代码如下：.blue #slatenav ul li a:hover,.blue #slatenav ul li a.current{colo...
2019-10-30 14:06:35
698
原创 web前端入门到实战：彻底掌握css动画【transition】
马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。话不多说...
2019-10-30 14:06:34
334
原创 web前端入门到实战：自定义数字滚动效果
分享自定义数字滚动效果效果图：一、html代码<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> ...
2019-10-30 14:06:33
1813
1
原创 web前端入门到实战：制作仿京东商城-商品列表商品筛选功能
这次实现一个仿京东商城-商品列表商品筛选的功能一、html代码<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"></head>&l...
2019-10-30 14:06:31
1666
原创 web前端入门到实战：图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的，分享点jquery插件效果，方便效果开发使用。一、HTML代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http...
2019-10-30 14:06:29
1739
原创 web前端入门到实战：彻底掌握css动画【animation】
马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。上一篇文...
2019-10-29 22:00:00
344
原创 web前端入门到实战：鼠标滑过横向时间轴效果
鼠标滑过横向时间轴效果—效果图：鼠标滑过横向时间轴效果—全部代码：<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"></head>...
2019-10-26 21:59:55
1046
原创 web前端入门到实战：返回顶部和在线客服网站侧边栏
效果图：全部代码：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> *{margin:0;padding:0;} ul{list-style: none;} .slide{ p...
2019-10-26 21:59:53
423
原创 web前端入门到实战：H5刮刮卡效果
效果图：核心就是使用ctx.globalCompositeOperation = ‘destination-out’;全部代码：<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .ggk{ ...
2019-10-26 21:59:51
521
1
原创 web前端入门到实战：网页三级联动效果代码（省、市、区）
人问我三级联动的插件，我就写好了发出来吧，正好需要的人都可以看看。一、html代码<!DOCTYPE html><html><head> <title>三级联动-三人行慕课</title> <link rel="stylesheet" type="text/css" href="https://cdn.js...
2019-10-26 21:59:49
1359
原创 web前端入门到实战：做一个电影院选座功能
项目采用create-react-app脚手架，就是做了一个效果所以只有一个页面但是也用了react-router-dom路由把details作为path=’/'首页了。一、App.jsimport React from 'react';import {BrowserRouter,Route} from 'react-router-dom'import Details from './r...
2019-10-26 21:59:45
5602
1
原创 web前端入门到实战：30行JS和30行CSS代码实现一个进度条组件
30行js和30行css实现一个进度条组件，关键在于运用css变量，如何使用css变量预览图代码Javascriptimport React from 'react';import PropTypes from 'prop-types';import Styles from './main.module.scss';/** * * 传入percent，生成进度条 * @pa...
2019-10-26 15:44:22
358
原创 web前端入门到实战：耐人寻味的CSS属性font-family
font-family是一个网站用户体验的第一入口，非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体，接着了解中英文的常用字体及其适用性。衬线字体衬线（serif）的笔画有粗有细的变化，在每一笔画上都自有风格，笔画末端会有修饰，强调艺术感，适合用于博客，旅游，文化，艺术类网站。无衬线字体无衬线（sans-serif）的字体工整方正，给人正式的感觉，适合政务类，企业类网站使用...
2019-10-25 22:00:00
1658
原创 web前端入门到实战：css 让一个盒子的高度自适应屏幕剩余的部分
在项目中，移动端要自适应，由于有时候数据不够，所以导致了有的区域空白要求：没有数据的时候能够充满屏幕，数据超出屏幕就出现滚动条做法1-让容器高度充满这个屏幕在容器内容很少的情况下，要想让这个容器充满整个屏幕：`.container{min-height:100vh;display:flex}`2-让容器高度充满剩余屏幕高度要让容器充满屏幕的剩余高度，用 vh 结合 fle...
2019-10-25 21:59:58
2399
原创 web前端入门到实战：Vue项目中使用Axios封装http请求
使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。安装npm install axios --save建立http.js文件在/src/utils/目录下建立一个htttp.js1.首先导入axios和router。import axios from 'axi...
2019-10-25 21:59:55
2751
原创 web前端入门到实战：页面平滑滚动小技巧
背景今天写需求的时候发现一个小的优化点：用户选择了一些数据之后, 对应列表中的数据需要高亮， 有时候列表很长， 为了提升用户体验，需要加个滚动， 自动滚动到目标位置。简单的处理了一下， 问题顺利解决， 就把这个小技巧分享一下给大家。正文有几种不同的方式来解决这个小问题。1.scrollTop第一想到的还是scrollTop, 获取元素的位置， 然后直接设置:// 设置滚动的距离ele...
2019-10-25 21:59:51
2904
原创 web前端入门到实战：css3贝塞尔曲线(cubic-bezier)
css3 animation模块，其中animation-timing-function 和 transition-timing-function两个属性来控制动画速度分别提供了ease，liner，ease-in，ease-out，ease-in-out几个预设速度，还可以同过cubic-bezier来自定义速度，想要深入了解CSS3动画，实现随心所欲的动画效果，还是有必要理解下其中的原理。C...
2019-10-24 22:00:00
3134
原创 web前端入门到实战：Javascript和Css截取字符串的方法比较
平时前端开发工作时，经常会需要对字符串进行截断，比如新闻标题，需要把超出可视区域后需要进行截断，如下图：但是这个方式有一个弊端，尤其是响应式的页面，截取字数无法精确控制，比如pc端可视区域可以显示150个字符，但是手机端屏幕最多只能显示20个字符，所以通过后端来控制字符数是非常烂的解决方案，最好的解决办法是通过前端方式来截断字符串，下面分别用javascript和css的方式来实现。先看一下...
2019-10-24 21:59:57
1148
原创 web前端入门到实战：js判断对象是否为空对象，判断对象中是否有某属性
js判断对象是否为空对象判断一个对象是否为空对象，本文给出三种判断方法：1、最常见的思路，for…in…遍历属性，为真则为“非空数组”；否则为“空数组”function judgeObj(Obj){ for(var attr in Obj){ return alert('非空对象') } return alert('空对象')}2.通过JSON自...
2019-10-22 21:59:54
1450
原创 web前端入门到实战：详解Js加法运算符
简介JavaScript是一门了不起的语言。我喜欢它的灵活性：只需以你喜欢的方式做事：更改变量类型，动态的向对象添加方法或属性，对不同的变量类型使用运算符等等。然而动态是要付出代价的，开发人员需要知道怎样处理对于不同操作符的类型转换：加号(+)，等号(==和===)，不等号(!=和!==)等等，许多运算符有自己处理类型转换的方式。加法运算符最常用的运算符：+，这个运算符用于接连字符串或对数...
2019-10-22 21:59:53
1211
原创 web前端入门到实战：CSS画心形和蛋形
一、心形使用transform-origin属性实现设置不同的点为原点1、改变元素基点transform-origin（transform-origin是变形原点，原点就是元素绕着旋转或变形的点）注意：该属性只有在设置了transform属性的时候才起作用；如果在不设置的情况下，元素的基点默认的是其中心位置。即，在没有使用transform-origin属性的情况下transform的r...
2019-10-22 21:59:51
1023
原创 web前端入门到实战：控制换行和空白处理的CSS属性-white-spac
本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死，一直没记住，今天决定还是写下来好好琢磨下。属性值normal默认值，正常换行，空白和换行符会被浏览器忽略。啥意思呢？正常换行的意思是，单词间会正常换行，如果下一个单词太长，不足以在当前行剩余部分完整展示，则会在下一行显示。哪些情况算一个单词呢？一个中文字一个英文单词// 这是两个单词Tus...
2019-10-22 21:59:48
508
原创 web前端入门到实战：CSS元素的显示与隐藏
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！display 显示display 设置或检索对象是否及如何显示。display ...
2019-10-22 21:59:46
265
原创 web前端入门到实战：html的组成部分、DIV+CSS布局
HTML的组成部分dtd部分：文档类型说明，声明版本、标准header部分：给机器看的body部分：给人看的CSS控制div显示 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。如下代码是CSS通过id设置每个div的宽高和背景色<!doctype html&...
2019-10-21 22:00:00
428
原创 web前端入门到实战：html语言学习的7个秘诀
html语言学习的7个秘诀也就是说如何学习HTML语言。新手们有一个常见的错误就是犹豫于判断哪种编程语言是做好的、最该先学的。 我们有很多的选择，但你不能说那种语言“最好”。我们应该理解：说到底，什么语言并不重要。 重要的是理解数据结构、控制逻辑和设计模式。 任何一种语言—甚至一种简单的脚本语言—都会具有所有编程语言都共有的各种特征，也就是说各种语言是贯通的。我编程使用Pascal，汇编，...
2019-10-21 21:59:58
259
原创 web前端入门到实战：Html介绍，CSS介绍，JavaScript介绍
标题图CSS介绍学前端必备掌握CSS样式，css为层叠样式表，用来定义页面的显示效果，加强用户的体验乐趣，那么如何用css到html中呢？style属性方式利用标签中的style属性来改变显示样式p标签作者：在head中加入style标签作者：p{color:#FFF000;}链接方式总结CSS选择器名称 {属性名：属性值；…….}属性与属性之间用 分号 隔开属性与属...
2019-10-21 21:59:56
293
原创 web前端入门到实战：jQuery中html()方法产生的问题
今天工作中需要用到这样一个效果：table里面排列着一些文本框，在输入数值以后，保存table的全部html元素，包括刚输入的数值。这里用jquery的html()方法很容易实现。但是测试的时候发现，在ie8和i火狐（还包括ie9，safari，谷歌浏览器）中，html()得到的值是不一样的。下面是一个小小的例子，我想大家很容易看明白：<html><head>&l...
2019-10-19 21:59:47
310
原创 web前端入门到实战：HTML-JS中的单双引混合处理原则
Web 开发时常会遇到 链接中调用JS操作，如：<a href="#" onclick="showName('donhwa')">查看名字</a>这里的名字 donhwa ，偶尔会带有 单引，或双引，或兼有之。 这时，又要如何调整才不会暴脚本感叹号呢？ 也许你我都经常遇到，偶尔调整一阵可以了就这样过了，没有总结下来。下面是整理了一下的结果，记录一下。<h...
2019-10-19 21:59:44
192
原创 初学web前端开发，你必要了解的基本概念与工具技术
Web开发是比较费神的，需要掌握很多很多的东西，特别是从事前端开发的朋友，需要通十行才行。今天，本文向初学者介绍一些Web开发中的基本概念和用到的技术，从A到Z总共26项，每项对应一个概念或者技术。A — AJAXAJAX 全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创建交互式网页应用的网页开发技术。根据Ajax提出者J...
2019-10-19 21:59:42
379
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人