随笔分类 -  CSS

1
css3-旋转木马
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< 阅读全文
posted @ 2023-09-04 00:17 码农-编程小子 阅读(102) 评论(0) 推荐(0)
css案例-after伪类元素的例子
摘要：下位三角例子 https://www.zhuji66.com/how-to-connect-ubuntu-use-rdp-on-windows/ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi 阅读全文
posted @ 2023-07-25 22:34 码农-编程小子 阅读(25) 评论(0) 推荐(0)
css案例-水平垂直居中
摘要：水平垂直居中方法 有两种常用办法： 绝对定位+margin边距（传统方法） 绝对定位+translate位移 flex布局 绝对定位方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo 阅读全文
posted @ 2023-07-25 21:17 码农-编程小子 阅读(8) 评论(0) 推荐(0)
css进度条
摘要：使用过度属性transition制作进度条 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale= 阅读全文
posted @ 2023-07-25 00:35 码农-编程小子 阅读(35) 评论(0) 推荐(0)
css3-新特性
摘要：属性选择器input[type]input[type=text]div[class^=icon]div[class$=icon] 结构伪类选择器nth-child(even)=nth-child(2n+0)偶数nth-child(odd)=nth-child(2n+1)奇数nth-child 和 n 阅读全文
posted @ 2023-07-23 11:45 码农-编程小子 阅读(6) 评论(0) 推荐(0)
css案例-样式初始化
摘要：* { margin: 0; padding: 0; } em, i { font-style: normal; } li { list-style: none; } img { border: 0; vertical-align: middle; } button { cursor: pointe 阅读全文
posted @ 2023-07-22 21:26 码农-编程小子 阅读(37) 评论(0) 推荐(0)
css基础-垂直对齐vertical-align
摘要：什么是垂直对齐vertical-align指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。不能用它垂直对齐块无素必须是行内或者行内块元素 对齐方式有哪些 /* Keyword values */ vertical-align: baseline; vertical 阅读全文
posted @ 2023-07-22 20:21 码农-编程小子 阅读(117) 评论(0) 推荐(0)
css基础-精灵图和字体
摘要：一张图片包括各种图标，用的时候用background-position对移到对应位置显示对应图标 但是图片放大会失真 图片制作完成后也不方便修改 所以如果小图票，我们可以用字体库解决 https://icomoon.io/ https://www.iconfont.cn/ 字体使用步骤 1：下载，h 阅读全文
posted @ 2023-07-22 18:35 码农-编程小子 阅读(26) 评论(0) 推荐(0)
css基础-隐藏显示元素
摘要：display:none隐藏元素，不保留位置，文档结构中存在 visibility:hidden隐藏元素，仍占有原来位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" cont 阅读全文
posted @ 2023-07-22 13:13 码农-编程小子 阅读(10) 评论(0) 推荐(0)
css基础-position定位例子-垂直水平居中
摘要：盒子垂直居中，水平居中实现例子 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> 阅读全文
posted @ 2023-07-22 12:47 码农-编程小子 阅读(37) 评论(0) 推荐(0)
css基础-position定位
摘要：static静态定位类似于标准流 relative相对定位元素移动位置参照原来位置来移动的保留原来的位置（人走了，位置留着，停职留薪），不脱标 absolute绝对定位元素移动位置参照父元素如果父元素和父父级等无定位，则以浏览器位置偏移如果父元素有定位，则以父元素为参照进行偏移如果父元素无定位，父父 阅读全文
posted @ 2023-07-21 23:14 码农-编程小子 阅读(20) 评论(0) 推荐(0)
css基础-float浮动
摘要：浮动的前生今生浮动最初是为了文字环绕效果的，所以浮动元素不会遮住下面的图片和文字，但是绝对定位和固定定位会遮住 什么是浮动创建浮动框，将其移动左或者右边，直到碰到左边缘或右边缘。特性：浮动元素会脱离标准流，浮动的盒子不会保留白原来位置一行内显示，顶端对齐行内元素加了浮动元素都会具有行内块元素，无需转 阅读全文
posted @ 2023-07-21 22:04 码农-编程小子 阅读(30) 评论(0) 推荐(0)
css基础-盒模型box-sizing
摘要：网页基本元素是盒子，网页布局核心就是布局盒子，所谓盒子就是把元素看成放内容的容器 盒子模型组成 实际内容 content 内边距padding 边框border 外边距margin 盒子大小计算 传统盒模型 box-sizing: content-box;默认值 例如设置了width:200px（指 阅读全文
posted @ 2023-07-20 23:16 码农-编程小子 阅读(54) 评论(0) 推荐(0)
css基础-背影颜色 & backgourn-size
摘要：css3提供的半透明效果 背景图片background：url('1.jpg') 默认是背景平铺的 background-repeat:none|repeat|repeat-x|repeat-y 背景位置 background-position:center center; background-p 阅读全文
posted @ 2023-07-20 22:53 码农-编程小子 阅读(70) 评论(0) 推荐(0)
css基础-元素显示模式
摘要：块级元素独占一行，高宽内外边距可以控制宽度默认为100% 行内元素一行显示多个宽度默认内容本身宽度宽高设置无效 行内块元素一行显示多个（行内元素特点）默认宽度是内容本身宽度（行内元素特点）宽度高度可以设置（块内无素特点）之间有空白间隙 body自带margin外边距8px 阅读全文
posted @ 2023-07-20 20:54 码农-编程小子 阅读(6) 评论(0) 推荐(0)
css3 loading 效果2
摘要：使用了css自定义属性var <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> < 阅读全文
posted @ 2023-07-19 01:48 码农-编程小子 阅读(9) 评论(0) 推荐(0)
loading
摘要：<div class="loading"> <div class="clockwise"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> < 阅读全文
posted @ 2023-07-18 18:01 码农-编程小子 阅读(17) 评论(0) 推荐(0)
动画时间函数-非线性函数step
摘要：steps(n, <jumpterm>) 按照 n 个定格在过渡中显示动画迭代，每个定格等长时间显示。例如，如果 n 为 5，则有 5 个步骤。动画是否在 0%、20%、40%、60% 和 80% 处或 20%、40%、60%、80% 和 100% 处暂停，或者在动画的 0% 和 100% 之间设置 阅读全文
posted @ 2023-07-17 01:17 码农-编程小子 阅读(92) 评论(0) 推荐(0)
认识css动画相关属性animation
摘要：transtion属性 需要触发条件，比如hover animation属性 可以立即执行 transform属性 不是动画，但是对动画起到至关重要的作用 过渡属性transtion <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF 阅读全文
posted @ 2023-07-17 00:20 码农-编程小子 阅读(29) 评论(0) 推荐(0)
css 动画
摘要：animation: 動畫名稱 持續時間 @keyframe 動畫名稱 { from { CSS 屬性: 值 } to { CSS 屬性: 值 } } @keyframes active { 0% { opacity: 0; transform: scale(0); } 100% { opacity 阅读全文
posted @ 2021-09-09 09:53 码农-编程小子 阅读(30) 评论(0) 推荐(0)

1