前端课程——过渡
过渡 什么是过渡 此属性同样存在浏览器兼容问题： 123456789/* WebKit引擎的浏览器（Chrome、Safari、Opera） */-webkit-transition : <single-transition>;/* Gecko引擎的浏览器（Firefox） */-moz-transition : <single-transition>;/* Trident引擎的浏览器（IE 10+） */-ms-transition : <single-transition>;/* Presto引擎的浏览器（Opera） */-o-transition : <single-transition>; 过渡子属性 ltransition-property 属性：用于定义过渡效果中的样式属性名称。 ltransition-duration 属性：用于定义过渡效果执行动画的时长。 ltransition-timing-function 属性：用于定义过渡效果计算的函数。 ease：默认值，元素样式从初始状态过渡到终止状态时 ...
前端课程——变形
变形 什么是变形 通过修改坐标，CSS transform属性可以在不影响正常文档流的情况下改变作用内容的位置。CSStransform包括一系列 CSS属性，通过这些属性可以对HTML元素进行变形。可以进行的变形包括旋转，倾斜，缩放以及位移，同时适用于平面以及三维空间。 在空间中实现CSS变形会稍微复杂一点。首先必须设置一个透视点(perspective) 来配置3D空间然后定义2D元素在空间中的变形。 关于变形的属性 transform transform: none| <transform-list> 属性允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被转换(translate)旋转(rotate) 、缩放(scale)候斜(skew)。 该CSS属性可用于内联元素和块级元素。其默认值为none,表示匹配元素不进行任何变形。 transorm-list:表示作用于元素的一个或多个变形的CSS函数。如果为多个函数的话，使用空格进行分隔。 transform-origin CSS属性让你更改一个元素变形的原点默认情况，变形的原点在元素的中心点，或者 ...
前端课程——渐变
渐变 什么是渐变 CSS渐变是CSS3的Image模块中新增的内容。利用CSS渐变替代在HTML页面中引入渐变效果的图片，这样减少HTML页面加载的时间，减小带宽的占用。 由于CSS渐变是由浏览器直接生成，在HTML页面缩放时的效果要比图片更好，使得可以更灵活、便捷地调整HTML页面布局。 线性渐变 线性渐变由一个轴(基准线)定义的，并且轴上每个点都具有独立的颜色。lincar-gradient()函数构建垂直于基准线的渐变效果,渐变的颜色取决于与之垂直相交的基准线上的色点。 基准线由包含渐变效果容器元素的中心点和一个角度来定义的。基准线上的颜色值则由不同的点来定义，包括起始点、终止点以及两者之间可选的中间点(中间点可以有多个) 起始点是基准线和容器元素的顶点与基准线垂直线的相交点来定义。 终止点是基准线和容器元素最近顶点与基准线垂直线的相交点来定义。 渐变的0度是从下到上的，增加角度会使渐变顺时针旋转。 CSS linear gradient()函数用于创建一个表示两种或多种颜色线性渐变的图片。具体语法结构如下: linear-gradient(<angle> ...
前端课程——布局
前端课程——布局
前端课程——定位继承与层叠
前端课程——定位继承与层叠
前端课程——浮动
前端课程——浮动
前端课程——显示与隐藏
前端课程——显示与隐藏
前端课程——盒子模型
盒子模型基本概念与相关概念
前端课程——HTML与CSS中的文本
HTML与CSS中的文本 结构化元素 结构化元素就是指 HTML 元素中具有明确含义和作用的元素，例如 `` 元素表示段落。相对于 HTML 4.01 版本而言，HTML5 版本新增了一系列结构化元素。 HTML4.01版本的结构化元素 名称 代码 标题元素 <h1>~<h6> 段落元素 <p> 粗体元素 <b> 斜体元素 <i> 上标/下标元素 <sup>/<sub> 换行符 <br> 水平线元素 <hr> HTML5新增的结构元素 <article> 元素 <section> 元素 <nav> 元素 <aside> 元素 <header> 元素 <main> 元素 <footer> 元素 HTML4中的元素 标题元素 HTML 标题元素具体是指<h1>~<h6>元素，其呈现了 6 个不同级别的标题，<h1&g ...
前端课程——颜色与单位
颜色与单位 有关颜色的相关概念 色调：很接近通俗意义上的颜色。 图像的相对明暗程度，在彩色图像上表现为颜色（简单的理解为颜色） 饱和度：是指颜色中灰色的含量。 色彩的纯洁性（颜色中灰色的含量），也叫饱和度/彩度。 亮度：是指颜色中黑色的含量。 发光体的光源面积之比（黑色的含量） 对比度：前景色与背景色之间的差异。 明暗区域最亮的白和最暗的黑之间不同亮度层级的测量，差异范围越大代表对比越大，差异范围越小代表对比越小。 Web 安全色：不需要担心颜色在不同硬件环境、操作系统和浏览器之间的差异。 不必担心因不同硬件（浏览器）而造成的颜色不同。Web 安全色目前基本具有 216 种颜色，其中色彩为 210 种（开发时使用的颜色），非色彩为 6 种。 关于 Web 安全色的具体颜色以及值，可以参考 https://www.bootcss.com/p/websafecolors/。 前景色与背景色 CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性，其中 color 属性表示前景色，background-color 属性表示背 ...
