随笔分类 - HTML+CSS
通过滤镜filter属性hue-rotate变换主题的方案
摘要：主题切换方案一般都是依赖Css变量去做，但是可以通过滤镜属性可以实现主题色的变换； 1，hue-rotate属性，用于调整元素的色相，色相的概念可以在 HSL 中看到 H：色相 S：饱和度 L：亮度 body { filter: hue-rotate(45deg); } 成本几乎为0，实现简单。缺点
阅读全文
重排(reflow)和重绘(repaint)
摘要：重排(reflow)和重绘(repaint) 页面生成的过程： 1.HTML 被 HTML 解析器解析成 DOM 树； 2.CSS 被 CSS 解析器解析成 CSSOM 树； 3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 4.
阅读全文
H5新特性
摘要：1，H5新增新特性有哪些： html5新增标签 mark 标记 meter 表示度量 progress 进度条 ruby 注释 rt 对ruby元素内容的解释 rp 当浏览器不支持ruby元素的时候显示的内容 time 表示一个时间点 datalist：配合input使用，并且通过input的lis
阅读全文
清除浮动的常用4种方式
摘要：1，额为标签法：（隔墙法） 在父级元素里面，给浮动元素的最后一个添加一个空标签（必须是块级元素才行），标签添加clear：both；属性； 2，父级添加overflow属性： 可以给父元素添加overflow属性：值可以设置为hidden，auto，scroll属性 3，父级元素添加after伪元素
阅读全文
js效果下拉菜单
摘要：1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <tit
阅读全文
CSS3 transition 属性
摘要：语法 transition: property duration timing-function delay; 值描述 transition-property 指定CSS属性的name，transition效果 transition-duration transition效果需要指定多少秒或毫秒才能
阅读全文
使用 calc() 函数计算 <div> 元素的宽度:
摘要：实例 使用 calc() 函数计算 <div> 元素的宽度: #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; background-color: yellow; p
阅读全文
CSS3 filter(滤镜) 属性
摘要：CSS 语法 filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() |
阅读全文
CSS3 box-sizing 属性
摘要：语法 box-sizing: content-box|border-box|inherit: 值说明 content-box 这是 CSS2.1 指定的宽度和高度的行为。指定元素的宽度和高度（最小/最大属性）适用于box的宽度和高度。元素的填充和边框布局和绘制指定宽度和高度除外 border-box
阅读全文
CSS3 :nth-child() / :nth-of-type(n)选择器
摘要：实例 1 奇数和偶数是可以作为关键字使用用于相匹配的子元素，其索引是奇数或偶数（该索引的第一个子节点是1）。 在这里，我们为奇数和偶数p元素指定两个不同的背景颜色： p:nth-child(odd) { background:#ff0000; } p:nth-child(even) { backgr
阅读全文
CSS 选择器
摘要：类选择器和属性选择器，伪类选择器 权重都是10 input[type="text"]{ width:150px;} 选择器示例示例说明CSS .class .intro 选择所有class="intro"的元素 1 #id #firstname 选择所有id="firstname"的元素 1 * *
阅读全文
HTML <input> 标签
摘要：属性 属性值描述 accept audio/* video/* image/* MIME_type 规定通过文件上传来提交的文件的类型。 (只针对type="file") align left right top middle bottom HTML5已废弃，不赞成使用。规定图像输入的对齐方式。 (
阅读全文
HTML5 <input> type 属性
摘要：带有两种不同输入类型的 HTML 表单，text 和 submit： <form action="demo-form.php"> 用户名: <input type="text" name="usrname"><br> <input type="submit" value="提交"> HTML 4.0
阅读全文
HTML 音频(Audio)
摘要：实例 <audio controls> <source src="horse.mp3" type="audio/mpeg"> <source src="horse.ogg" type="audio/ogg"> Your browser does not support this audio form
阅读全文
HTML 视频（Video）
摘要：使用 HTML5 <video> 元素 HTML5 <video> 标签定义了一个视频或者影片. <video> 元素在所有现代浏览器中都支持。 以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频： 实例 <video width="320" height="240"
阅读全文
直角三角形
摘要：1，只保留右边的边框有颜色； border-left： transparent red transparent transparent； 2，样式都是solid border-style：solid； 3，上边框宽度要大，右边框宽度稍小，其余边框为0 border-width：100px 50px
阅读全文
去掉相邻盒子边线
摘要：只需要添加 ·1，margin-left：-1px； 2，如果盒子没有定位，则鼠标经过添加相对定位即可； position：relative； 如果都有定位，则利用z-index提高层级； z-index：1；
阅读全文
多行文本溢出显示省略号
摘要：多行文本溢出显示省略号 多行文本溢出显示略号，有较大兼容性问题，适合于webKit浏览器或移动端（移动端大部分是webkit内核） overflow:hidden; text-overflow:ellipsis; /*弹性伸缩盒子模型显示 display：-webkit-box; /*限制在一个块元
阅读全文
单行文本溢出显示省略号
摘要：1.单行文本溢出显示省略号-必须满足三个条件 /*1.先强制一行内显示文本*/ hite- space:nowrap；（默认 norma1自动换行） /*2.超出的部分隐*/ verflow:hidden； /*3.文字用省略号替代超出的部分*/ text-overflow:ellipsis
阅读全文
