CSS
文章平均质量分 61
ryipei
单身狗
展开
-
css中的显示与隐藏,通过定位position实现播放遮罩
<div class="box"> <div class="shad"> </div> </div>.box { /* 父元素相对定位 */ position: relative; margin: 100px auto; width: 448px; height: 252px; .原创 2021-04-07 15:03:58 · 146 阅读 · 0 评论 -
九、弹性布局flex 1、给父盒子加dispaly:flex
九、弹性布局flex1、给父盒子加dispaly:flex这三个属性将失效float 、 vertical-align 、 clear子元素高默认与父元素等高,flex布局下的子元素默认不会换行,子元素的宽度总和比父元素多的时候会自动压缩。2、flex-flowflex-flow:row wrap; 这是flex-direction 和flex-direction 的复合属性(1)flex-direction:设置主轴的方向(不设置的时候,默认是x轴)row从左到右,...原创 2021-04-01 21:16:27 · 209 阅读 · 0 评论 -
八、响应式布局,百分比布局,和弹性布局 felx
八、响应式布局1、百分比布局(1)子元素的宽高百分比设置:①手动计算百分比 width:30%②利用计算函数属性, width:calc(子元素宽 / 父宽 * 100% ) 运算符号前后空格,计算高同理(2)版心的百分比布局设置避免版心出现左右滚动条,设置版心的宽度100%,设置最大宽度。即如下:.w{ width:100%; max-width:800px; margin:0auto;}免费字体:阿里 iconfont2、媒体特性(媒体查...原创 2021-04-01 21:15:44 · 604 阅读 · 0 评论 -
七、H5 新标签 + CSS3。动画animation,transform,结构伪类选择器新标签,媒体
七、H5 新标签 + CSS31、额外:快捷键p.box生成p标签,类名box p#box 生成p标签,id名box ul>li*5>a ul里面五个li,每个li里一个aul>li>a*5 ul里面一个li,一个li里面5个ap.box+p+h 生成同级p p h2、新标签(1)布局结构新增的标签header 、 nav 、section 、footer 、video 、audio(2)表单新增的input type属性值emai...原创 2021-04-01 21:14:32 · 275 阅读 · 0 评论 -
六、css高级技巧,元素的显示与隐藏,多余的字,弹性布局,精灵图
六、css高级技巧1、元素的显示与隐藏(1)display设置或检索对象是否及如何显示①display:none; 隐藏对象②隐藏后不占位置③通过display:block;可以显示元素(2)visibility 设置或检索是否显示对象①visibility:visible;对象可见,这是默认值,不写也是②visibility:hidden;对象隐藏③隐藏后,位置继续保留(仍然占据之前的位置)(3)overflow溢出①overflow:visible;不剪切内容原创 2021-04-01 21:11:30 · 289 阅读 · 0 评论 -
五、CSS中表格-表单 相关知识点(部分,易忘,)文本域
五、表格-表单1、表格caption表格标题、thead表头区域、 tbody表体区域、 tfoot脚部区域① tr:英文全称是"tablerow",表格中的行。② td:英文全称是"tabledatacell",是“表体单元格”。③ th:英文全称是"tableheadercell",是“表头单元格”。caption td th :内部可以嵌套任何标签2、表格常用属性(1)表格属性border=””边框、cellpadding=””边框与内容的距离cellsp原创 2021-04-01 21:09:37 · 250 阅读 · 0 评论 -
四、css中浮动-浮动的清除-定位
四、浮动-浮动的清除-定位1、浮动特点①脱离标准流,不占位置,后面的元素会跑上来②对齐方式为顶部对齐③具有行内块的特性,但不会有间隙,行内块元素之间会有间隙注意要点:①浮动的元素永远不会压住文字②父元素是标准流,子元素浮动,父元素会失去高度,记得给高③浮动的元素只会影响后面的标准流元素2、清除浮动(1)清除浮动本质:清除浮动主要为了解决子元素浮动导致父元素高度为0,且父元素无法设置高度的问题。清除浮动之后,父级就会根据浮动的子盒子自动检测高度。父级有了高度,就不会原创 2021-04-01 21:06:38 · 220 阅读 · 0 评论 -
三、css背景图片和盒子模型,背景
三、css背景图片和盒子模型1、背景图片在给元素设置背景图片的时候一定要注意元素是否宽高。(1)背景图片我们一般用于小图标背景 或者超大背景图片;(2)背景图片位置只能通过:background-position;background-position:方位词 方位词;(无顺序要求)background-position:数字 数字;(可以是具体整数,也可以是百 分数。x,y)background-position:数字 方位;(第一个x,第二个y)background-p.原创 2021-04-01 21:05:12 · 318 阅读 · 0 评论 -
二、CSS选择器及文本属性,选择器
二、CSS选择器及文本属性1、css选择器:(1)基础选择器:基础选择器由单个选择器组成①选择器:标签选择器、类选择器(一个标签可以多个类名)、id选择 器、通配符选择器。②类名选择器可设置多类名 例如:<p class=”news articl”></p>③id选择器设置id 例如:<p id=“id名”>内容</p>,配合js使用(2)复合选择器后代选择器、子代选择器、并集选择器、交集选择器、伪类选择器(3)伪类选择器.原创 2021-04-01 21:03:51 · 625 阅读 · 0 评论 -
python前端CSS实现响应式布局、流体布局,对手机,平板,PC自适应效果,极其简单例子
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>流式布局、响应式布局...原创 2019-10-17 11:04:26 · 390 阅读 · 0 评论 -
python前端CSS3做动画旋转、变形,实现x、y、z轴的旋转。做动画变形必须设置初始值,不然会出现跳变的Bug
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS 盒子变形</title> <style> .box{ width: 400px; ...原创 2019-10-15 15:54:59 · 324 阅读 · 0 评论 -
python前端CSS实现某个图片详细介绍单独从底部滑到该图片上
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .pin_con{ width: 500px; ...原创 2019-10-14 11:59:53 · 99 阅读 · 0 评论 -
python前端CSS3实现人物走路连环动作
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3的transition动画效果</title> <style>/* .box{ width: 200p...原创 2019-10-14 10:09:43 · 368 阅读 · 0 评论 -
python前端CSS实现登录动画loading
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS实现loading动画</title> <style> /* 定义动画 */ @keyframes l...原创 2019-10-12 11:01:11 · 248 阅读 · 0 评论 -
python前端的CSS的效果动画,CSS实现风车转动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation动画效果</title> <style type="text/css"> /* 定义动画 */ ...原创 2019-10-12 10:34:36 · 398 阅读 · 0 评论 -
python前端的CSS中图片进行3D动画翻转效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片3D动画翻转</title> <style> .box{ width: 600px; ...原创 2019-10-12 09:31:06 · 207 阅读 · 0 评论