天道酬勤,学无止境

CSS+CSS3动画——笔记整理

1.CSS使用的方法有三种:
1)行内样式:在需要的标签中使用style属性并且在它的值上使用CSS属性与值就可以了
2)内联样式表:当前页面中使用style标签并且在这个标签中使用CSS样式表的格式来使用样式属性。
3)外联样式表:当前页面中使用link标签来外链一个样式表

2.样式选择器:让样式表中的样式在选中的页面元素生效。
基础样式选择器:
格式:*{样式}
作用:页面中所有元素都选中

标签选择器:
格式:标签名{样式}
作用:页面中所有该标签元素都选中

ID选择器:
格式:#ID{样式}
作用:页面中所有使用该ID名的元素都选中

class选择器:
格式:.class名{格式}
作用:页面中所有使用该class名的元素都选中

复合选择器
并列选择器:
格式:选择器,选择器…{样式}
作用:页面中所有并列中的选择器的元素都选中

大继承选择器:
格式:父级选择器 子级选择器 子子级选择器…{样式}
作用:页面中所有符合选择器路径的元素都选中,可以跳级

小继承选择器:
格式:父级选择器>子级选择器>子子级选择器…{样式}
作用:页面中所有符合选择器路径都选中,不可以跳级

ID名的命名规范:不要使用特殊字符,不能使用数字开头。
class名的命名规范跟ID一样。

在CSS中一般使用的单位:
HTML中是可以不写单位的,但在CSS中单位是必须要写的。
常用单位有px(像素)、%(百分比)、vh(屏高)、vw(屏宽)、rem(动态值)。

3.CSS3选择器

选择器例子例子描述CSS
.class.intro选择class=“intro”的所有元素1
#id#first选择器id="first"的所有元素1
**选择所有元素2
elementp选择所有p元素1
el,eldiv,p选择所有div元素的所有p元素1
el eldiv p选择div元素内部的所有p元素1
el>eldiv>p选择父元素div元素的所有p元素2
el+eldiv +p选择紧接在div元素之后的所有p元素2
[attirbute][target]选择带有target属性所有元素2
[attirbute=value][target=_blank]选择target=_blank所有元素2
[attirbute~=value][title~=flower]选择title属性包含单词"flower"的所有元素2
[attirbute|=value][lang|=en]选择lang属性值以"en"开头的所有元素2
:linka:link选择所有未被访问的链接1
:visiteda:visted选择所有已被访问的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标指针位于其上的链接1
:focusinput:focus选择获得焦点的input元素2
:first-letterp:first-letter选择每个p元素的首字母1
:first-linep:first-line选择每个p元素的首行1
:first-childp:first-child选择属于父元素的第一个子元素的每个p元素2
:beforep:before在每个p元素的内容之前插入内容2
:afterp:after在每个p元素的内容之后插入内容2
:lang(la)p:lang(it)选择带有以"it"开头的属性值的每个p元素2
el1~el2p~ul选择前面有p元素的每个ul元素3
[attribute^=value]a[src^=“https”]选择其src属性以"https"开头的每个a元素3
[attribute$=value]a[src$=".pdf"]选择其src属性以".pdf"结尾的所有a元素3
[attribute*=value]a[src*=“abc”]选择其src属性中包含"abc"子串的每个a元素3
:first-of-typep:first-of-type选择属性其父元素的首个p元素的每个的每个p元素3
:last-of-typep:last-of-type选择属于父元素的最后p元素的每个p元素3
:only-of-typep:only-of-type选择属于其父元素唯一的p元素的每个p元素3
:only-childp:only-child选择其父元素的唯一子元素的每个p元素3
:nth-childp:nth-child(2)选择属于其父元素第二个p元素的每个p元素3
:nth-last-child(n)p:nth-last-child(2)同上,从最后一个子元素开始计数3
:nth-of-type(n)p:nth-of-type(2)选择属于其父元素的第二个子元素每个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)同上,但是从最后一个子元素开始计数3
:root:root选择文档的根元素3
:emptyp:empty选择没有子元素的每个p元素(包含文本节点)3
:target#news:target选择当前活动的#news元素3
:enabledinput:enabled选择每个启用的input元素3
:disabledinput:disabled选择每个禁用的input元素3
:checkedinput:checked选择每个被选中的input元素3
:not(selector):not(p)选择非p元素的每个元素3
::selection::selection选择被用户选取的元素部分3

伪类选择器

  • 状态伪类选择器:选择的元素在指定的状态下才生效
  • 位置伪类选择器:选择的元素在指定的位置下才生效

背景属性使用方法需要注意的地方:

两种情况:

  1. 图片比元素要小
    1)图片会从左上角开始出现并且默认平铺铺满整个元素
    2)在使用背景定位属性时,图会出现在元素的指定位置
  2. 图片比元素要大
    1)图片会从左上角开始显示
    2)在使用背景定位属性时,会定位在图片对应的位置上进行显示

样式选择器的权重
      页面中一个元素可以给多个样式选择器给选中。但如果这些选择中的属性有冲突时,浏览器会根据选择器的权重来使用样式属性。相当于优先使用权重高的选择器样式。
*        0.1
标签选择器       1
class选择器       1.0
id选择器       1.0.0

如果是继承选择器它的权重是所有样式权重之和
.box1 span{}        1.1
.box1 .log{}        2.0

在权重的计算上,是按位计算。并且位之间是没有进位设定最大权重的样式是行内样式。

块级标签与行级标签

块级标签:无论它的内容有多少,它都占满整块。即它的左右不允许其它标签跟它是同行。

行级标签:又叫做行内标签,它的大小只跟内容有关。它允许其它行级标签在它的左右。也就说允许其它的行级标签或内容与它同行。

一个网页的重构本质是对元素与素材的排版与定位。

排版方式:

  1. 普通流:使用元素本身排版的属性进行排版
  2. 浮动流:对元素加上浮动属性,该元素就成了浮动流的排版方式
            浮动流的基本排版口诀:浮到不能再浮,然后靠到不能再靠。

浮动流的特性:

  1. 当浮动流元素进行换行后,换的地方就会定义成新的最顶部
  2. 浮动流的元素空间对于普通流元素来讲是半释放的

由于普通跟浮动的这些相互的特性影响,所以我们需要进行清除浮动

清除浮动的方法:

  1. 设定使对应宽高
        优点:方便快捷
        缺点:不能自适应

  2. 相关的元素设置为浮动
        优点:能够自适应
        缺点:会带来新的浮动影响

  3. 使用有清除浮动属性的元素
        优点:能够自适应,也不会带来新的浮动影响
        缺点:页面就会多出非常多没有内容的元素

  4. 使用CSS3组合属性来完成清除浮动
        现在基本上所有网站都会使用的方式

绝对定位    postion:absolute;
    特性:绝对定位的元素空间完全释放的。绝对定位元素所在的位置(定位)只跟两个东西有关系:

  1. 参照元素
  2. 定位属性

元素定位方法:

  1. 外边距:也叫做外补丁,它的意义是制定方向的外部与别的元素之间的距离
    margin
        只有一个值时,上下左右都为该值
        只有两个值时,上下与左右
        有三个值时,上、左右、下
        有四个值时,上、右、下、左
  2. 内边距:也叫做内补丁,它的意义是指定元素指定方向的内部与别的元素之间的距离
    padding     跟外边距相同
    注意:当我们使用内边距时,元素的可视域会变大
    可视域指的是用户所看到这个元素的大小,就是可视域。

可视域 = 可作用域 + 内边距 + 边框
元素的实际占用空间 = 可视域+不可视域

定位属性:top、left、right、bottom

它只有在元素使用position之后才有效。这些属性的意义是指定位元素跟参照元素某方向之间的距离。

参照元素:默认下所有绝对定位元素的参照元素是浏览器窗口一般情况下会让父级元素作为新的参照元素,这时需要让父级元素设置为相对定位position:relative;

相对定位可以认为使用的排版方式是原本方式。如果对相对定位元素使用定位属性。那么它的位置是相当于原来位置来定位。

固定定位     position:fixed;
    特性:跟绝对定位基本一样。空间也是完全释放,但它只有有一个参照元素就是浏览器窗口。固定定位是只跟窗口位置有关,跟页面没有关系。

元素的溢出处理
overflow
hidden:超出隐藏
auto:当超出时出现滚动条
scroll:所有时间都显示滚动条

CSS3中的动画效果
方法1:过渡
    transition是过渡属性一般用于伪类选择器对元素变化时执行比较简单动画效果。这些效果就是从元素原始状态到最终状态之间的变化动画。
    transition-property 规定设置过渡效果的CSS属性的名称
    transition-duration规定完成过渡效果需要多少秒或毫秒
    transition-timing-function规定速度效果的速度曲线
    transtions-delay定义过渡效果何时开始

这个过渡必要的两个属性值为CSS的属性名还有动画执行的时长

如果一个元素需要有多个属性进行过渡的话,需要在transition中使用,进行分割

如果这些属性都是统一进行变化的话,也可以直接使用all

基本上所有CSS的属性都可以进行过渡,但也有一些属性是没有办法过渡的,这些属性一般来讲就是会直接让元素的本质变化的属性。或者值是没有办法进行量变的。通过这些来判断这个属性是否可以进行过渡。

方法2:动画
    animation是专门用于比较复杂的页面动画的CSS属性。并且使用该方法是需要@keyframes这个属性来进行配合使用

    animation是用于规定元素动画基本设置
格式:
    animation:使用的动画名 执行时长 动画执行曲线方法 次数(infinite) 是否反向播放(alternate)
@keyframes 是用于设置元素动画的关键帧

圆角属性的使用
    border-radius:这个属性跟margin类似

如果使用四个值的话,所代表的方向是:左上、右上、右下、左下
一般情况下,会使用%与px等具体值来进行赋值。但是百分百与具体值所显示的效果是不一样的,使用时需要注意。

一般情况下,动画都是线性动画,也就是说所有@keyframes里的关键帧之间都会自动补充对应的动画效果。有时候我们也需要使用非线性动画,非线性动画可以直接理解为关键帧之间只放入要求的帧数动画。

steps这是非线性动画的属性值
理解steps
steps函数制定了一个阶跌函数
第一个参数指定了时间函数中的间隔数量(必须是正整数)
第二个参数可选,接受start和end两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为end。
step-start等同于steps(1,start),动画分为一步,动画执行时为开始左侧端点的部分为开始;
step-end等同于steps(1,end),动画分为一步,动画执行时以结尾端点为开始,默认值为end

总结:
    steps函数,它可以传入两个参数,第一个是一个大于零的整数,他是将间隔动画等分成指定数目的小间隔动画,然后根据第二个参数来决定显示效果
    第二个参数设置后其实和step-start,step-end同义,在分成的小间隔动画中判断显示效果,可以看出:step(1,start)等于step-start,steps(1,end )等于step-end

最核心的一点就是:timing-function作用于每个关键帧之间,而不是整个动画拆分

CSS3动画效果的核心就是,从元素某一个状态到另一个状态的动画演示。    @keyframes是用于设置元素动画的关键帧

多重背景
    使用3D属性进行定位需要注意的事项:

  1. 元素在3D旋转后,它的轴方向是不是改变的
  2. 元素选择跟圆(transform-origin)点有关。是以视点所在的轴上进行旋转
  3. 使用transform时是会根据里面的值的顺序进行旋转移动,所以一定要注意它的使用的顺序。

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 【前端学习笔记day01】前端学习笔记目录
    前端学习笔记 前端开发概述HTML 2.1. html概述和基本结构 2.2. html标题标签 2.3. html段落标签、换行标签与字符实体 2.4. html块标签、含样式的标签 2.5. html图像标签、绝对路径和相对路径 2.6. html链接标签 2.7. html列表标签 2.8. html表单 2.9. html表格 2.10. 页面布局概述 2.11. table布局及实例CSS 3.1. css基本语法及页面引用 3.2. css文本设置 3.3. css颜色表示法 3.4. css选择器 3.5. css盒模型 3.6. 盒模型的实际尺寸 3.7. 盒模型使用技巧及相关问题 3.8. css元素溢出 3.9. 块元素、内联元素、内联块元素 3.10. 浮动 3.11. 定位 3.12. background属性 3.13. 特征布局实例讲习Photoshop 4.1. 常用图片格式 4.2. photoshop常用图片处理技巧 4.3. ps效果图制作实例 4.4. photoshop批量切图技巧 4.5. Photoshop制作雪碧图技巧前端页面开发流程HTML5与CSS3 6.1. CSS权重 6.2. CSS3新增选择器 6.3. CSS3圆角、rgba 6.4. CSS3 transition动画 6.5. CSS3 transform变换 6.6
  • CSS3学习笔记----------Day05
    CSS3动画 一个Demoanimation 语法animation-play-state语法animation-iteration-count语法animation-timing-function语法 @keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果 一个Demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3动画</title> <style> @keyframes myanime { from {background-color: #6930c3} to {background-color: #00c853} } .box{ width: 100px; height: 100px; animation: myanime 2s; } </style> </head> <body> <div class="box"> </div> </body> </html> animation 语法 <style> @keyframes myanime { 0% {background-color: #6930c3;height: 100px} 50% {background-color: #00c853
  • CSS3学习笔记:CSS3过渡Transition
    过渡(Translation)允许css的属性值在一定的时间区间内平滑地过渡 在鼠标单击、聚焦、被点击或对元素任何改变中触发,并圆滑地以动画效果改变css的属性值。 即控制变化的快慢,放大变化的过程。 1.transition-property属性 锁定哪些属性需要过渡 语法:transition-property:none|all|property; 参数说明: none:没有属性改变 all:所有属性改变,默认值 property:元素属性名 2.transition-duration属性 设置对象过渡的持续时间 语法:transition-duration:time; time默认值为0,以秒或毫秒计 示例: <!DOCTYPE html> <html> <head> <title>练习网页</title> <style type="text/css"> img{ transform: rotate(0deg); transition-property:transfrom; transition-duration: 2s; } img:hover{ transform:rotate(180deg); transition-property:transfrom; transition-duration: 2s; } </style> </head> <body> <div>
  • Web前端基础之CSS3后学习笔记
    这一篇是接着上一篇末尾的css知识点来的 开始 css规则: 单位值:px 像素单位 1)字体规则: font-size 字体大小 faont-weight 字体粗细 normal/bold(加粗)/bolder(比当前继承的值大一些)/100-900 font-family 字体族 font-style 风格 line-height 行高 使用绝对单位,可以进行垂直居中 速写: font:[font-weight][font-style] font-size/line-height font-family 2)网络字体(字体图标库) iconfont【阿里巴巴的字体图标库】 1. 选取自己想要图标 2. 生成项目 3. 按照说明进行使用(在图标库中有使用说明,3种使用方式) 3)文本 text-align 文本对齐方式 left/center/right text-indent 文本缩进 text-decoration 文本样式 line-through 删除线 overline 上划线 underline 下划线 none text-transform 字体大小写转换 uppercase/lowercase … 4)列表 list-style:none 删除列表样式 5)css盒子模型 所有的html元素都能当作一个盒子,它是CSS技术所使用的一种思维模型。 包含属性
  • HTML5、CSS3、移动web开发——学习笔记(未完)
    目录【一】、HTML5【二】、CSS3【三】、移动Web开发之流式布局 【一】、HTML5 目录什么是HTMLH5 新增语义化标签H5 新增多媒体标签H5 新增 input 表单 、表单属性 目标了解 H5 新变化掌握 H5 新增语义化标签掌握 H5 新增多媒体标签掌握 H5 新增 input 表单、表单属性 一、 什么是HTML5 1. HTML5简介 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。作为新HTML语言,具有新的元素,属性和行为 XHTML可扩展超文本标记语言HTML5XHTML是一种增强了的HTML,它的可扩展性和灵活性将适应未来网络应用更多的需求。基础学习的是XHTML具有更大的技术集,允许更多样化和强大的网站和应用程序。增加了新特性:语义特性,本地存储特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性。这个集合有时称为HTML5和它的朋友们(包括新的css、js),通常缩写为HTML5 2. 广义的HTML5 广义的HTML5是HTML5本身 + CSS3 + JavaScript这个集合有时称为HTML5和朋友们,通常缩写为HTML5虽然HTML5的一些特性仍然不被某些浏览器支持,但是它是一种发展趋势HTML5 MDN介绍:https://developer
  • 【源码下载】150款+炫酷的CSS3 loading加载动画,总有一款适合你
    【源码下载】150款+炫酷的CSS3 loading加载动画,总有一款适合你 web小二 web前端开发 记得很早之前,我跟大家分享过一期,关于CSS loading加载动画的源码,里面有很多炫酷的效果,不知道大家是否还有印象?如果没有一点印象的话,可以点击这篇文章去看一下,《75款纯CSS3打造的Loading加载的炫酷动画效果》,可以作为自己一个loading加载动画的专题练习。 虽然,我不知道,这样的练习,对你有多少帮助,但是我一直觉得,学习就是这样一个慢慢积累的过程,我们不可能一口吃成一个胖子,但是胖子,都是这样一口一口吃出来的。 前几天,刚好接到一个做H5的任务,我参与其中的设计工作,里面有一部分动效交互的设计工作,之前,这块内容涉及不多,然后,我就上网找了一些参考案例,今天整理了一下,既可以作为交互设计的动效设计参考,也可以作为前端开发工程师的一个学习练习。 试想,假如与你配合的设计师,也设计出了这样的动画,需要你来开发实现,你能够实现出来吗? 我不知道,作为程序员的你,是否有这样的“职业病”,就是在网上,有时候无意间看到一个很炫酷的效果,你会去研究一下,别人是怎么实现这个效果的吗?会去看一下别人的源码吗? 反正我是一直都有这个毛病,看见别人实现的效果很酷的话,就会情不自禁的去想,这个效果是怎么实现的,如果自己不知道的话,我就会去看一下别人的源代码。 后来
  • 分享996个实用的JavaScript特效你要的全在这里
    链接:https://pan.baidu.com/s/1eL8ASFY7BGiIrVXCtgPzgQ 密码:rbqo 我就不信没有你想要的。996个好看且实用的JavaScript特效,总有一款适合你,小弟在某付费网站上收集的,虽然不是我的原创但是小弟这996个Js也是花了很多时日!下面是JS的名字,我放了一些图片,所有图片全都放进去是不行的996个图太多,大家下载后可以看到。 css3聚光灯射线旋转动画特效 js圆形虚线指针时钟特效 HTML5 Canvas透明气泡动画特效 jedate选择一年范围日期插件 点击卡片全屏打开css3特效 人物遥控无人机CSS3动画 css3 svg仿微信加载框代码 水面上的月亮CSS3动画特效 不规则抽象彩带HTML5动画 Canvas透明丝带飘动特效 js点击弹窗弹出登录框代码 原生js轮播图自动切换代码 css3手机音乐播放器ui布局 CSS3天气预报APP应用UI界面 纯CSS3卡通甜甜圈动画特效 css3 hover悬停图片显示描述代码 HTML5 Canvas星星笑脸动画 HTML5 SVG叶子飘落动画特效 HTML5 Canvas射线能量光圈动画 js时钟带文本标签月份和星期 CSS3电子结算单折叠显示特效 HTML5 Canvas圆点波浪动画 纯CSS3绘制黑色小萌猫特效 CSS3五星红旗国庆节庆祝动画特效 H5
  • html5学习笔记——三、图文展示网页设计
    常用图像标签 < img>标签 < img>标签用于定义网页中的图像,语法格式如下: <img src="图片路径" alt="图片无法显示时显示的文字"/> < figure >标签和< figcaption>标签 当需要在网页中添加一个插图时 ,就可以使用 < figure> 标签来实现css用于背景设置的常用属性如下图所示: css背景设置的复合写法 css阴影和渐变 盒阴影 例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> 盒子box-shadow</title> <style type="text/css"> .box-shadow { width: 200px; height: 200px; box-shadow: #41a8ff 3px 5px 5px; line-height: 200px; margin: 200px auto; color: blue; text-align: center; background-color: #11aa99; } </style> </head> <body> <div class="box-shadow">box-shadow</div> </body> </html> 效果: css3渐变: 线性渐变: 例: <
  • CSS3学习笔记
    1、CSS简介 ①层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 ②CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或优化写法,针对各类人群,有较强的易读性。 2、CSS基础 ①最基础的CSS元素及属性 ---Style元素 ---Font-size设置文本大小的属性 ---Color设置文本颜色的属性 ②制作一个初级CSS设计 ---一共有三种方法创建CSS *使用元素内嵌样式表 *使用文档内嵌样式表 *使用外部样式表 ③层叠样式表的含义等级 ④注明: ---元素内嵌样式表不同属性值需要用分号分开来 ---文档内嵌样式表一般放在<head>里面 ---外部样式表需要创建一个新的CSS文档,如CSS项目里的a.css文档,引入至html文档方式如下: <link rel="stylesheet" type="text/css" href="a.css" /> ---样式表层叠方式优先考虑元素内嵌样式表,然后是文档样式表
  • [推荐收藏]JavaScript书籍精读笔记系列导航
    写在前面 去年我整理了一份「前端工程师必备书籍清单.md」,得到很多人的关注。这份清单里面的书籍大部分我都看过了,但有些知识点难免看后就忘。之前看这些书对一些重点都进行了记录,最近一段时间计划把这些重点笔记整理下来。一方面让自己能通过快速翻阅来拾起知识点,另一方面希望能与更多志同道合的技术人进行交流。以下是一份分类目录,整理出来的书籍笔记就会在这里添上链接,欢迎star收藏。每本书一篇笔记,笔记后面会附上书籍pdf,方便下载,书籍pdf上也把这些的重要知识点都标记出来了,欢迎下载细读。持续更新,推荐收藏… 分类 A - HTML/HTML5系列B - CSS/CSS3系列C - JavaScript基础D - JavaScript应用E - JavaScript进阶F - JQuery类库G - MVVM框架H - 前端工程化I - ES6+系列J - HybirdApp系列K - Node.js系列L - 附加系列 A - HTML/HTML5系列 《HTML5秘籍》《HTML5_Canvas详解》 B - CSS/CSS3系列 《响应式web设计HTML5和CSS3实践》《CSS世界》 C - JavaScript基础 《JavaScript语言精粹》《学习JavaScript数据结构与算法(第2版)》《你不知道的JavaScript(上卷)》 D - JavaScript应用
  • 【前端】Angular8入门教程笔记+Angular material安装与使用
    一、 Angular介绍 Angular是谷歌开发的一款开源的web前端框架,诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架,已经被用于Google的多款产品当中。 根据项目数统计angular(1.x 、2.x 、4.x、5.x、6.x、7.x 、8.x、9.x)是现在网上使用量最大的框架。 Angular基于TypeScript和react、vue相比 Angular更适合中大型企业级项目。 目前2019年12月25日angular最新版本angular9.x。根据官方介绍,Angular每过几个月就会更新一个版本。Angular2.x以后所有Angular版本用法都是一样的,此教程同样适用于Angular7.x 、Angular8.x、Angular9.x 以及未来的其它版本… 二、学习Angular必备基础 Angular的学习路线建议如下: HTML、CSS、js → → node.js → → Angular 补充:如果具备es6和Typescript的基础更容易理解Angular,但没有学过这两门语言也不影响Angular的学习,不过要做Angular的项目最好熟悉HTML、CSS、js,过一遍有印象等开始做Angular的项目时可以边做边查相应的知识。 必备基础的学习基础视频分享(根据需要自取,讲解的很详细)
  • CSS学习笔记(一)——CSS基础&选择器合集
    CSS介绍 整理完了HTML的笔记,接下来就是CSS了。我们可以使用HTML构建稳定的结构基础,而页面的风格样式控制则交给CSS来完成。网页的样式包括各种元素的颜色、大小、线形、间距等等,这对于设计或维护一个数据较多的网站来说,工作量是巨大的。好在可以使用CSS来控制这些样式,这将大大提高网页设计和维护的效率,并且使网页的整体风格很容易做到统一。 CSS概述 CSS是英文Cascading Style Sheet的缩写,中文译为层叠样式表,也有人翻译为级联样式表,简称样式表。它是一种用来定义网页外观样式的技术,在网页中引入CSS规则,可以快捷高效地对页面进行布局设计,可以精确的控制HTML标记对象的宽度、高度、位置、字体、背景等外观效果。 CSS是一种标识性语言,不仅可以有效的控制网页的样式,更重要的是实现了网页内容与样式的分离,并允许将CSS规则单独存放于一个文档中, CSS文件的扩展名为“css”。 CSS3 CSS3标准早在1995年就开始制订, 2001年提上W3C研究议程,但是,10年来CSS3可以说是基本上没有什么很大的变化,一直到2011年6月才发布了全新版本的CSS3,目前,许多浏览器都广泛支持CSS3。 CSS3是CSS技术的一个升级版本,CSS3语言将CSS划分为更小的模块,在朝着模块化的方向发展。以前的版本是一个比较庞大而且比较复杂模块,所以
  • CSS动画效果属性整理笔记(transition、animation)
    所有内容写在代码里,直接copy生成html文件可使用效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>css动画</title> </head> <body> <div class="testTransition"> 这是transition </div> <div class="testAnimation"> 这是animation </div> </body> </html> <style> .testTransition { width: 100px; height: 300px; background-color: aqua; transition-property: width,background-color; transition: 2s ease-in-out; } .testTransition:hover { width: 300px; background-color: brown; } .testAnimation
  • [ CSS-CSS3 ] 更适合你的CSS样式一览表
    CSS样式一览表 CSS样式CSS添加方法CSS选择器CSS样式(I) 文本CSS样式(II) 背景与超链接CSS样式(III) 列表与表格 CSS布局与定位盒子模型(I) overflow和border盒子模型(II) padding和marginCSS定位机制 display、float和position CSS3CSS3(I) 圆角边框与阴影CSS3(II) 文本与文字CSS3(III) 2D转换CSS3(IV) 过渡与动画CSS3(V) 3D变换 CSS样式 CSS添加方法 CSS添加方法—行内 <p style = “color:red;”> 段落文字 </p> CSS添加方法—内嵌样式 <style type="text/css"> p{ color:red; /*设置字体颜色*/ } </style> CSS添加方法—外部样式表 <link rel="stylesheet" href="css/style.css" /> 1.多重样式可以层叠,可以覆盖 2.样式的优先级按照“就近原则”: 行内样式> 内嵌样式> 链接样式>浏览器默认样式 CSS选择器 标签选择器 p h1 {font:“黑体";font-size:20px;} p {color:red; font-size:16px;} hr {width:200px;} 类别选择器 .one /*CSS*/
  • HTML CSS整理笔记
    ——修改placeholder提示的样式: 1.除IE外通用写法 类名或标签名::placeholder {color: red;} 2.加兼容前缀写法 css超出一行显示省略号: 给定宽度(width:100px)、 超出隐藏(overflow:hidden)、 强制在同一行显示(white-space: nowrap)、 省略号(text-overflow:ellipsis) ——常见字体单位—— 1.em 移动端常用的字体尺寸单位,相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。 但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。 3.vh vh就是当前屏幕可见高度的1%,即 height:100vh == height:100%; 它的好处是当元素没有内容时候,设置height:100%该元素不会被撑开, 但设置height:100vh,该元素会被撑开屏幕高度一致。 4.vw viewpoint width,视窗宽度,1vw = 视窗宽度的1%。 vw就是当前屏幕宽度的1%, 当设置width:100%
  • 前端面试必备宝典--知识点深入整合篇
    前言 前端跳槽面试必备宝典,宝典在手,offer我有。想要跳槽找工作的时候,大家都会或多或少准备啃啃面经。由于之前刚开始找工作自己整理的面试题都是浅尝辄止,所以找到工作还是有点难度的。因此,在这里整理了我读过的精华干货。深入浅出的学习知识点的同时,也为下一次跳槽积蓄能量。希望对自己将来的跳槽有所帮助的同时,也对你有益,共勉之。 面试秘籍 面试官到底想看什么样的简历? 看完跳槽少说涨 5 K,前端面试从准备到谈薪完全指南(近万字精华) CSS css基础 灵活运用CSS开发技巧 你未必知道的49个CSS知识点 css布局 干货!各种常见布局实现+知名网站实例分析 CSS实现水平垂直居中的1010种方式(史上最全) rem布局解析 BFC 学习 BFC (Block Formatting Context) flex 一劳永逸的搞定 flex 布局 css优化 CSS性能优化的8个技巧 css3新特性 个人总结(css3新特性) css3动画 高性能 CSS3 动画 综合 CSS知识点及技巧整理 移动端 腾讯移动Web前端知识库 稍微整理了几个经常在H5移动端开发遇到的东西 JS JS基础 灵活运用JS开发技巧 闭包 破解前端面试(80% 应聘者不及格系列):从闭包说起 原型 深度解析原型中的各个难点 this指向 this、apply、call、bind JS事件机制 这一次
  • web前端30个新手项目列表,学完即可上手做项目
    此篇文章推荐有想法学习前端,已经上路琢磨web前端的朋友们。 之前很多朋友跟我说,自学编程的时候,总是摸不清头脑,一大推问题需要解决,种种书籍需要去啃,字符、单词都需要去记。就感觉要费上很多时间,居然担忧青春饭是否能吃到? 实际上,是实战过少项目,或者没有自己做过。凡事都是从0到1的过程,从1到100就非常简单了 小编为各位想加入程序猿大军,加入前端的朋友们整理了30个实战项目列表,有非常详细的教程。选择几个进行学习,或者发挥自己的想象去完成自己的项目 还有属于小编收集精选的整套自学视频,获取方式在文末 欢迎大家装载+分享。给需要学习的朋友们 项目列表: 1.【HTML5 canvas龙卷风动画制作】 2.【CSS3 七夕表白页面特效】 3.【CSS 20行代码见证七色花动画】 4.【HTML5 敲出一个牛逼的雪景】 5.【CSS3特效拉窗帘】 6.【HTML5游戏项目】 7.【英雄联盟官网特效】 8.【web动画形成原理-滚动】 9.【天猫官网必用技术——懒加载】 10.【CSS3炫酷的轮播特效】 11.【css实现点击图片切换】 12.【CSS3大型企业官网】 13【WEB烟雾梦幻特效】 14.【解析渲染原理-解析渲染原理】 15.【实现3d炫酷相册】 16.【纯html css 打造女神轮播图】 17.【植物大战僵尸网页版】: 18.【阴阳师游戏角色动态展示卡】: 19
  • web前端学习资源清单(持续更新)
    1.推荐团队博客 推荐团队 w3school w3cplus 前端观察 腾讯Web前端Alloy团队 qq前端月报 淘宝前端团队fed 推荐博客 汤姆大叔博客 张鑫旭博客 阮一峰博客 廖雪峰官网 牧云云博客 前端小智 小胡子哥的个人网站 Jerry Qu fouber github 木易杨 github(前端进阶系列) xiaozhi github (小智GitHub博客) 境枫博客(语雀) 2.推荐文章教程 资源清单 守候:个人分享–web前端学习资源分享 前端学习笔记总结清单,应有尽有 前端最实用书签【看完可以提涨薪啦】 Wscats github 学习笔记与文章 前端进击的巨人(内容包括:前端进击的巨人系列、JavaScript设计模式系列、读书笔记系列) JS秘密花园 【书籍总结】 《JavaScript权威指南》JavaScript核心概念归纳整理 【书籍总结】 前端资源系列(4)-前端学习资源分享&前端面试资源汇总 程序员练级攻略(2018):前端基础和底层原理 (css、js、浏览器原理、网络协议文章总结) web前端最全各类资源 JavaScript 阮一峰:Javascript 面向对象编程系列(内容包括:封装、构造函数封装、非构造函数封装) 腾讯全端 AlloyTeam 团队 Blog JavaScript设计模式(设计模式) 龙恩
  • 这些前端资源,你值得拥有
    笔记地址 因为之前学习前端的收集书签的资源太多,所以就在今年3、4月开始抽空整理了所有的书签资源,并归类,现在分享给大家,欢迎给我 提 issue or PR Github, 知乎,掘金 Github 知乎 掘金 因为图片太多,所以整理出来一版无图的,如果你觉得有图更好,欢迎跳转带图片的版本 DevDocs: API Documentation Browser -> Github 框架 React React是一个为数据提供渲染为HTML视图的开源JavaScript 库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件的模型,数据改变时对HTML文档的有效更新,和现代单页应用中组件之间干净的分离。 React - Antd: antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。 UxCore: 为企业级后台而生的PC组件库。 ZanUI: PC、移动、小程序 React.part: 查找React的组件 Vue Vue.js是一个用于创建用户界面的开源JavaScript框架,也是一个创建单页应用的Web应用框架。 2016年一项针对JavaScript的调查表明,Vue有着89%的开发者满意度。 在GitHub上,该项目平均每天能收获95颗星
  • [书籍精读]《响应式Web设计 HTML5和CSS3实战(第二版)》精读笔记分享
    写在前面 书籍介绍:本书主要讲解了如何运用HTML5和CSS3来进行响应式Web设计,使页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)来进行相应的响应和调整。我的简评:响应式Web设计,个人从业经验上觉得应该是一个很庞大的话题,也是一个实用性很强的方面。作者在本书中讲的响应式的内容并不多,后面很多讲的都是HTML5与CSS3方面的内容,适合刚入门的前端朋友吧。!!文末有pdf书籍、笔记思维导图、随书代码打包下载地址,需要请自取。 第一章 响应式Web设计基础 响应式Web设计可以让一个网站同时适配多种设备和多个屏幕,可以让网站的布局和功能随用户的使用环境(屏幕大小、输入方式、设备/浏览器能力)而变化 1.2.什么是响应式Web设计 响应式设计,名字是Ethan Marcotte在2010年发明的综合运用三种已有技术(弹性网格布局、弹性图片/媒体、媒体查询)实现了一个解决方案,就叫“响应式Web设计”所谓响应式设计,就是网页内容会随着访问它的视口及设备的不同而呈现不同的样式 1.3.浏览器支持 在写作这一版的2015年年中,IE6、IE7、IE8基本消失了,就连IE9的市场份额也降到了2.45%(IE10只占1.94%,IE11上升到了11.68%)应该劝告自己的客户或老板,告诉他们为什么给那些“残疾”浏览器写代码是错误的