![](https://img-blog.csdnimg.cn/20191114171227885.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
css
燃情雪
证明我不懒,哼!
展开
-
less起步01------基本语法
前提补充:01,考拉官网:http://koala-app.com/index-zh.html02,less中文网:http://lesscss.cn/03,bootstrap中less学习网:http://www.bootcss.com/p/lesscss/问题一:什么是less?less是一种动态样式语言,属于css预处理器的范畴,它扩展了CSS语言,增加了变量,Mixin,函数等特...原创 2019-04-19 16:47:59 · 143 阅读 · 0 评论 -
无缝轮播走马灯
轮播图原创 2019-06-04 09:50:32 · 448 阅读 · 0 评论 -
堆叠规制以及z-index浅谈
与默认的堆叠上下文规则,z-index较复杂。所以先介绍默认的上下文堆叠规则(一),默认content堆叠规则(由下至上)Root element—根元素(如html,body)nonpositioned element—未定位元素(没有position和opacity属性)float element—浮动元素(z-index对其无任何效果,且彼此不会覆盖,不含opacity属性)pos...原创 2019-01-05 21:14:54 · 231 阅读 · 0 评论 -
CSS3起步 10-------css3动画基础之animation
相应API01,animation-name:关键帧名02,animation-delay:动画开始之前的延迟03,animation-iteration-count:动画重复次数04,animation-direcction:动画方向反转的也只是关键帧中动画的方向和动画animation-titming-function形式05,animation-fill-model:动画开始前和动...原创 2019-04-14 20:56:42 · 195 阅读 · 0 评论 -
CSS3起步 09-------3D补充demo【多棱柱3D轮播旋转】及其原生js封装
html<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>多棱柱3D轮播旋转</title> <script type="text/javascript" src="js/多棱柱3D轮播旋转封装.js"></script&g...原创 2019-04-13 21:09:02 · 341 阅读 · 0 评论 -
CSS3起步 09-------3D基础之景深,transform-style及backface-visibility
问题一,什么事3D视角?01,首先我们得知道3D坐标轴,如图:X轴从左到右,Y轴从上到下,Z轴从里到外。视角处于Z轴正方向圆锥尖点前方,正值方向为顺时针。注意点:原始的X,Y,Z轴的中心点为元素的中心点【也叫做元素的基点(可以利用transform-origin自行更改)】02,我们得知道Z轴的具体距离,我们怎末观察。其实想想为什么每次设计3D场景都需要一个属性perspective【景...原创 2019-04-13 12:12:34 · 936 阅读 · 0 评论 -
CSS3起步 06-------边框图片,背景以及渐变
边框图片01,border-image-source导入资源为边框,默认四个角100%02,border-image-slice用于图片的切片分布,上右下左03,border-image-repeat用于背景图片的平铺04,border-image-width默认为border-width05, border-image-outset边框不变但是是往外扩着重点:border-image...原创 2019-04-09 21:28:10 · 145 阅读 · 0 评论 -
CSS3起步 01-------什么是css,什么又是样式表
问题01:css全称?层叠样式表(cascoding style sheet);问题02:这个叫做什么?<style> *{ margin: 0px; padding: 0px; }</style>整个<style></style>又称作为样式表。问题03:样式表又由哪些组成?一条一条的规则组成。如下*{ marg...原创 2019-04-03 17:19:45 · 148 阅读 · 0 评论 -
CSS3起步 02-------css3选择器
css3选择器中存在着九种基本选择器,通配符选择器;元素选择器;类选择器;id选择器;后代选择器;子代选择器;相邻兄弟选择器;通用兄弟选择器和群组选择器。现在一一记录…代码示例:&amp;amp;amp;amp;lt;!DOCTYPE html&amp;amp;amp;amp;gt;&amp;amp;amp;amp;lt;html&amp;amp;amp;amp;gt; &amp;amp;amp;amp;lt;h原创 2019-01-05 15:33:48 · 303 阅读 · 0 评论 -
CSS3起步 11-------弹性盒模型【新版flex以及老版-webkit-box】及骰子布局demo
一,flex基本概念问题一,什么是flexFlex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。且任何元素都可以成为flex容器,使其内部为flex布局。块级元素:display: flex;行内元素:display: inline-flex;注意点:01,Webkit 内核的浏览器,必须加上-webkit前缀。02,设为 Flex 布局以...原创 2019-04-15 21:21:39 · 1408 阅读 · 0 评论 -
CSS3起步 05-------盒模型新增样式和其他相应扩展【元素居中等...】
问题一,img用什莫方法,在不调动它的层级的前提下,使其居中定位vertical-align属性示例:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>img水平居中</title> <style> *{ col...原创 2019-04-09 11:37:53 · 124 阅读 · 0 评论 -
CSS3起步 03-------css声明优先级
首先我得先说明一个误区:选择器没有优先级问题一,那选择器没有优先级,那声明块的优先级怎末定呢?选择器的特殊性会赋予所对应的声明块,所以如果存在多个规则对应一个元素,且存在声明冲突,则特殊性越大,越占优势。问题二,那什么是选择器的特殊性呢?选择器的特殊性是自身所决定的,且特殊性值表示为0,0,0,0。问题三,那不同选择器具体的特殊性值是多少呢?一个选择器的特殊性值如下01,id选择器:...原创 2019-04-08 18:45:19 · 200 阅读 · 0 评论 -
CSS3起步 08-------2D的组合变形以及transform
transform相关API01,transform: matrix(1, 2, 3, 4, 5, 6);矩阵可以表示所有的单个效果,因为transform的实现原理即为矩阵计算而得,所以在组合变化时,变化样式的顺序不同,就会达到不同的效果,因为矩阵是不可逆的,没有交换律。02,transform: translate(120px, 50%);平移03,transform: scale(2...原创 2019-04-11 14:15:41 · 258 阅读 · 0 评论 -
CSS3起步 04-------自定义字体图标以及新增的文本样式
问题一,什么是字体图标?字体图标就是一些小图标,比如购物车,个人户口什么的。问题二,怎末自定义呢?明白你需要什么,然后让UI美工师给你画出什么,最后可以运用在线图标生成网站与某个字符绑定这个美工所画图标,当你使用这个字符时,浏览器就会为你解释成你所绑定的图标范例: /* 引入自定义字体 */ @font-face { font-family: 'name';//font-famil...原创 2019-04-07 20:54:24 · 202 阅读 · 0 评论 -
CSS3起步 07-------浏览器解析、加载页面过程以及过渡坑点
浏览器解析、加载页面过程问题一,浏览器是怎末解析页面的呢?浏览器解析html节点生成DOM树,同时也生成CSSOM树,然后在调用javascript进行更改二者,最后生成Render Tree渲染树。问题二,浏览器怎末解析生成DOM树【document object model 文档对象模型】呢?浏览器会对整个html进行深度遍历,即当遍历某个节点时,只有当遍历完这个节点及其所有子节点后才...原创 2019-04-10 19:59:59 · 166 阅读 · 0 评论 -
CSS3起步 02-------伪类/伪元素/target伪类/label标签
一,链接伪类::link :visited :hover :activelvha【LV包ha】注意点:必须按照顺序编写位置,否则失效二,动态伪类::hover :active :focus[获取焦点时渲染]三,表单伪类: :enable :disable :checked[被选中时渲染]注意点:enable/disable必须配合disable属性判定是否为可编辑输入框或则不可编辑输入框...原创 2019-04-04 15:30:23 · 536 阅读 · 0 评论