随笔分类 -  HTML+CSS知识

1
炫酷流光效果（HTML+CSS）
摘要：学习心得 1、模糊语法：filter:blur(20px); 此代码直接设置模糊度 2、设置完background：linear-gradient() 渐变色后 再加上一个background-size, 最后加上个相反的size就能实现颜色的渐变动画。 3、伪元素 上下左右分别给个-5px，能实现 阅读全文
posted @ 2020-09-02 08:35 赛德·乌漆嘛黑 阅读(2645) 评论(0) 推荐(0)
吸顶效果
摘要：1、一个极其简洁的吸顶实现 首先给需要吸顶效果的子元素 设置 position: sticky; top:0; 给父元素 添加 position :relative; position：sticky是css3定位新属性，是相对定位relative和固定定位fixed的结合体，主要用到对scroll事 阅读全文
posted @ 2020-08-27 20:57 赛德·乌漆嘛黑 阅读(173) 评论(0) 推荐(0)
响应式布局——媒体查询
摘要：媒体查询：针对不同的媒体类型定义不同的样式 1、定义和使用： @media screen and (max-width：像素) and (min-width:像素){ /*在像素的范围的时候下面进行的一些变化设置*/ } @media screen and (max-width:768px) { . 阅读全文
posted @ 2020-08-23 17:46 赛德·乌漆嘛黑 阅读(117) 评论(0) 推荐(0)
发光渐变器
摘要：1、flex 弹性盒子：当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 弹性盒子由**弹性容器**(Flex container)和**弹性子元素**(Flex item)组成 **弹性容器**：简单理解为 父元素，将父元素设置为display:flex或inline- 阅读全文
posted @ 2020-08-23 17:06 赛德·乌漆嘛黑 阅读(116) 评论(0) 推荐(0)
好看的按钮
摘要：transparent: 指定全透明色彩. transparent 是全透明黑色（back）的速记法。类似rgb的值。（看不见哦！） <style> .div4 { width: 144px; height: 30px; line-height: 30px; background-color: #1 阅读全文
posted @ 2020-08-23 16:25 赛德·乌漆嘛黑 阅读(123) 评论(0) 推荐(0)
CSS3：2D、3D属性
摘要：1、旋转 rotate transform: rotate(360deg); 旋转rotate默认是圆心 但可以给两个值，这两个值不能加逗号，可以规定旋转的圆心点 transform-origin 想对于盒子的左上角开始 2、平移 translate transform: translate(200 阅读全文
posted @ 2020-08-21 22:01 赛德·乌漆嘛黑 阅读(176) 评论(0) 推荐(0)
CSS3渐变
摘要：1、线性渐变 CSS3渐变： linear-gradient:3个参数 是颜色，还有一个参数可以设置方向 background: linear-gradient()； 右下角 background: linear-gradient(to right bottom, red, green, blue) 阅读全文
posted @ 2020-08-21 08:31 赛德·乌漆嘛黑 阅读(124) 评论(0) 推荐(0)
background
摘要：1、img background 可以导入多个图片用‘，’隔开即可，同时还可以设置图片的位置 比如：right top（右上角） background: url(./img/yue.jpg), url(./img/test.png) right top; 2、size backgrorund-siz 阅读全文
posted @ 2020-08-21 08:29 赛德·乌漆嘛黑 阅读(265) 评论(0) 推荐(0)
过渡transition、opacity的兼容性
摘要：1、过渡transition transition-property：all; 过渡属性-全部都过渡 transition-delay:; 延迟的时间 transition-duration:; 过渡时间 transition-timing-function:;过渡的速度 过渡速度有三个值： eas 阅读全文
posted @ 2020-08-21 08:26 赛德·乌漆嘛黑 阅读(532) 评论(0) 推荐(0)
CSS3选择器
摘要：1、属性选择器 1、[属性名] ：选择所有带有这个属性名的元素。 如：[src] 2、[属性名=属性值] ：选择所有属性=这个属性值的元素 如：[target=_self] 3、[src^="https"] ：选择src以http开头的元素。 4、[src$=".pdf"] :选择src以。pdf结 阅读全文
posted @ 2020-08-19 22:09 赛德·乌漆嘛黑 阅读(134) 评论(0) 推荐(1)
CSS3文本、border、box-sizing、button
摘要：1、文本阴影 text-shadow:水平、垂直、模糊距离、颜色 text-shadow: 10px 10px 2px red; 2、盒子阴影 box-shadow:水平、垂直、模糊距离、颜色 box-shadow: 10px 10px 4px #aaa; 3、盒子圆角 border-radius: 阅读全文
posted @ 2020-08-19 22:08 赛德·乌漆嘛黑 阅读(177) 评论(0) 推荐(1)
H5拖拽和canvas、存储
摘要：1、拖拽三个方法： 首先需要设置元素：dragable = true; 开始拖拽： ondragstar="start(event)"; function start(event){ event.dataTransfer.setData('a',event.target.id) } a存放id。 拖 阅读全文
posted @ 2020-08-18 21:15 赛德·乌漆嘛黑 阅读(195) 评论(0) 推荐(0)
HTML5新元素、新属性
摘要：1、calc（100% - 像素）：计算一行另外一个盒子的宽度。 <style> .left { width: calc(100% - 100px); height: 100px; background-color: darkmagenta; float: right; } .right { wid 阅读全文
posted @ 2020-08-18 06:24 赛德·乌漆嘛黑 阅读(125) 评论(0) 推荐(1)
CSS知识点（五）
摘要：知识点一：元素的显示与隐藏 1、实现方式： ①display ②visibility ③overflow 2、display ①元素的隐藏 display: none; （1)结论：元素本身还在DOM中，只是隐藏而已 （2)元素是不占位置的 ②元素的显示 display: block; （1)结论： 阅读全文
posted @ 2020-08-16 16:37 赛德·乌漆嘛黑 阅读(129) 评论(0) 推荐(0)
CSS知识点（四）
摘要：知识点一：清除浮动 1、定义：清除浮动：并不是清除浮动，而是清除浮动所带来的影响 2、为什么要清除浮动？ ①浮动后的元素不会撑开的父元素的高度，因为浮动是不占位置的 3、如何清除浮动？ ①额外标签法：在浮动元素的后边加上标签 （1)<div style="clear: left;"></div> （ 阅读全文
posted @ 2020-08-16 16:23 赛德·乌漆嘛黑 阅读(130) 评论(0) 推荐(0)
CSS知识点（三）
摘要：知识点一：外边距 1、回顾盒子模型包含：内容、内边距、边框、外边距 2、定义：盒子的边框与其他元素或者浏览器边缘之间的距离 3、使用： ① 上外边距 margin-top: 100px; ② 左外边距 margin-left: 80px; ③ 下外边距 margin-bottom: 50px; ④ 阅读全文
posted @ 2020-08-16 16:14 赛德·乌漆嘛黑 阅读(207) 评论(0) 推荐(0)
CSS知识点（二）
摘要：知识点一：行高 1、属性值与盒子的高度相同--垂直居中 2、属性值小于盒子的高度-文本靠上 3、属性值大于于盒子的高度-文本靠下 4、line-height: 300px; 知识点二：CSS三大特性 1、三大特性：层叠性、继承性、优先级 2、层叠性：就近原则 (1)、 同类种选择器,第二个选择器相同 阅读全文
posted @ 2020-08-16 16:03 赛德·乌漆嘛黑 阅读(125) 评论(0) 推荐(0)
CSS知识点(一)
摘要：知识点一：CSS书写规范 1、空格规范： a)选择器与{之间必须包含空格 b)属性名与之后的 : 之间不允许包含空格， : 与属性值之间必须包含空格 2、选择器规范： a)当一个rule包含多个selector时，每个选择器声明必须独占一行 b)嵌套层级应不大于 3 级 3、属性规范： a)属性定义 阅读全文
posted @ 2020-08-16 12:02 赛德·乌漆嘛黑 阅读(108) 评论(0) 推荐(0)
HTML知识点（二）
摘要：知识点一：表格 1、什么是表格 ？ 跟excel表格类似 2、表格标签 table 3、表格的组成 行 tr 单元格 td 4、建立表格步骤 1、建立表格， 2、判断行数和列数 3、用行去包含单元格 4、在每个单元格中去添加内容 5、表格的各大属性 cellspacing：边框与边框之间的距离 Ce 阅读全文
posted @ 2020-08-16 11:50 赛德·乌漆嘛黑 阅读(136) 评论(0) 推荐(0)
HTML知识点（一）
摘要：1、开发工具 编辑器：dw：省事儿、控件的拖动 sublime:文艺青年喜欢用 webstorm:编辑快速 Hbuilder:快、生成安装包 Vscode:逻辑性高、各个公司都用（最终选择它） 五大主流浏览器：火狐浏览器 ————因为内核不同 Geoko 谷歌浏览器（最终选择它） Webkit->B 阅读全文
posted @ 2020-08-16 11:29 赛德·乌漆嘛黑 阅读(179) 评论(0) 推荐(0)

1