WEB前端入门

web前端入门到实战：返回顶部和在线客服网站侧边栏

效果图：全部代码：*{margin:0;padding:0;}ul{list-style:none;}.slide{position:fixed;right:0;top:200px;z-index:100;width:54px;height:275px;}.slideulli{width:54px;height:54px;float:left;position:relative;border-bo
前端向南·2019-11-08 19:46

新手怎么入门Web前端 高效率学习方法有哪些

Web前端入门简单、精通不易，让很多想要入行前端开发行业的人苦恼不已，他们迫切的想要知道高效率学习前端知识的方法。
千锋郑州·2019-11-08 16:21

web前端入门到实战：CSS 阴影动画优化技巧

box-shaodw在我们的工作中使用以及越来越多，伴随阴影的动画或多或少都有一点。假设，我们有下面这样一个盒子：div{width:100px;height:100px;box-shadow:02px4pxrgba(0,0,0,0.3);}希望hover的时候，盒阴影从box-shadow:02px4pxrgba(0,0,0,0.3)过渡到box-shadow:05px15pxrgba(0,0,
前端向南·2019-11-07 21:48

web前端入门到实战：css样式初始化

为了消除各浏览器对css默认的设置，保持网页在各浏览器中的外观保持一致，初始化css就显得非常必要了！很多时候出现的样式不兼容问题，都可以通过css初始化代码来解决。1.最耗资源的，最简单的*{padding:0;margin:0;border:0;}2.选择性初始化举例（综合）body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,legend
前端向南·2019-11-07 21:05

web前端入门到实战：CSS Display属性的双值写法

display属性display属性用来控制一个元素及其子元素的格式化上下文，你应该在刚刚学习CSS的时候就知道，有些元素是块级元素，有些则是行内元素。有了display属性，你就可以切换元素不同的状态。比如说，通常一个h1元素是一个块级元素，但是通过切换，它就能以内联元素展现。这几年，我们也知道了Grid布局和弹性盒布局。我们只需要将display属性的值设置为display:grid或disp
前端向南·2019-11-07 21:13

web前端入门到实战：相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）等用法

前言：我们在码代码的时候，经常会遇到需要给第一个或者最后一个元素添加或删除样式，还有一些比较特殊的是选取第几个元素添加或删除样式，下面记录css选择器中常见的选择器:相邻兄弟选择器（+）、子选择器（>）、兄弟选择器（~）、first-child、:last-child、:nth-child()、:nth-last-child()的用法。相邻兄弟选择器（+）相邻兄弟选择器可选择紧接在另一个元素后的元
前端向南·2019-11-07 21:34

web前端入门到实战：总结如何修改美化radio、checkbox的默认样式

现在前端页面效果日益丰富，默认的input组件样式显然不能满足设计需求。前段时间开发项目中刚好接触到相关的需求，在此特地整理下修改radio、CheckBox样式的方法。原理：大致原理都是使用原生的checkbox或input标签，在其后面设置相关联的label元素。给元素设置为透明，然后通过定位让用户看到的是元素，利用css的原生属性来判断用户的操作，设置选中后的label样式,即input[t
前端向南·2019-11-06 19:30

web前端入门到实战：弹性布局（display:flex;）属性详解

一、Flex布局-前言Flex是FlexibleBox的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性,旨在提供一个更有效地布局、对齐方式，并且能够使容器中的子元素大小未知或动态变化情况下仍然能够分配好子元素之间的空间。Flex布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子
前端向南·2019-11-06 19:49

web前端入门到实战：css绘制各种形状图形

虽然我们现在大都使用字体图标或者svg图片，似乎使用CSS来做图标意义不是很大，但怎么实现这些图标用到的一些技巧及思路是很值得我们的学习。一、实心圆.circle{width:120px;height:120px;background:#8BC34A;border-radius:100%;}二、圆环（空心圆）.ring{width:100px;height:100px;border:10pxsol
前端向南·2019-11-06 19:41

Web前端入门指南三

四、初步进阶学习相信经过前面两个章节的探索，如果你能坚持下去并按照建议学习，应该已经完成了第一个自己动手实现的网站了吧。这一章是对接下来的一些初步进阶学习的建议，完成这一章我们应该算是真正踏入了前端的大门，之后就可以随君遨游飞翔了！1、完善我们的基础知识（1）HTML5，更高级的标记语言，功能更加丰富多彩。新增许多标签，比如：canvas、video等，可以自己实现更多的动画，炫酷的特效或者播放视
虫二于飞·2019-11-06 00:47

web前端入门到实战：CSS3 filter（滤镜）属性

css3的滤镜filter属性，可以对网页中的图片进行类似Photoshop图片处理的效果，例如背景的毛玻璃效果、老照片（黑白照片）、火焰效果等。一、blur(px)高斯模糊二、brightness(%)亮度三、contrast(%)对比度四、drop-shadow()阴影注意：这个drop-shadow与box-shadow都是在说阴影，但还是有区别的，看下图图中火焰的图片，是一张png图片，除
前端向南·2019-11-05 19:33

web前端入门到实战：总结清除浮动的方法

方法一、在结尾处添加空div标签clear:both在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.123web前端开发学习Q-q-u-n：731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频，P
前端向南·2019-11-05 19:00

web前端入门到实战：css实现文字竖排的方式

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列.onecn{width:20px;margin:0auto;line-height:24px;}.oneen{width:15px;margin:0auto;line-height:24px;font-size:20px;word-wrap:break-word;/*英文的时候需要加上这句，自动换行*/w
前端向南·2019-11-05 19:17

web前端入门到实战：CSS单位讲解

像px、rem、em、%这样的长度单位大家肯定都很熟悉，前者为绝对单位，后者为相对单位。CSS3又引入了新单位：vw、vh、vmin、vmax。下面对它们做个详细介绍。单位作用特性px页面按精确像素展示绝对单位rem相对根节点html字体大小来计算相对单位em基准点为相对父节点字体的大小相对单位%相对于父元素的大小设定的比率相对单位vw视窗宽度的百分比，1vw代表视窗宽度的1%视窗单位vh视窗高度
前端向南·2019-11-04 14:07

web前端入门到实战：详解css3如何给背景图片加颜色遮罩

前段时间在开发中，遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级).wrap1{position:relative;width:1200px;height:400px;background:rgba(0,0,0,.5);}.wrap1.inner{position:absolute;left:0;right:0;top:0;bottom
前端向南·2019-11-04 14:07

web前端入门到实战：css实现文字竖排的方式

html中文字的默认排列是横向排列的，但一些特殊情况下是需要文字竖向排列的。单行文字竖向排列.onecn{width:20px;margin:0auto;line-height:24px;}.oneen{width:15px;margin:0auto;line-height:24px;font-size:20px;word-wrap:break-word;/*英文的时候需要加上这句，自动换行*/w
前端向南·2019-11-04 14:29

web前端入门到实战：总结清除浮动的方法

方法一、在结尾处添加空div标签clear:both在浮动的盒子之下再放一个标签，在这个标签中使用clear:both，来清除浮动对页面的影响.注意：一般情况下不会使用这一种方式来清除浮动。因为这种清除浮动的方式会增加页面的标签，造成结构的混乱.123web前端开发学习Q-q-u-n：767273102，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）方
前端向南·2019-11-04 14:59

web前端入门到实战：异步加载CSS最简单的实现方式

我们想提高网页性能的最有影响力的措施之一，就是以不延迟网页渲染的方式加载CSS。在默认情况下，浏览器在加载CSS时将终止页面的样式呈现（同步加载），也就是加载CSS会阻塞DOM树的渲染（但并不会阻塞DOM树的构建），可以简单理解为：当在加载CSS的同时，也在构建DOM树，只是没有应用上样式。渲染流程简单过一遍浏览器渲染的流程：加载HTML资源解析HTML加载CSS资源，同时构建DOM树解析CSS，
前端向南·2019-11-04 14:14

web前端入门到实战：css3循环，模拟拼多多动画效果

模拟拼多多动画效果，最终效果图如下：我们看一下实现过程。主框架是vue开发，做成了一个动画组件，因为涉及到多个页面引用，最主要的实现是css3语法实现过程，并且要做到循环播放。左边出来动画时间是0.5秒，停留3秒往上走，然后动画时间0.5秒，停留3秒后然后消失，消失动画时间0.5秒，总共的时间消耗是7.5秒。可以得到以下计算比例如果大家对编程，web前端感兴趣，想要学习，打算深入了解这个行业的朋友
前端向南·2019-11-03 19:04

web前端入门到实战：css骚操作之表单验证

效果图原理表单元素中，有一个pattern属性，可以自定义正则表达式（如手机号、邮箱、.）；valid伪类，可以匹配通过pattern验证的元素；invalid伪类则相反，可以匹配未通过pattern验证的元素；于是就可以随便搞啦，上面的效果图只是做一些简单的效果，更多效果以及限制大家就发挥自己的想象力咯；html布局很简单，input跟button是兄弟节点的关系，required属性是必填的意
前端向南·2019-11-03 19:23

web前端入门到实战：撸两个天气小程序

经过最近两年多的发展，小程序的地位也逐渐越来越高了，各个平台前赴后继做了自家的小程序平台，随着市场的需求越来愈多，uni-app是一个使用Vue.js开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。即使不跨端，uni-app同时也是更好的小程序开发框架。效果图1、获取位置信息在定位功能中，本程序用到
前端向南·2019-11-03 19:20

web前端入门到实战：用css3实现惊艳面试官的背景即背景动画（高级附源码）

我们传统的前端更多的是用javascript实现各种复杂动画，自从有了Css3transition和animation以来,前端开发在动画这一块有了更高的自由度和格局,对动画的开发也越来越容易。这篇文章就让我们汇总一下使用Css3实现的各种特效。1.实现内部虚线边框知识点：outline核心代码.dash-border{width:200px;height:100px;line-height:10
前端向南·2019-11-03 19:41

web前端入门到实战：彻底掌握css动画【animation】

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。上一篇文章我
前端向南·2019-11-03 19:48

web前端入门到实战：CSS 、JS实现浪漫流星雨动画

1，效果图2，源码HTMLweb前端开发学习Q-q-u-n：731771211，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）CSS/*------重启------*/*{保证金：0;填充：0;}html，body{width：100％;最小宽度：1000px;身高：100％;最小高度：400px;溢出：隐藏;}/*------------画布----
前端向南·2019-11-02 17:16

web前端入门到实战：彻底掌握css动画【transition】

马上就2020年了，不知道小伙伴们今年学习了css3动画了吗？说起来css动画是一个很尬的事，一方面因为公司用css动画比较少，另一方面大部分开发者习惯了用JavaScript来做动画，所以就导致了许多程序员比较排斥来学习css动画（至少我是），但是一个不懂css动画的前端工程师不能称之为掌握css3，其实当你真正学习css动画之后，你会被它的魅力所吸引的，它可以减少代码量、提高性能。话不多说，马
前端向南·2019-11-02 17:43

如何写出漂亮的react组件

本文从属于笔者的Web前端入门与最佳实践中的React入门与最佳实践系列，同类型文章还包括React代码风格约定。
ToSmile·2019-11-02 00:27

web前端入门到实战：做一个电影院选座功能

项目采用create-react-app脚手架，就是做了一个效果所以只有一个页面但是也用了react-router-dom路由把details作为path=’/'首页了。一、App.jsimportReactfrom'react';import{BrowserRouter,Route}from'react-router-dom'importDetailsfrom'./routes/Details'
魔方编程·2019-10-26 21:45

web前端入门到实战：Vue项目中使用Axios封装http请求

使用axios可以统一做请求响应拦截，例如请求响应时我们拦截响应信息，判断状态码，从而弹出报错信息。请求超时的时候断开请求，还可以很方便地使用then或者catch来处理请求。安装npminstallaxios--save建立http.js文件在/src/utils/目录下建立一个htttp.js1.首先导入axios和router。importaxiosfrom'axios';importrou
魔方编程·2019-10-25 21:55

web前端入门必学的16个知识点， 建高楼都需要打好地基！

1、HTML常用标签语言是什么、Web前端开发语言、HTML超文本标记语言、网页主体结构、常用标签、超链接（a标签）、Img图片标签2、盒子模型初探Div盒子模型、css样式、简单css样式、盒子模型Border边框讲解、盒子模型外边距盒子模型内边距、盒子模型占位计算、ul无序列表、ol有序列表、dl定义列表、补充知识（css）3、样式初始化及display+外边距合并样式初始化、元素类型转换、内
前端老司机·2019-10-23 20:44

好程序员web前端教程分享web前端入门基础知识

好程序员web前端教程分享web前端入门基础知识，作为合格的Web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一两个还不行，必须对这三门语言都要熟悉。下面我们一起来看一看吧！
wx5da18b5c4b01e·2019-10-17 13:01

好程序员web前端教程分享web前端入门基础知识

好程序员web前端教程分享web前端入门基础知识，作为合格的Web前端工程师必须得掌握HTML、CSS和JavaScript。只懂其中一两个还不行，必须对这三门语言都要熟悉。下面我们一起来看一看吧！
wx5da18b5c4b01e·2019-10-17 13:57

Web前端职业方向有哪些 零基础转行能不能学会

更值得一提的是，Web前端入门简单，对初学者友好，因此很多零基础转行的人将前端列为首要选择。接下来小编就给大家详细的分析一下。Web前端职业方向有哪些?
千锋郑州·2019-10-14 16:59

web前端入门到实战：css 浮动布局，清除浮动

浮动的特性：（1）浮动元素有左浮动（float:left）和右浮动（float:right）两种（2）浮动的元素会向左或向右浮动，碰到父元素边界、其他元素才停下来（3）相邻浮动的块元素可以并在一起，超出父级宽度就换行（4）浮动让行内元素或块元素自动转化为行内块元素（此时不会有行内块元素间隙问题）（5）浮动元素后面没有浮动的元素会占据浮动元素的位置，没有浮动的元素内的文字会避开浮动的元素，开成文字绕
编程学友·2019-10-14 15:55

web前端入门到实战：css 定位布局

文档流：文档流，是指盒子按照html标签编写的顺序依次从上到下，从左到右排列。块元素占一行，行内元素在一行之内从左到在排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置。关于定位：可以使用css的position属性来设置元素的定位类型，position设置项如下：（1）relative生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。（2）absolute
编程学友·2019-10-14 15:00

web前端入门到实战：把HTML转成PDF的4个方案及实现

在本文中，我将展示如何使用Node.js、Puppeteer、headlessChrome和Docker从样式复杂的React页面生成PDF文档。背景：几个月前，一个客户要求我们开发一个功能，用户可以得到PDF格式的React页面内容。该页面基本上是患者病例的报告和数据可视化结果，其中包含许多SVG。另外还有一些特殊的请求来操纵布局，并对HTML元素进行一些重新排列。因此与原始的React页面相比
编程学友·2019-10-14 15:45

web前端入门到实战：HTML5的video和audio

从理论上来说，HTML5引入的和元素，使用起来和元素一样简单。对于支持HTML5的浏览器，不再需要使用插件（像flash）来在HTML文档中嵌入音频和视频：实际上，使用这些元素的时候要更加巧妙。由于各家浏览器制造商未能在对标准音频和视频编码支持上达成一致，因此，通常需要使用元素来为指定不同格式的媒体源：常用媒体事件和元素最重要的方法是play()和pause()方法，它们用来控制媒体开始和暂停媒体
编程学友·2019-10-14 15:19

web前端入门到实战：HTML标签和JS中设置CSS3 var变量

一、HTML标签中设置CSS变量如下：直接正常CSS语句一样在style属性中设置即可。效果如下截图：二、JS中设置CSS变量如下，HTML示意：web前端开发学习Q-q-u-n：767273102，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）如果要想让var(--color)生效，执行下面JavaScript代码即可：box.style.setPr
编程学友·2019-10-14 15:43

web前端入门到实战：CSS阴影效果的比较 drop-Shadow与box-Shadow

drop-shadow与box-shadow都是阴影效果（光晕效果）的css属性，二者最大的不同点在于：box-shadow只能制作矩形的阴影，而drop-shadow则可以制作和物件不透明区域完全相同形状的阴影。底下是二个css属性的用法：.drop-shadow{-webkit-filter:drop-shadow(12px12px7pxrgba(0,0,0,0.7));filter:drop
编程学友·2019-10-12 16:16

web前端入门到实战：CSS自定义属性+CSS Grid网格实现超级的布局能力

最近我还注意到的一件事就是CSS自定义属性。CSS自定义属性的工作方式有点像SASS和其他预处理器中的变量，主要的区别在于其它方法都是在浏览器中编译后生成，还是原本的CSS写法。CSS自定义属性是真正的动态变量，可以在样式表中或使用javascript即时更新，这使得它们具有更多的可能性。如果你熟悉JavaScript，我喜欢把预处理器变量和CSS自定义属性之间的区别想象成与const和let之间
编程学友·2019-10-12 16:27

web前端入门到实战：CSS实现页面翻转 正反两面展示不同的内容

要点：1页面旋转使用css3的rorateY(180deg)实现页面的翻转2使用backface-visibility实现正面元素翻转之后背面不可见，显示出反面的元素demo：html反面的内容正面的内容cssweb前端开发学习Q-q-u-n：767273102，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）div{width:200px;height
编程学友·2019-10-12 16:13

web前端入门到实战：CSS：scroll-snap滚动事件停止及元素位置检测

一、ScrollSnap是前端必备技能CSSScrollSnap是个非常好用的特性，可以让网页容器滚动停止的时候，无需任何JS代码的参与，浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现。而且CSSScrollSnap的兼容性非常好，移动端几乎可以放心使用。二、源自实际项目的scroll-snap场景今天下午在实现一个功能需求的时候，正好遇到一个场景非常适合使用Sc
编程学友·2019-10-12 16:04

web前端入门到实战：CSS实现平行四边形布局效果

如何实现下图所示的平行四边形布局效果？一、skewX的局限一提到平行四边形，条件反射般的就会想起CSStransform中的skew()/skewX()/skewY()方法，可以让元素斜切，从而实现平行四边形效果HTML如下：CSS如下，形状的关键就是下面红色高亮的transform:skewX(-10deg)：.input-x{display:inline-block;position:rela
编程学友·2019-10-12 16:21

web前端入门到实战：纯CSS实现柱形图

CSS在处理排版之强大，没有做不到，只有想不到。下面我们将一同实现一个柱状图。先打好一个具体的框架。我们利用无序列表做整体，里面的东西我们根本选择内联无素span，strong，em来填充。使命召唤:35%机器战争:40%CS:87%光环:45%半条命:23%解释一下，ul里面的每一个li就代表我们要统计的内容，span为柱身，em为统计项的名字，strong为统计数值。我们可以添加一些背景颜色来
编程学友·2019-10-11 16:53

web前端入门到实战：CSS3的all属性

一、兼容性如下图：兼容性还行，除了IE不支持，其他浏览器基本上都绿油油，目前自娱自乐，内网项目什么的都是可以用用的。二、all是干嘛用的all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。为什么会有这个CSS属性呢？我们可能知道，有些CSS属性值基本上所有CSS属性都有，比方说继承inherit!我们C
编程学友·2019-10-11 16:17

web前端入门到实战：css实现波浪线及立方体

这里是利用linear-gradient来实现，也就是画圆，然后利用底色来遮住部分圆；利用css3属性perspective加旋转实现立方体1.css实现波浪线htmlcss.card-list{display:flex;padding:20px;width:100%;}.wave-container{position:relative;margin-right:28px;width:20%;}.
编程学友·2019-10-11 16:29

web前端入门到实战：CSS 居中【整合】

text-align:center在父容器里水平居中inline文字，或inline元素vertical-align:middle垂直居中inline文字，inline元素，配合display:table，display:table-cell，有奇效。line-height与height联手，垂直居中文字margin:auto示例：|<``style``>#ex2_container{
编程学友·2019-10-11 16:59

web前端入门到实战：css文本两端对齐

在做表单时我们经常遇到让上下两个字段对齐的情况，比如姓名，手机号码，出生地。这样我们就要用到text-align，text-justify样式了。text-align直接设为justify就行了，text-justify的情况就复杂了，可能有人对它还不熟悉。IE的取值如下：auto:允许浏览器用户代理确定使用的两端对齐法则inter-word:通过增加字之间的空格对齐文本。该行为是对齐所有文本行最
编程学友·2019-10-11 16:08

web前端入门到实战：JavaScrip函数式编程原理简介

在长时间学习和使用面向对象编程之后，咱们退一步来考虑系统复杂性。在做了一些研究之后，我发现了函数式编程的概念，比如不变性和纯函数。这些概念使你能够构建无副作用的函数，因此更容易维护具有其他优点的系统。在这篇文章中，将通大量代码示例来详细介绍函数式编程和一些相关重要概念。什么是函数式编程函数式编程是一种编程范式，是一种构建计算机程序结构和元素的风格，它把计算看作是对数学函数的评估，避免了状态的变化和
编程学友·2019-10-10 15:02

web前端入门到实战：CSS3制作文字背景图

文字带上渐变色，或者说让文字透出图片。这些效果CSS属性也可以完成。方法一、利用CSS3属性mix-blend-mode:lighten;实现使用mix-blend-mode能够轻易实现，我们只需要构造出黑色文字，白色底色的文字div，叠加上图片，再运用mix-blend-mode即可，简单原理如下：核心代码如下：IMAGE.pic{position:relative;width:100%;hei
IT智云编程·2019-10-05 20:40

web前端入门到实战：css实现不规则图形的阴影（如对话框）

在日常开发中会使用带箭头的弹出对话框，有时为了美观或者突出，会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的，这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性，filter下的drop-shadow。.triangle{width:200px;height:60px;position:relative;filter:drop-shadow(005px#ccc);bac
IT智云编程·2019-10-05 20:25
上一页 5 6 7 8 9 10 11 12 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他