目录: 1、属性选择器 p[style]{ 有style属性的p标签 color:red; } p[class=red]{ class的值为red的p标签 background-color: blue; } p[class='red']{ class的值为red的p标签 background-col ...
分类:
Web程序 时间:
2020-02-23 18:13:57
阅读次数:
89
什么是CSS position定位? 定位定位,顾名思义就是用CSS样式来给我们特定的元素进行定位,使得我们所设定的元素具有坐标,让我们方便的给它在网页中设定位置以及更好的挪动他。就比如在网页中的一些广告,无论你怎么滑动网页都无法隐藏掉广告,这就运用到我们强大的CSS定位。CSS定位的内容包括:po ...
分类:
Web程序 时间:
2020-02-23 18:04:13
阅读次数:
76
CSS3 transform变换 1、translate(x,y) 设置盒子位移2、scale(x,y) 设置盒子缩放3、rotate(deg) 设置盒子旋转4、skew(x-angle,y-angle) 设置盒子斜切5、perspective 设置透视距离6、transform-style fla ...
分类:
Web程序 时间:
2020-02-23 17:53:48
阅读次数:
73
在CSS3中盒模型分为两种: 一种就是我们所熟知的标准盒模型 而另一种就是所谓的怪异盒模型或者IE盒模型 由上图我们可以知道 在标准盒模型中width和height指的是盒子内容的宽高,而在怪异盒模型中wdith还包含了border和margin区域 通过在文档首部添加doctype申明,即表明使用 ...
分类:
其他好文 时间:
2020-02-23 16:33:35
阅读次数:
96
showhide.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>showhide</title> <link rel="stylesheet" href="../css/base.css"> <s ...
分类:
Web程序 时间:
2020-02-22 16:06:50
阅读次数:
77
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
分类:
Web程序 时间:
2020-02-22 12:14:48
阅读次数:
101
通过CSS中的animation属性来实现摩天轮旋转的动态效果。在开始之前,先说下animation属性,原理是逐帧动画,通过关键帧控制动画的每一步,来实现最终的动态效果。 而常用到的几个属性分别是: 1.animation-name,设置元素动画的名字,自定义即可 2.animation-dura ...
分类:
Web程序 时间:
2020-02-21 22:14:52
阅读次数:
165
通过学习CSS3游戏介绍、CSS3样式和优先级,了解到html5+css3+js不光可以实现动画,其次可以往这个游戏与建模方向发展,更多css3特效访问Gerard Ferrandez on CodePen其次html嵌套css样式分为3种:内联、内部、外部、写法上推荐的是外部,便于代码复用性;样式... ...
分类:
Web程序 时间:
2020-02-21 09:34:35
阅读次数:
86
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实现水平垂直居中</title> <style type="text/css"> .content { width: 100px; height: 100px; ...
分类:
Web程序 时间:
2020-02-20 22:25:46
阅读次数:
91
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>过渡动画效果</title> <style type="text/css"> div { width: 100px; height: 100px; backgr ...
分类:
Web程序 时间:
2020-02-20 21:55:04
阅读次数:
69