css
关注
分享
扫一扫
燃情雪
证明我不懒，哼！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
less起步01------基本语法
前提补充： 01，考拉官网：http://koala-app.com/index-zh.html 02，less中文网：http://lesscss.cn/ 03，bootstrap中less学习网：http://www.bootcss.com/p/lesscss/ 问题一：什么是less？ less是一种动态样式语言，属于css预处理器的范畴，它扩展了CSS语言，增加了变量，Mixin，函数等特...原创 2019-04-19 16:47:59 · 178 阅读 · 0 评论 -
无缝轮播走马灯
轮播图原创 2019-06-04 09:50:32 · 502 阅读 · 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 · 285 阅读 · 0 评论 -
CSS3起步 10-------css3动画基础之animation
相应API 01,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 · 236 阅读 · 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 · 393 阅读 · 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 · 1061 阅读 · 0 评论 -
CSS3起步 06-------边框图片，背景以及渐变
边框图片 01，border-image-source导入资源为边框，默认四个角100% 02，border-image-slice用于图片的切片分布，上右下左 03，border-image-repeat用于背景图片的平铺 04，border-image-width默认为border-width 05, border-image-outset边框不变但是是往外扩 着重点：border-image...原创 2019-04-09 21:28:10 · 185 阅读 · 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 · 184 阅读 · 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 · 356 阅读 · 0 评论 -
CSS3起步 11-------弹性盒模型【新版flex以及老版-webkit-box】及骰子布局demo
一，flex基本概念 问题一，什么是flex Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。且任何元素都可以成为flex容器，使其内部为flex布局。 块级元素：display: flex; 行内元素：display: inline-flex; 注意点： 01，Webkit 内核的浏览器，必须加上-webkit前缀。 02，设为 Flex 布局以...原创 2019-04-15 21:21:39 · 1517 阅读 · 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 · 160 阅读 · 0 评论 -
CSS3起步 03-------css声明优先级
首先我得先说明一个误区：选择器没有优先级 问题一，那选择器没有优先级，那声明块的优先级怎末定呢？ 选择器的特殊性会赋予所对应的声明块，所以如果存在多个规则对应一个元素，且存在声明冲突，则特殊性越大，越占优势。 问题二，那什么是选择器的特殊性呢？ 选择器的特殊性是自身所决定的，且特殊性值表示为0，0，0，0。 问题三，那不同选择器具体的特殊性值是多少呢？ 一个选择器的特殊性值如下 01，id选择器：...原创 2019-04-08 18:45:19 · 254 阅读 · 0 评论 -
CSS3起步 08-------2D的组合变形以及transform
transform相关API 01，transform: matrix(1, 2, 3, 4, 5, 6); 矩阵可以表示所有的单个效果，因为transform的实现原理即为矩阵计算而得，所以在组合变化时，变化样式的顺序不同，就会达到不同的效果，因为矩阵是不可逆的，没有交换律。 02，transform: translate(120px, 50%);平移 03，transform: scale(2...原创 2019-04-11 14:15:41 · 312 阅读 · 0 评论 -
CSS3起步 04-------自定义字体图标以及新增的文本样式
问题一，什么是字体图标？ 字体图标就是一些小图标，比如购物车，个人户口什么的。 问题二，怎末自定义呢？ 明白你需要什么，然后让UI美工师给你画出什么，最后可以运用在线图标生成网站与某个字符绑定这个美工所画图标，当你使用这个字符时，浏览器就会为你解释成你所绑定的图标 范例： /* 引入自定义字体 */ @font-face { font-family: 'name';//font-famil...原创 2019-04-07 20:54:24 · 237 阅读 · 0 评论 -
CSS3起步 07-------浏览器解析、加载页面过程以及过渡坑点
浏览器解析、加载页面过程 问题一，浏览器是怎末解析页面的呢？ 浏览器解析html节点生成DOM树，同时也生成CSSOM树，然后在调用javascript进行更改二者，最后生成Render Tree渲染树。 问题二，浏览器怎末解析生成DOM树【document object model 文档对象模型】呢？ 浏览器会对整个html进行深度遍历，即当遍历某个节点时，只有当遍历完这个节点及其所有子节点后才...原创 2019-04-10 19:59:59 · 194 阅读 · 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 · 611 阅读 · 0 评论