CSS
关注
分享
扫一扫
文章平均质量分 61
韩天尊跑路
咕呱咕呱
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
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 · 240 阅读 · 0 评论 -
九、弹性布局flex 1、给父盒子加dispaly:flex
九、弹性布局flex 1、给父盒子加dispaly:flex 这三个属性将失效float 、 vertical-align 、 clear 子元素高默认与父元素等高，flex布局下的子元素默认不会换行，子元素的宽度总和比父元素多的时候会自动压缩。 2、flex-flow flex-flow:row wrap; 这是flex-direction 和flex-direction 的复合属性 （1）flex-direction:设置主轴的方向（不设置的时候，默认是x轴） row从左到右，...原创 2021-04-01 21:16:27 · 279 阅读 · 0 评论 -
八、响应式布局，百分比布局，和弹性布局 felx
八、响应式布局 1、百分比布局 （1）子元素的宽高百分比设置： ①手动计算百分比 width：30% ②利用计算函数属性， width：calc(子元素宽 / 父宽 * 100% ) 运算符号前后空格,计算高同理 （2）版心的百分比布局设置 避免版心出现左右滚动条，设置版心的宽度100%，设置最大宽度。即如下： .w{ width:100%; max-width:800px; margin:0auto; } 免费字体：阿里 iconfont 2、媒体特性（媒体查...原创 2021-04-01 21:15:44 · 723 阅读 · 0 评论 -
七、H5 新标签 + CSS3。动画animation,transform,结构伪类选择器新标签，媒体
七、H5 新标签 + CSS3 1、额外：快捷键 p.box生成p标签，类名box p#box 生成p标签，id名box ul>li*5>a ul里面五个li，每个li里一个a ul>li>a*5 ul里面一个li,一个li里面5个a p.box+p+h 生成同级p p h 2、新标签 （1）布局结构新增的标签 header 、 nav 、section 、footer 、video 、audio （2）表单新增的input type属性值 emai...原创 2021-04-01 21:14:32 · 387 阅读 · 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 · 362 阅读 · 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 · 325 阅读 · 0 评论 -
四、css中浮动-浮动的清除-定位
四、浮动-浮动的清除-定位 1、浮动特点 ①脱离标准流，不占位置，后面的元素会跑上来 ②对齐方式为顶部对齐 ③具有行内块的特性，但不会有间隙，行内块元素之间会有间隙 注意要点： ①浮动的元素永远不会压住文字 ②父元素是标准流，子元素浮动，父元素会失去高度，记得给高 ③浮动的元素只会影响后面的标准流元素 2、清除浮动 （1）清除浮动本质： 清除浮动主要为了解决子元素浮动导致父元素高度为0，且父元素无法设置高度的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会原创 2021-04-01 21:06:38 · 282 阅读 · 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 · 385 阅读 · 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 · 696 阅读 · 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 · 491 阅读 · 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 · 371 阅读 · 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 · 136 阅读 · 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 · 448 阅读 · 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 · 345 阅读 · 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 · 459 阅读 · 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 · 288 阅读 · 0 评论