本站主题切换功能：CSS变量，让JS与CSS互通有无
CSS变量简介 CSS变量的定义及使用如下，可定义的类型非常广泛。 /* 声明 */ --VAR_NAME: <声明值>; /* 使用 */ var(--VAR_NAME) /* 根元素选择器（全局作用域），例如 <html> */ :root { /* CSS 变量声明 */ --main-color: #ff00ff; --main-bg: rgb(200, 255, 255); --logo-border-color...
CSS重点知识总结—flex布局
1.理解flex Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。可以随着页面大小的改变自适应页面布局。 块级元素 .box{ display:flex; } 行内元素也可以设置成flex布局 .box{ display:inline-flex; } 设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 2.justify-cont...
纯CSS+HTML制作三角形和圆|实心+空心
我们的网页因为 CSS 而呈现千变万化的风格。这一看似简单的样式语言在使用中非常灵活，只要你发挥创意就能实现很多比人想象不到的效果。特别是随着 CSS3 的广泛使用，更多新奇的 CSS 作品涌现出来。 本文是流行的三角形和圆的绘制方法。 <style type="text/css"> .clearfix{zoom:1;} /* clearfix fo...
纯CSS+HTML制作饼图和条形图
使用html+css制作的图案或图形化内容响应速度最快，如下贴出我在开发过程中使用CSS+HTML制作的饼图和条形图，有需要的可以拿去。
前端重点知识总结—CSS3
1.CSS3有哪些新属性，举例 边框属性：border-radius、box-shadow 背景属性：background-size、background-origin 2D、3D转换：transform 动画属性：animation 2.nth-child和:nth-of-type的区别 ele:nth-of-type(n)是指父元素下第n个ele元素， ele:nth-child(n)是指父元素下第n个元素且这个元素为ele，若不是，则选择...
好好玩：CSS3抖动样式CSS Shake让你的网页酷炫起来
之前在一些网站发现了一个好玩的样式，就是鼠标移到网站LOGO上，logo会自动抖动起来，显得非常炫酷。我也是十分感兴趣。自从本站新添加了一个视觉设计的分类之后，我也是想起来有个抖动CSS样式CSS Shake，所以今天给小伙伴们分享一下，希望小伙伴们能够喜欢。 CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利...
让IE浏览器支持CSS3圆角属性的方法
如果要想在IE浏览器中实现圆角的效果，我们一般都会采用圆角图片的方式。用图片的话，基本就跟浏览器没有多大关系了，因为任何浏览器都支持这种方式。今天我们主要是讲解如果用CSS3样式表来实现圆角效果，值得注意的是，IE6/7/8这三个IE浏览器版本都不支持CSS3的解析，只有还不太主流的IE9支持CSS3和HTML5的标准。让IE支...
HTML5+CSS3点击指定按钮显示某些内容效果
CSS3实现的网页侧边栏效果，点击指定按钮，显示或隐藏侧菜单，CSS3运行于HTML5环境，IE8及以下版本不支持，因此测试时请确认你的浏览器支持HTML5技术，推荐使用火狐或谷歌Chrome浏览器。 CSS3点击显示 *{ margin:0; padding:0; } html{ height:100%; } p{ padding:10px 0; } body{ min-height:100%; font-family:ar...