- 博客(400)
- 收藏
- 关注
原创 web前端入门到实战:css绘制各种形状图形
虽然我们现在大都使用字体图标或者svg图片,似乎使用 CSS 来做图标意义不是很大,但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。一、实心圆.circle { width: 120px; height: 120px; background: #8BC34A; border-radius: 100%;}二、圆环(空心圆).ring {...
2019-11-03 21:59:59 2347
原创 web前端入门到实战:CSS3 filter(滤镜)属性
css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果、老照片(黑白照片)、火焰效果等。一、blur(px)高斯模糊二、brightness(%)亮度三、contrast(%)对比度四、drop-shadow()阴影注意: 这个 drop-shadow 与 box-shadow 都是在说阴影,但还是有区别的,看下图...
2019-11-03 21:59:55 1300
原创 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 1747
原创 web前端入门到实战:CSS单位讲解
像 px、rem、em、% 这样的长度单位大家肯定都很熟悉,前者为绝对单位,后者为相对单位。CSS3 又引入了新单位:vw、vh、vmin、vmax。下面对它们做个详细介绍。单位作用特性px页面按精确像素展示绝对单位rem相对根节点html字体大小来计算相对单位em基准点为相对父节点字体的大小相对单位%相对于父元素的大小设定的比率相对单...
2019-11-03 21:59:49 425
原创 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 1890
原创 web前端入门到实战:总结清除浮动的方法
方法一、在结尾处添加空div标签clear:both在浮动的盒子之下再放一个标签,在这个标签中使用clear:both,来清除浮动对页面的影响.注意:一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签,造成结构的混乱.<div class="box"> <div class="red">1</div> <d...
2019-11-02 21:59:54 375
原创 web前端入门到实战:异步加载CSS最简单的实现方式
我们想提高网页性能的最有影响力的措施之一,就是以不延迟网页渲染的方式加载CSS。在默认情况下,浏览器在加载CSS时将终止页面的样式呈现(同步加载),也就是加载CSS会阻塞DOM树的渲染(但并不会阻塞DOM树的构建),可以简单理解为:当在加载CSS的同时,也在构建DOM树,只是没有应用上样式。渲染流程简单过一遍浏览器渲染的流程:加载HTML资源解析HTML加载CSS资源,同时构建DOM...
2019-10-31 21:34:47 727
原创 web前端入门到实战:css3循环,模拟拼多多动画效果
模拟拼多多动画效果,最终效果图如下:我们看一下实现过程。主框架是vue开发,做成了一个动画组件,因为涉及到多个页面引用,最主要的实现是css3语法实现过程,并且要做到循环播放。左边出来动画时间是0.5秒,停留3秒往上走,然后动画时间0.5秒,停留3秒后然后消失,消失动画时间0.5秒,总共的时间消耗是7.5秒。可以得到以下计算比例如果大家对编程,web前端感兴趣,想要学习,打算深入...
2019-10-31 21:34:45 1243 1
原创 web前端入门到实战:css骚操作之表单验证
效果图原理表单元素中,有一个pattern属性,可以自定义正则表达式(如手机号、邮箱、身份证…);valid伪类,可以匹配通过pattern验证的元素;invalid伪类则相反,可以匹配未通过pattern验证的元素;于是就可以随便搞啦,上面的效果图只是做一些简单的效果,更多效果以及限制大家就发挥自己的想象力咯;html布局很简单,input跟button是兄弟节点的关系,require...
2019-10-30 21:59:59 340
原创 web前端入门到实战:撸两个天气小程序
经过最近两年多的发展,小程序的地位也逐渐越来越高了,各个平台前赴后继做了自家的小程序平台,随着市场的需求越来愈多,uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。效果图1、获取位置信息在定位功...
2019-10-30 21:59:57 881
原创 web前端入门到实战:用css3实现惊艳面试官的背景即背景动画(高级附源码)
我们传统的前端更多的是用javascript实现各种复杂动画,自从有了Css3 transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。1.实现内部虚线边框知识点:outline核心代码.dash-border{ width: 200px; height: 100px;...
2019-10-30 21:59:56 1062
原创 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 776
原创 web前端入门到实战:彻底掌握css动画【transition】
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗?说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量、提高性能。话不多说...
2019-10-30 14:06:34 355
原创 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 1913 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 1741
原创 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 1852
原创 web前端入门到实战:彻底掌握css动画【animation】
马上就2020年了,不知道小伙伴们今年学习了css3动画了吗?说起来css动画是一个很尬的事,一方面因为公司用css动画比较少,另一方面大部分开发者习惯了用JavaScript来做动画,所以就导致了许多程序员比较排斥来学习css动画(至少我是),但是一个不懂css动画的前端工程师不能称之为掌握css3,其实当你真正学习css动画之后,你会被它的魅力所吸引的,它可以减少代码量、提高性能。上一篇文...
2019-10-29 22:00:00 384
原创 web前端入门到实战:鼠标滑过横向时间轴效果
鼠标滑过横向时间轴效果—效果图:鼠标滑过横向时间轴效果—全部代码:<!DOCTYPE html><html><head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css"></head>...
2019-10-26 21:59:55 1114
原创 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 477
原创 web前端入门到实战:H5刮刮卡效果
效果图:核心就是使用ctx.globalCompositeOperation = ‘destination-out’;全部代码:<!DOCTYPE html><html><head> <title></title> <style type="text/css"> .ggk{ ...
2019-10-26 21:59:51 558 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 1481
原创 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 5824 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 383
原创 web前端入门到实战:耐人寻味的CSS属性font-family
font-family是一个网站用户体验的第一入口,非常有必要花功夫来研究一下。我们首先需要了解衬线字体和无衬线字体,接着了解中英文的常用字体及其适用性。衬线字体衬线(serif)的笔画有粗有细的变化,在每一笔画上都自有风格,笔画末端会有修饰,强调艺术感,适合用于博客,旅游,文化,艺术类网站。无衬线字体无衬线(sans-serif)的字体工整方正,给人正式的感觉,适合政务类,企业类网站使用...
2019-10-25 22:00:00 1707
原创 web前端入门到实战:css 让一个盒子的高度自适应屏幕剩余的部分
在项目中,移动端要自适应,由于有时候数据不够,所以导致了有的区域空白要求:没有数据的时候能够充满屏幕,数据超出屏幕就出现滚动条做法1-让容器高度充满这个屏幕在容器内容很少的情况下,要想让这个容器充满整个屏幕:`.container{min-height:100vh;display:flex}`2-让容器高度充满剩余屏幕高度要让容器充满屏幕的剩余高度,用 vh 结合 fle...
2019-10-25 21:59:58 2449
原创 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 2785
原创 web前端入门到实战:页面平滑滚动小技巧
背景今天写需求的时候发现一个小的优化点:用户选择了一些数据之后, 对应列表中的数据需要高亮, 有时候列表很长, 为了提升用户体验,需要加个滚动, 自动滚动到目标位置。简单的处理了一下, 问题顺利解决, 就把这个小技巧分享一下给大家。正文有几种不同的方式来解决这个小问题。1.scrollTop第一想到的还是scrollTop, 获取元素的位置, 然后直接设置:// 设置滚动的距离ele...
2019-10-25 21:59:51 3179
原创 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 3241
原创 web前端入门到实战:Javascript和Css截取字符串的方法比较
平时前端开发工作时,经常会需要对字符串进行截断,比如新闻标题,需要把超出可视区域后需要进行截断,如下图:但是这个方式有一个弊端,尤其是响应式的页面,截取字数无法精确控制,比如pc端可视区域可以显示150个字符,但是手机端屏幕最多只能显示20个字符,所以通过后端来控制字符数是非常烂的解决方案,最好的解决办法是通过前端方式来截断字符串,下面分别用javascript和css的方式来实现。先看一下...
2019-10-24 21:59:57 1174
原创 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 1519
原创 web前端入门到实战:详解Js加法运算符
简介JavaScript是一门了不起的语言。我喜欢它的灵活性:只需以你喜欢的方式做事:更改变量类型,动态的向对象添加方法或属性,对不同的变量类型使用运算符等等。然而动态是要付出代价的,开发人员需要知道怎样处理对于不同操作符的类型转换:加号(+),等号(==和===),不等号(!=和!==)等等,许多运算符有自己处理类型转换的方式。加法运算符最常用的运算符:+,这个运算符用于接连字符串或对数...
2019-10-22 21:59:53 1286
原创 web前端入门到实战:CSS画心形和蛋形
一、心形使用transform-origin属性实现设置不同的点为原点1、改变元素基点transform-origin(transform-origin是变形原点,原点就是元素绕着旋转或变形的点)注意:该属性只有在设置了transform属性的时候才起作用;如果在不设置的情况下,元素的基点默认的是其中心位置。即,在没有使用transform-origin属性的情况下transform的r...
2019-10-22 21:59:51 1079
原创 web前端入门到实战:控制换行和空白处理的CSS属性-white-spac
本文说的white-space是一个控制换行和空白处理的CSS属性。我曾经被这个属性烦死,一直没记住,今天决定还是写下来好好琢磨下。属性值normal默认值,正常换行,空白和换行符会被浏览器忽略。啥意思呢?正常换行的意思是,单词间会正常换行,如果下一个单词太长,不足以在当前行剩余部分完整展示,则会在下一行显示。哪些情况算一个单词呢?一个中文字一个英文单词// 这是两个单词Tus...
2019-10-22 21:59:48 541
原创 web前端入门到实战:CSS元素的显示与隐藏
元素的显示与隐藏在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow。他们的主要目的是让一个元素在页面中消失,但是不在文档源码中删除。 最常见的是网站广告,当我们点击类似关闭不见了,但是我们重新刷新页面,它们又会出现和你玩躲猫猫!!display 显示display 设置或检索对象是否及如何显示。display ...
2019-10-22 21:59:46 294
原创 web前端入门到实战:html的组成部分、DIV+CSS布局
HTML的组成部分dtd部分:文档类型说明,声明版本、标准header部分:给机器看的body部分:给人看的CSS控制div显示 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是 固有的唯一格式表现。可以通过 的 class 或 id 应用额外的样式。如下代码是CSS通过id设置每个div的宽高和背景色<!doctype html&...
2019-10-21 22:00:00 451
原创 web前端入门到实战:html语言学习的7个秘诀
html语言学习的7个秘诀也就是说如何学习HTML语言。新手们有一个常见的错误就是犹豫于判断哪种编程语言是做好的、最该先学的。 我们有很多的选择,但你不能说那种语言“最好”。我们应该理解:说到底,什么语言并不重要。 重要的是理解数据结构、控制逻辑和设计模式。 任何一种语言—甚至一种简单的脚本语言—都会具有所有编程语言都共有的各种特征,也就是说各种语言是贯通的。我编程使用Pascal,汇编,...
2019-10-21 21:59:58 302
原创 web前端入门到实战:Html介绍,CSS介绍,JavaScript介绍
标题图CSS介绍学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢?style属性方式利用标签中的style属性来改变显示样式p标签作者:在head中加入style标签作者:p{color:#FFF000;}链接方式总结CSS选择器名称 {属性名:属性值;…….}属性与属性之间用 分号 隔开属性与属...
2019-10-21 21:59:56 323
原创 web前端入门到实战:jQuery中html()方法产生的问题
今天工作中需要用到这样一个效果:table里面排列着一些文本框,在输入数值以后,保存table的全部html元素,包括刚输入的数值。这里用jquery的html()方法很容易实现。但是测试的时候发现,在ie8和i火狐(还包括ie9,safari,谷歌浏览器)中,html()得到的值是不一样的。下面是一个小小的例子,我想大家很容易看明白:<html><head>&l...
2019-10-19 21:59:47 343
原创 web前端入门到实战:HTML-JS中的单双引混合处理原则
Web 开发时常会遇到 链接中调用JS操作,如:<a href="#" onclick="showName('donhwa')">查看名字</a>这里的名字 donhwa ,偶尔会带有 单引,或双引,或兼有之。 这时,又要如何调整才不会暴脚本感叹号呢? 也许你我都经常遇到,偶尔调整一阵可以了就这样过了,没有总结下来。下面是整理了一下的结果,记录一下。<h...
2019-10-19 21:59:44 213
原创 初学web前端开发,你必要了解的基本概念与工具技术
Web开发是比较费神的,需要掌握很多很多的东西,特别是从事前端开发的朋友,需要通十行才行。今天,本文向初学者介绍一些Web开发中的基本概念和用到的技术,从A到Z总共26项,每项对应一个概念或者技术。A — AJAXAJAX 全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。根据Ajax提出者J...
2019-10-19 21:59:42 401 1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人