css做多列瀑布流
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:46
Tsunami黄嵩粟
阅读(38)
推荐(0) 编辑
css制作骰子
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:45
Tsunami黄嵩粟
阅读(172)
推荐(0) 编辑
css球体
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:41
Tsunami黄嵩粟
阅读(117)
推荐(0) 编辑
css圆圈慢慢放大
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:40
Tsunami黄嵩粟
阅读(160)
推荐(0) 编辑
css摩天轮
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:40
Tsunami黄嵩粟
阅读(66)
推荐(0) 编辑
01-布局扩展-自适应两栏布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:35
Tsunami黄嵩粟
阅读(18)
推荐(0) 编辑
01-布局扩展-用calc来计算实现双飞翼布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:34
Tsunami黄嵩粟
阅读(33)
推荐(0) 编辑
01-布局扩展-利用盒模型完成圣杯布局(双飞翼布局)
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:34
Tsunami黄嵩粟
阅读(23)
推荐(0) 编辑
01-布局扩展-BFC完成圣杯布局
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
阅读全文
posted @
2021-08-22 18:33
Tsunami黄嵩粟
阅读(42)
推荐(0) 编辑
图片整合
摘要：精灵图 雪碧图 css sprite css精灵 优点： 1、降低服务端的压力，减少请求次数 2、降低图片质量，提高还在速度 图片整合的规则 1、一定要是小图标 2、整合的图片背景色必须透明png/gif 3、里面的小图标尽量上下排列 每个小图标根据需求留出足够的空间 background-posi
阅读全文
posted @
2020-10-25 03:11
Tsunami黄嵩粟
阅读(128)
推荐(0) 编辑
弹性盒模型 多列 媒体查询
摘要：弹性盒子： 作用：弹性盒子控制子元素的布局方法（不包括孙子辈） 特点： a，弹性盒子默认情况下，子元素沿着主轴排列，默认情况下x轴为主轴 b，弹性盒子的子元素，称作‘灵活元素’所有的子元素都能设置宽高 c，如果一个子元素在弹性盒里面左右上下居中只需要给子元素添加margin： 0 auto； 1、触
阅读全文
posted @
2020-10-25 01:59
Tsunami黄嵩粟
阅读(127)
推荐(0) 编辑
css3颜色模式 圆角的实现 width的属性值 触发怪异盒模型
摘要：Css颜色模式： rgb（255,0,0） rgba（255,0,0,0.5）（0.5是透明度） hsl（58%，56%）色彩饱和度 hala（） border-image url（路径） 向内偏移的量 二个值（不加单位） 显示状态：repeat round（铺满） 默认：stretch（拉伸） 中
阅读全文
posted @
2020-10-18 16:30
Tsunami黄嵩粟
阅读(122)
推荐(0) 编辑
属性选择符 伪类选择符 层级选择器 阴影 文本换行处理 背景图
摘要：属性选择符： 选择符的目的：选择标签对标签做css样式渲染 通过html属性，对html标签做选择 1，选择符[属性]{css样式} 说明：只要带有当前属性就会被选中 2，选择符[属性：”属性值”]{css样式} 说明：指定属性名也必须指定属性值则匹配成功 3，选择符[属性~=”属性值”]{属性值}
阅读全文
posted @
2020-10-18 16:08
Tsunami黄嵩粟
阅读(131)
推荐(0) 编辑
语义化结构标签 多媒体标签 H5新增表单内容
摘要：语义化结构标签： section 更偏向于一个区域类似div（块） article 更偏向于显示内容（块） aside 标签作为article呢绒的辅助板块（块） header 标签做为一个网页头部，或者板块头部（块） footer 标签做为一个网页底部或板块底部（块） nav 标签做为一个网页导航
阅读全文
posted @
2020-10-11 17:13
Tsunami黄嵩粟
阅读(114)
推荐(0) 编辑
2D 3D 景深 动画 阴影
摘要：2D 二维的平面空间，让元素在X轴或者Y轴进行变化 2D里面的功能函数 2D-位移 2D-旋转 2D-缩放 2D-倾斜 变形属性 transform：； 位移：transform：translate（）； 旋转：transform：rotate（）； 缩放：transform：scale（）； 倾斜
阅读全文
posted @
2020-10-11 16:38
Tsunami黄嵩粟
阅读(266)
推荐(0) 编辑
css3 浏览器前缀 线型渐变 过渡属性
摘要：css3：没有形成正式版 每个浏览器商，为了能对css3属性形成一个更好的支持，浏览器形成自己一套语法规范，一些css属性，如果想在浏览器上形成支持，有时候需要添加浏览器前缀 谷歌前缀：—webkit— Eg：—webkit—属性：属性值 火锅前缀：—moz— Eg：—moz—属性：属性值 IE前缀
阅读全文
posted @
2020-10-08 17:38
Tsunami黄嵩粟
阅读(171)
推荐(0) 编辑
表格补充 表单补充 BFC
摘要：表格标签补充“ A，数据行分组 <thead></thead>表头 <tbody></tbody>表体 <tfoot></tfoot>表尾 每一个表格只能有一个表头和表尾 B，数据列分组 <colgroup></colgroup>有span=“把几列分成几组” C，列标题标签 <th></th> 默
阅读全文
posted @
2020-10-08 16:54
Tsunami黄嵩粟
阅读(115)
推荐(0) 编辑
标签嵌套的规则 定位元素 高度自适应 伪元素
摘要：标签嵌套使用： 1，块状元素一般作为父元素使用 2，H标题标签不能相互嵌套 3，P标签里面别嵌套h1-h6 div等块状元素，尽量套内联元素 4，P标签之间别相互嵌套 置换元素或非置换元素 置换元素： 标签在页面中的显示状态，通过当前标签里面属性来决定，置换元素在页面显示的过程中会生成一个框这个框能
阅读全文
posted @
2020-10-07 13:46
Tsunami黄嵩粟
阅读(436)
推荐(0) 编辑
margin的用法 清除默认样式 display属性值 块状元素 内联元素 行内块元素
摘要：margin的用法： 1，margin是在元素的宽高以外的 2，作用：控制元素之间的位置关系 3，margin不能改变盒子本身大小的 4，单一一个方向设置margin值： margin-left margin-right margin-top margin-bottom 5，margin设置技巧和p
阅读全文
posted @
2020-10-06 15:56
Tsunami黄嵩粟
阅读(703)
推荐(0) 编辑
列表属性 边框 浮动 盒模型开头
摘要：列表属性： list-style-type：； 属性值： square cirde disc none list-style-image：url（）把图片当做列表符号显示 list-style-position 属性值： Insiad outinsiad 重点：list-style：none； 去掉
阅读全文
posted @
2020-10-05 14:23
Tsunami黄嵩粟
阅读(140)
推荐(0) 编辑
