片刻网项目
片刻网项目 复习回顾——页面布局 如图，需要实现的布局为经典的三列布局（logo、导航、登录注册按钮）。 对于这种情况首先想到的应该是这样的。 也就是说在一个大的容器中，我们在写入一个容器（红色）作为存放绿色容器、蓝色容器、紫色容器 。那么实现起来就很简单了。 123456789101112<!-- 黑色的大容器 --><header class="head"> <!-- 红色部分 --> <div class="container"> <!-- 绿色部分 --> <div class="logo"></div> <!-- 蓝色部分 --> <div class="nav"></div> <!-- 紫色部分 --> <div class="login" ...
css实现动态效果
css实现动态效果 个人头像悬停特效 效果图： 代码示例： 1234567891011121314151617181920212223242526272829303132333435363738<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> .img { width: 150px; height: 150px; margin: 100px auto; background: lightcoral; border-radius: 50%; } ...
前端课程——弹性盒子模型
弹性盒子模型 什么是弹性盒子模型 CSS3 新增了弹性盒子模型（Flexible Box 或 FlexBox），是一种新的用于在 HTML 页面实现布局的方式。使得当 HTML 页面适应不同尺寸的屏幕和不同的设备时，元素是可预测地运行。 弹性盒子模型实现 HTML 页面布局是与方向无关的。不类似于块级布局侧重垂直方向，内联布局侧重水平方向。 弹性盒子模型主要适用于HTML页面的组件以及小规模的布局，而并不适用于大规模的布局，否则会影响 HTML 页面性能。 伸缩容器（flex container）：包裹伸缩项目的父元素。 伸缩项目（flex item）：伸缩容器的每个子元素。 轴（axis）：每个弹性盒子模型拥有两个轴。 主轴（main axis）：伸缩项目沿其一次排列的轴被称为主轴。 侧轴（cross axis）：垂直于主轴的轴被称为侧轴。 方向（direction）：伸缩容器的主轴由主轴起点和主轴终点，侧轴由侧轴起点和侧轴终点描述伸缩项目排列的方向。 尺寸（dimension）：根据伸缩容器的主轴和侧轴，伸缩项目的宽度和高度。 对应主轴的称为主轴尺寸 ...
前端课程——动画
动画 什么是动画 CSS3新增animation 属性使得仅通过CSS的样式属性实现动画效果成为可能。实现动画包括两个部分： 用于定义动画的样式规则 用于设置动画开始、结束以及中间点样式的关键帧相对于传统使用JavaScript实现的动画方式，CSS3 新增的animation属性具有以下三个优点: 能够非常容易地创建简单动画，甚至不需要掌握JavaScript。 动画运行效果良好，可以在低性能的系统运行。性能以及流畅程度都优于JavaScript实现画效果。 允许浏览器优化动画的性能和效果，让浏览器控制动画序列。 定义动画序列 @keyframes声明动画 通过使用@keyframes建立两个或两个以上关键帧来实现。每一个关键帧都描述了动画元素在给定的时间点上应该如何渲染。 123@keyframes <keyframes-name>{ <keyframe-block-list>} keyframes-name 用于设置当前动画的名称，以便通过animation-name属性调用。 keyframe-bloc ...
前端课程——过渡
过渡 什么是过渡 此属性同样存在浏览器兼容问题： 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> ...
前端课程——布局
前端课程——布局
前端课程——定位继承与层叠
前端课程——定位继承与层叠
前端课程——浮动
前端课程——浮动
