WEB前端入门第8页

web前端入门到实战：Html头部meta标签

meta元素有4个属性：name、http-equiv、content、charset.meta标签通过name属性来表述页面文档的元信息，通过http-equiv属性设置http请求指令，通过charset设置页面的字符编码。按照属性设置分类，meta可以分为三类:name属性和content属性组合,构成名称/值对，用于描述网站信息.标准的meta名称包括application-name、au

前端向南·2020-01-19 20:42

web前端入门到实战：CSS的文本格式化样式总汇

长度单位.box{width:300px;height:300px;background-color:red;}.box1{font-size:20px;/*em数值根据当前元素字体大小变化而变化*/width:2em;/*百分比随着父元素变化而变化*/height:50%;background-color:yellow;}专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①②分享学习方法和需要注意的

前端向南·2020-01-17 20:30

web前端入门到实战：Css背景定位

同一个标签可以同时设置背景颜色和背景图片，如果颜色和图片同时存在，那么图片会覆盖颜色。1.在CSS中有一个叫做background-position：属性，就是专门用来控制背景图片的位置2.格式：background-position:值1值2；值1的取值范围：leftcenterright值1代表背景图片的水平位置值2的取值范围：topcenterbottom值2代表背景图片的垂直位置值1和值2

前端向南·2020-01-17 19:19

web前端入门到实战：css如何实现n宫格布局?

常见应用场景现在的APP界面基本都是大同小异,宫格布局现在基本成了每个APP必然的存在.带边框,常用在"功能导航"页面无边框,常用在首页分类设计目标在scss环境下,通过mixin实现n宫格,并且可以支持"有无边框"和"每个格是否正方形":@includegrid(3,3,true);//3x3,有边框,且每个格为正方形@includegrid(2,5,false,false);//2x5,无边框

前端向南·2020-01-17 19:23

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

在日常开发中会使用带箭头的弹出对话框，有时为了美观或者突出，会添加一个阴影。由于图形不规则且可能是由多个元素拼接而成的，这样box-shadow属性可能不能满足需求。这里推荐一个类似的属性，filter下的drop-shadow。.triangle{width:200px;height:60px;position:relative;filter:drop-shadow(005px#ccc);bac

前端向南·2020-01-17 19:17

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

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

前端向南·2020-01-17 19:08

web前端入门到实战：html转义特殊字符代码大全

注意：使用数字代码或英文代码需要在代码后面加一个英文的分号「;」第二列转义符号为使用数字代码或英文代码后得的的符号html转义特殊字符代码大全原符号转义符号数字代码英文代码解释制表符 /tHorizontaltab换行 /nLinefeed回车 /rCarriageReturn空格 ’‘Space!!!惊叹号Exclamationmark”""&quo

前端向南·2020-01-16 21:39

web前端入门到实战：CSS3中的弹性盒子模型

介绍在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。而在css3当中，新增加了弹性盒子模型，弹性盒子模型是一种新增加的强大的、灵活的布局方案。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。新旧版本的弹性盒子模型在之

前端向南·2020-01-16 21:53

web前端入门到实战：CSS3 动画的实现

任务我们最近在SeatGeek更新了我们的“跟踪"图标，以匹配我们的新iPhone应用程序。首席设计师在PSD中创建了具有不同状态的心脏图标，并在下面创建了动画：什么是CSS3动画？在CSS中，动画是一种让元素逐渐改变样式的效果。您可以使用@keyframes关键字创建动画，后跟动画的名称。@keyframesheartAnimation{/*Animationcodegoeshere*/}要使动

前端向南·2020-01-16 21:44

web前端入门到实战：十个最流行的前端 CSS 库

前端CSS库，可以帮助用户分担样式设计，从而显著提高原型制作速度；用户则可以凭借前端框架，更加轻松地构建起直观的可用应用程序。目前市场上存在大量前端框架可供选择，本篇文章的主要内容就是关于那些目前最为流行且常用的框架。为什么要使用CSS库，而不选择自定义CSS？简而言之，时间是一种宝贵的资源，我们不该把它浪费在样式的构建身上。从零开始构建CSS是否性能好、效果佳？答案当然是肯定的。但除非您是位身经

前端向南·2020-01-16 20:46

web前端入门到实战：纯css实现输入框placeholder动效及输入校验

背景话不多说，我们能否用纯css实现以下效果:答案是肯定的。借助css:placeholder-shown:valid:invalid伪类及html5inputpattern属性就可以实现，:placeholder-shown伪类目前兼容性如下：直接上代码！html:JSBinclose邮箱专门建立的学习Q-q-u-n⑦⑧④-⑦⑧③-零①②分享学习方法和需要注意的小细节，互相交流学习，不停更新最新

前端向南·2020-01-16 20:02

web前端入门到实战：CSS属性width和height

width是定义元素内容区的宽度；height是定义元素在内容区的高度.在内容区外面可以增加内边距（padding）、边框（border）和外边距（margin），这样的话就成了我们常说的盒子模型，后期内容中会给大家讲到这些，在行内非替换元素会忽略width这个属性，也就是我们不定义这个元素的时候，默认值为auto，由内容将其撑开。绝对单位1.像素px(pixels)，在web上，像素px是典型的

前端向南·2020-01-15 20:06

web前端入门到实战：JavaScript中尺寸类样式

一：鼠标尺寸类样式都要事件对象的配合Tip:注意与浏览器及元素尺寸分开，鼠标类尺寸样式都是X,Y，浏览器及元素的各项尺寸时Height,Width1：检测相对于浏览器的位置:event.clientX/event.clientYclient:整个浏览器的可视区域,当点击鼠标的时候，鼠标事件发生的位置距离浏览器可视区域的左边和上边的距离clientX:鼠标事件发生的位置距离浏览器可视区域的左边的距离

前端向南·2020-01-15 20:19

web前端入门到实战：CSS不定宽高的垂直水平居中，9 种方式总汇

垂直居中，在CSS中是一个老生常谈的问题，面试的时候也会时常被提及。所以，今天我们就来聊聊9种不同的居中方法。有常见的flex、transform、absolute等等。也有CSS3的网格布局。还有伪元素的方法，是的，你没有看错，::after和::before也可以实现居中。1、flex大家的第一反应，可能就是flex了。因为它的写法够简单直观，兼容性也没什么问题。是手机端居中方式的首选。hor

前端向南·2020-01-15 20:51

web前端入门到实战：CSS实现雨滴动画效果

玻璃窗今天我们要实现的是雨滴效果，不过实现雨滴前，我们先把毛玻璃的效果弄出来，没有玻璃窗，雨都进屋了，还有啥好敲打的。.window{position:absolute;width:100vw;height:100vh;background:url("https://cn.bing.com//th?id=OHR.ParrotsIndia_ZH-CN8386276023_UHD.jpg");back

前端向南·2020-01-15 20:48

web前端入门到实战：JavaScript 事件冒泡与事件委托

事件冒泡IE的事件流叫做事件冒泡。顾名思义当事件发生后，事件就开始从里向外传播，查看下方代码：Document如果点击页面中的元素，那么这个chick事件就会按照如下顺序传播：click事件在直系DOM树的每一级节点都会发生（自下而上），直到document对象。事件委托又称事件代理。对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个父类事件处理程序，就可以管理某

前端向南·2020-01-06 19:54

web前端入门到实战：css中颜色

颜色如果我们相给页面设置颜色可以采用多种方法进行设置：一、命名颜色假设在设置页面的颜色时觉得一部分很小的颜色集中就足够了，就可以直接给定颜色的名称。CSS称这些有名称的颜色为命名颜色。命名颜色的关键字有限，css定义了17个标准色：浅绿色，黑色，蓝色，紫红色，灰色，橙色，绿色，石灰，栗色，海军，橄榄，紫，红，银，蓝绿色，白色和黄色。有的时候也许使用其他颜色值，并不在标准颜色之内的颜色也可以使用，它

前端向南·2020-01-06 19:24

web前端入门到实战：CSS中的cursor属性

css中的cursor这个属性是用来设置光标形状的。这个属性定义了鼠标指针放在一个元素边界范围内时所用的光标的形状。默认值：auto继承性：yes出现版本：css2JavaScript语法：object.style.cursor=‘pointer‘可以设置的值：|值|描述||url|需使用的自定义光标的URL。注释：请在此列表的末端始终定义一种普通的光标，以防没有由URL定义的可用光标。浏览器支持

前端向南·2020-01-06 18:27

web前端入门到实战：HTML自带懒加载技术

对于目前的图片懒加载，我们一般采用的是通过第三方库或懒加载库来实现，但是该方式的显著问题就是，必须按顺序执行：1、加载初始的HTML响应内容2、加载懒加载库3、加载图片假如浏览器能直接支持懒加载，那是最好的，这一想法也不是不可能哦！从Chrome75开始，我们可以通过切换两个开关来手动启用懒加载功能，可能最新的Chrome将会默认开启懒加载功能了，就是说不用我们手动去设置了。(注意这里仅说到了是C

前端向南·2020-01-06 18:48

web前端入门到实战：实现图形验证码

什么是图形验证码图形验证码是验证码的一种。验证码（CAPTCHA）是“CompletelyAutomatedPublicTuringtesttotellComputersandHumansApart”（全自动区分计算机和人类的图灵测试的缩写，是一种区分用户是计算机还是人的公共全自动程序。可以防止：恶意破解密码、刷票、论坛灌水，有效防止某个***对某一个特定注册用户用特定程序暴力破解方式进行不断的登

前端向南·2020-01-06 18:55

web前端入门到实战：HTML5表单标签

表单简介Form表单主要用于用户与Web应用程序进行数据的交互，它允许用户将数据发给web应用程序，网页也可以拦截数据的发送以便自己使用。form通常由一到多个表单元素组成，这些表单元素是单行/多行文本框，下拉菜单，按钮，复选框，单选按钮，时间表单元素时一般要配合label标签，用于描述其目的。其可用属性如下。action用于处理表单信息的应用程序的地址。method浏览器用来提交表单的HTTP方

前端向南·2020-01-04 19:18

web前端入门到实战：CSS定位

一、什么是定位改变元素在页面中的位置二、定位的分类1、普通流定位2、浮动定位3、相对定位4、绝对定位5、固定定位三、普通流定位页面中元素的默认定位方式，默认文档流，从上往下，从左往右1、每个元素都在页面有自己的空间2、每个元素都是从父元素的左上角开始显示3、块级元素都是按照从上到下的方式逐行排列，每个元素独占一行4、行内元素是多个元素在一行显示，从左往右逐个排列四、浮动定位1、当元素设置浮动后，该

前端向南·2020-01-04 19:39

web前端入门到实战：纯css制作电闪雷鸣的天气图标

效果效果图如下实现思路使用box-shadow属性写几个圆，将这些圆错落的组合在一起，形成云朵图案after伪元素写下面的投影样式before伪元素写黄色闪电的样式dom结构用两个嵌套的div容器就可以了，父容器来控制图标显示的位置，子容器用来写乌云的样式。而阴影和闪电的样式都用伪元素就可以了，这些都是在css中定义的。css样式css按照步骤来实现1、先写父容器样式，顺便给整个页面加个背景色，方

前端向南·2020-01-04 19:01

web前端入门到实战：CSS盒子模型

一、什么叫框模型页面元素皆为框（盒子）,定义了元素框处理元素内容，内边距，外边距以及边框的计算方式。二、外边距围绕在元素边框外的空白距离（元素与元素之间的距离）语法：margin，定义4个方向的外边距1、单边定义：margin-top/right/bottom/left（1）取值：以px为单位，%占父级元素宽度的%比正数：margin-left元素向右移动，margin-top元素向下移动负数：就

前端向南·2020-01-04 19:50

web前端入门到实战：CSS背景background

1、背景颜色background-color取值：合法的颜色值和transparent注：背景颜色和背景图片，填充都是从边框开始2、背景图片background-image：url（图片路径）3、背景图平铺background-repeat：取值：repeat：平铺no-repeat：不平铺repeat-x：水平方向平铺repeat-y：垂直方向平铺4、背景图定位background-posion

前端向南·2020-01-04 19:10

HTML:HTML 快速入门

文中内容基于：黑马/传智播客的《Web前端入门教程》中的前两节。

CnPeng·2020-01-03 19:28

零基础小白能学Web前端吗该如何才能学好JS

Web前端入门相对简单、应用领域众多，是零基础学习IT开发的首选语言。

千锋郑州·2020-01-03 16:33

web前端入门到实战：css中display属性

display属性共有4个值：blcok：块级元素inline-block：行内块级元素inline：行内元素none：隐藏元素，不占据空间1.块级元素常见的块级元素有div,p,ul,ol,li,h1~h6等块级元素会默认占满父元素的宽度且独占一行尽可能的占满父元素的宽度2.行内元素常见的行内元素有span,img,a,input,button,textarea、select等，他的宽度完全由内

前端向南·2020-01-02 18:23

web前端入门到实战：css绝对定位和相对定位、固定定位

1、绝对定位position：absolute；绝对定位指的是通过规定HTML元素在水平和垂直方向上的位置来固定元素，基于绝对定位的元素不会占据空间。绝对定位的位置声明是相对于已定位的并且包含关系最近的祖先元素。如果当前需要被定为的元素没有已定位的祖先元素作为参考值，则相对于整个网页。定位和布局.big{width:900px;height:600px;background-color:black

前端向南·2020-01-02 18:17

web前端入门到实战：css实现的骨架屏方案

优点简单，不需要工程，不用puppeteer生成骨架dom，也不需要二次开发维护定制程度高，想怎么搞就怎么搞不臃肿，只给你想要的缺点自动化程度低，需要在骨架dom上手动添加类协同要求高，不像工程化能通过工程去约束思路通过伪元素实现骨架样式，通过操作样式实现骨架和页面的动态切换实现css部分(scss写法)通过after伪元素生成骨架样式，并通过absolute覆盖到实际元素上专门建立的学习Q-q-

前端向南·2020-01-02 18:25

web前端入门到实战：CSS新属性实现特殊的图片显示效果

前端向南·2020-01-02 18:42

web前端入门到实战：纯CSS实现加载转圈样式

不同的项目中对于等待加载时转圈圈的样式是不同的，有的是传统的转圈的gif图片，见得比较多的是将转圈圈的换成了可爱的图标。有时候项目中加入等待加载的图片会很违和，不符合美观，所以需要用CSS做一个。下面是一个纯CSS实现转圈样式的例子。Document.load-container{background-color:#F1F1EA;width:auto;height:700px;position:r

前端向南·2020-01-02 18:14

web前端入门到实战：使用CSS实现图片帧动画与曲线运动

在前端开发中，提到动画，我们可以：直接利用DOM实现动画。利用canvas实现动画。利用svg实现动画。直接用一张gif动图。利用图片实现帧动画。...所有动画的基本原理都是：在短时间内连续依次展示对应的图片，这样在视觉上看起来就是'动'的了。本文主要来说一说第4点和第5点。图片帧动画当我们要实现的动画效果比较复杂，而且开发排期比较紧的情况下，用一张gif动图来实现动画是成本最低，效果也不错的一种

前端向南·2019-12-31 19:15

web前端入门到实战：JS浮点数值问题

一、JS能够正确表示的整数Math.pow(2,53)//即9007199254740996"9007199254740996".length//169007199254740993//9007199254740992备注：1.2的53次方，并不是按数值长度设置的，2.总数量级为百万亿3.超出会显示，但是不正常(表现为max+1=max;输入16~21之间位数的9会直接往上+1等;)所以不能用于正

前端向南·2019-12-31 19:13

web前端入门到实战：jQuery中的事件、动画、表单应用

什么是事件?页面对不同访问者的响应叫做事件。事件处理程序指的是当HTML中发生某些事件时所调用的方法。在事件中经常使用术语"触发"（或"激发"）常用click(）方法触发DOM的加载$(document).ready()方法与window.onload()方法的区别：事件绑定使用bind（）方法为每个匹配元素的特定事件绑定事件处理函数。bind()方法的调用格式：bind(type,[data],

前端向南·2019-12-31 19:04

web前端入门到实战：7种必须知道的CSS长度单位

众所周知CSS技术我们虽然很熟悉，在使用的过程却很容易被困住，这让我们在新问题出现的时候变得很不利。随着web继续不断地发展，对于新技术新解决方案的要求也会不断增长。因此，作为网页设计师和前端开发人员，我们别无选择，必须熟悉我们手上的工具，做到知己知彼，这样才能百战不殆。这就意味着有那么些个特别的货，虽然平常都不怎么会用上，但是一旦某个地方需要它们了，他们就真的是特么得合适不过来了呢。rem我们首

前端向南·2019-12-31 19:31

web前端入门到实战：css实现竖直居中的 N 种场景及 N 种方法

inline或者inline-*的元素竖直居中可以借助padding,line-height,vertical-align等属性。有如下两种具体情景：单行竖直居中，如单行文本或者链接这种情况，通过给元素上下添加相同大小的padding值即可实现竖直居中。单行文本竖直居中，添加相同的padding-top&padding-bottom值body{margin:0;}.container{backgr

前端向南·2019-12-31 19:23

web前端入门到实战：CSS基本格式以及文字相关的属性

一、CSS格式1.注意点：（1）style标签必须写在head标签的开始标签和结束标签之间（也就是必须和title标签师兄弟关系）（2）style标签中的属性type属性其实可以不写，默认就是type="text/css"（3）设置样式是必须按照固定格式来设置，key:value;其中不能省略冒号和分号（最后一个分号的时候可以省略，但是我们不提倡）二、CSS包括什么？CSS包括选择器和属性两部分其

前端向南·2019-12-28 19:53

web前端入门到实战：HTML标签的权重

一、什么是优先级的权重1.作用：当多个选择器混合在一起的时候，我们可以通过计算权重来判断谁的优先级最高。2.权重的计算规则公共代码：试炼语句web前端开发学习Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）（1）首先计算选择器中有多少个id，id多的选择器优先级最高；例子：#identity1.box2{color

前端向南·2019-12-28 19:06

web前端入门到实战：HTML-div和span标签

一、div标签1.作用：一般用于配合CSS完成网页的基本布局2.例子：.head{width:980px;height:100px;background:red;margin:auto;}.content{width:980px;height:300px;background:green;margin:auto;}.footer{width:980px;height:100px;backgroun

前端向南·2019-12-28 19:46

web前端入门到实战：制作一个百度首页

一、我们制作一个百度首页作为练习，可直接复制该代码保存后缀名为.html来查看d93_baidu_home_exercise.header{height:250px;/*background-color:red;*/}.content{height:220px;/*background-color:pink;*/}.footer{height:200px;/*background-color:g

前端向南·2019-12-28 19:35

web前端入门基础

web前端基础笔记学习web前端开发基础技术需要掌握：HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的：HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。JavaScrip

Z314·2019-12-22 00:38

web前端入门到实战：内边距属性、外边距属性

一、内边距属性1.定义：边框和内容之间的距离就是内边距2.分开写padding-top:数字px；padding-left:数字px；padding-bottom:数字px；padding-right:数字px；3.连写：padding：上右下左；4.注意点：（1）给标签设置内边距之后，标签占有的宽度和高度会发生变化（2）内边距也会有背景颜色web前端开发学习Q-q-u-n：⑦⑧④-⑦⑧③-零①②

前端向南·2019-12-21 19:37

web前端入门到实战：外边距合并现象、盒子模型以及宽度和高度

一、在默认布局的垂直方向上，默认情况下外边距是是不会叠加的，会出现合并现象，谁的外边距较大，就听谁的；但是在水平方向就不会出现这种状况，我们举个例子span{display:inline-block;width:100px;height:100px;border:1pxsolidred;}div{width:100px;height:100px;border:1pxsolidgreen;}/*我们

前端向南·2019-12-21 19:50

web前端入门到实战：背景关联和缩写以及插图图片和背景图片的区别

一、背景属性缩写的格式1.backgound:背景颜色背景图片平铺方式关联方式定位方式2.注意点：这里的所有值都可以省略，但是至少需要一个3.什么是背景关联方式默认情况下，背景图片会随着滚动条的滚动而滚动，如果不想这样，那么我们可以修改它们的关联方式4.格式：background-attachment:值；值的取值范围：scroll：默认值，会随着滚动条而滚动。fixed:不会随着滚动条滚动而滚动

前端向南·2019-12-21 19:36

web前端入门到实战：css3动画 Transition

CSStransitions提供了一种在更改CSS属性时控制动画速度的方法。其可以让属性变化成为一个持续一段时间的过程，而不是立即生效的。比如，将一个元素的颜色从白色改为黑色，通常这个改变是立即生效的，使用CSStransitions后该元素的颜色将逐渐从白色变为黑色，按照一定的曲线速率变化。这个过程可以自定义。CSStransitions可以决定哪些属性发生动画效果(明确地列出这些属性)，何时开

前端向南·2019-12-21 19:13

web前端入门到实战：css3实现半圆和圆效果

在css2中，如果需要失效一些圆角或者半圆等等效果，一般是要通过ps等软件来处理的，在CSS3中，则不需要了，只需要通过border-radius就可以实现，大大方便了开发的效率。无论圆角、圆弧、实心圆、半圆，css3的实现代码都是border-radius属性，border-radius不但可以定义圆半径和圆角大小，还可以画出各种方向的半圆。代码CSS3*{margin:0;padding:0;

前端向南·2019-12-21 19:49

web前端入门到实战：HTML5实现首页动态视频背景

你想实现动态视频作为背景的首页吗？来，一起来学习，本文将带你一起实现H5动态视频背景；首先网上找一段清晰的视频下载下来，最好是MP4格式的；下载好了之后我们新建一个html文件来写代码：html代码：一个video标签包裹着，source代表来源文件，autoplay属性是自动播放，loop代表循环播放，muted代表无声播放；如果不加入autoplay属性是无法自动播放的，页面将会黑屏展示；cs

前端向南·2019-12-19 20:48

web前端入门到实战：布局之display属性

在CSS中插何一个元素都是一个盒子，甚至是文本节点也是一个盒子（匿名盒子）；都有自己的视觉格式化（不同的盒子）。而其中CSS的display属性又可以显式的修改每个盒子的视觉格式化模型，比如说从行内级盒子变成块级盒子。那在这一章节中，我们就来一起探讨CSS的display属性，该属性也是学习CSS不可或缺的属性之一。display的基本介绍CSS的display属性在W3C规范中是一个独立的模块，

前端向南·2019-12-19 20:59

web前端入门到实战：纯CSS瀑布流与JS瀑布流

瀑布流又称瀑布流式布局，是比较流行的一种网站页面布局方式。即多行等宽元素排列，后面的元素依次添加到其后，等宽不等高，根据图片原比例缩放直至宽度达到我们的要求，依次按照规则放入指定位置。为什么使用瀑布流瀑布流布局在我们现在的前端页面中经常会用的到，它可以有效的降低页面的复杂度，节省很多的空间，对于整个页面不需要太多的操作，只需要下拉就可以浏览用户需要看到的数据；并且，在当前这个APP至上的时代，瀑布

前端向南·2019-12-19 20:09

推荐频道

WEB前端入门