css
文章平均质量分 53
css
浩哥学习编程之路
这个作者很懒,什么都没留下…
展开
-
3D转换
在我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子原创 2021-04-17 12:38:17 · 89 阅读 · 0 评论 -
css用户界面样式
用户界面样式转载 2021-04-16 20:14:46 · 62 阅读 · 0 评论 -
css3 2D转换
文章目录transform2D变形概念transform:translate平移视距perspective使用transform平移实现水平垂直动态居中transform:rotate旋转transform2D变形概念transform通过变形可以对元素进行平移、旋转、缩放 等操作transform:translate平移语法:transform:属性值属性值描述transform:translateX(数值px)沿着X轴方向水平 平移transform:trans原创 2021-04-10 23:29:51 · 174 阅读 · 0 评论 -
css动画
css动画使用动画的步骤1.通过@keyframs关键字定义动画 注意定义动画是写在元素外面的。2.在指定的元素中,通过animation调用动画定义动画@keyframs 动画名 关键帧。@keyframs 动画名自定义{from{ 初始帧}to{ 结束帧} }调用动画以及简写animation:定义的动画名 完成时间 执行次数 运动曲线 是否反向执行 延迟时间(infinite 表示无限循环)animation:dh 1s infinite linear alterna原创 2021-04-14 22:57:52 · 70 阅读 · 0 评论 -
CSS线性渐变
渐变背景不是背景颜色,而是图片我们需要通过background-image或者通过background简写来设置渐变的效果渐变分别有:linear-gradient()线性渐变语法如下 background-image: linear-gradient(red, yellow)线性渐变默认是自上向下进行变化我们可以通过关键字来指定渐变的方向to top向上渐变to right向右渐变to bottom向下渐变to left向左渐变代码演示如下原创 2021-04-13 22:53:35 · 164 阅读 · 0 评论 -
过渡
过渡,可以使一个属性的值经过一段时间变成另一个值 经常配合:hover来使用 过渡写在自身上语法: transition:属性值属性值描述transition-property:all 表示所以得属性都会被进行过渡 多个属性之间用逗号隔开transition-duration:过渡持续的时间单位 s秒 ms毫秒 1秒=1000毫秒transition-delay:过渡的延时 几秒过后开始transition-timing-function过渡类型如下原创 2021-04-08 20:00:24 · 60 阅读 · 0 评论 -
visibility:属性
visibility: 属性规定元素是否可见visible 元素可见。hidden 元素不可见。collapse 在表格元素中使用时,此值可删除一行或一列,但它不影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上,会呈现为 “hidden”。inherit 从父元素继承 visibility 属性的值你在 html 里面写的东西默认情况下就是属于 visibility:visible; 即元素可见。当某些情况下,你让元素不可见了:visibility:hidde原创 2021-04-04 15:39:35 · 2398 阅读 · 0 评论 -
精灵图得使用步骤
1.首先我们为什么要使用精灵图我们首先看一下代码 <style> .btn:link { display: block; width: 93px; height: 29px; background-image: url(./btn/link.png); } .btn:hover { background-i原创 2021-03-31 09:09:13 · 575 阅读 · 0 评论 -
CSS3伪类选择器
文章目录一.结构伪类选择器二.伪元素选择器一.结构伪类选择器注意:类选择器、属性选择器、伪类选择器,权重为 10n可以是数字,关键字和公式n如果是数字,就是选择第n个常见的关键词 even 偶数 odd 奇数常见的公式如下 ( 如果n是公式,则从0开始计算)但是 第0个元素或者超出了元素的个数会被忽略 )二.伪元素选择器...原创 2021-03-21 15:20:06 · 262 阅读 · 0 评论 -
多个水平垂直居中的方法总结
文章目录一.行内元素水平居中二.行内元素垂直居中三.块级元素水平居中四.实现水平垂直居中一.行内元素水平居中方法1.text-align:center;代码演示 <style> .parent { background-color: red; text-align: center; height: 40px; } </style></head>原创 2020-12-05 00:21:21 · 221 阅读 · 0 评论 -
overflow多个作用
overflow:hidden多个作用1.解决margin-top上外边距塌陷的问题未解决前给父元素添加overflow:hidden; <style> * { padding: 0px; margin: 0px; } .box { width: 300px; height: 300px; bac原创 2020-12-02 23:31:49 · 426 阅读 · 0 评论 -
让多个元素在一行显示的方法与技巧
一.使用display:inline;我们可以用display:inline把元素转换为行内元素 但是转为行内元素了他的长度宽度就是它本身内容的长度宽度了 设置属性不起作用 <style> /* 方法一*/ .box1, .box2 { display: inline; width: 200px; height: 2000px;原创 2020-12-02 22:29:00 · 4943 阅读 · 0 评论 -
CSS布局
浮动一、CSS布局有三种机制1.普通流2.浮动3.定位1、普通流(标准流)1.1.块级元素会独占一行,从上往下排列1.2.行内元素会按照顺序从左到右排列,碰到父元素边缘自动换行2、浮动2.1.概念:元素的浮动是指设置了浮动属性的元素脱离标准普通流的控制移动到指定位置语法如下:选择器 {float:属性值;}属性值描述left左浮动ri...原创 2020-05-06 22:53:33 · 125 阅读 · 0 评论 -
盒子模型
盒子的模型1.盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器。盒子分为: 内容,边框, 内边距,外边距。2.盒子的边框(border)代码如下border:属性border-width定义边框的粗细,单位是pxborder-style边框样式none(没有边框默认)solid(单实线)dashed(虚线)dotted...原创 2020-05-03 23:21:27 · 137 阅读 · 0 评论 -
CSS2
1.CSS复合器选择1.1后代选择器(重点)后代选择器又称为包含选择器后代:父亲,儿子,孙子<标签1> <标签2> <标签3></标签3> </标签2></标签1>标签1是父标签,标签2是标签1的儿子,标签3是标签1的孙子。所以标签2,3都是标签1的后代标签。案例如下 <...原创 2020-04-22 17:09:49 · 136 阅读 · 0 评论 -
CSS1
01.引入CSS样式表分为三类:行内样式表,内部样式表,外部样式表 下面我们一一来看。1.行内样式表是通过标签的style属性来设置元素的样式(一次只能控制一个标签)代码如下:<标签名 style=“属性1:属性值1; 属性2:属性值2; 属性3:属性值3;”>内容</标签名>案例<P style="color:red; font-size:12p...原创 2020-04-18 20:48:40 · 222 阅读 · 0 评论