随笔分类 - HTML/CSS
摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi
阅读全文
摘要：利用到的CSS 1. var 函数 2. calc 函数 Html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge
阅读全文
摘要：利用到的高级选择器 :first-of-type 选择器匹配属于其父元素的特定类型的首个子元素的每个元素 :nth-last-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素，从最后一个子元素开始计数 element1 ~ element2 选择前面有 element
阅读全文
摘要：对单选按钮自定义样式，我们以前一直用的脚本来实现，不过现在可以使用新的伪类 :checkbox 来实现。 思路： 1. 可以为<label>元素添加生成性内容(伪元素)，并基于单选按钮的状态来为其设置样式； 2. 然后把真正的单选按钮隐藏起来； 3. 最后把生成内容美化一下。 解决办法: 1. 一段
阅读全文
摘要：属性介绍 space-evenly: 均匀排列每个元素,每个元素之间的间隔相等 space-between: 均匀排列每个元素,首个元素放置于起点末尾元素放置于终点 思路 假设我们容器里面有3个元素 space-evenly: 容器剩余空间由4个间隙平分 space-between: 容器剩余空间由
阅读全文
摘要：属性定义及使用说明 column-gap的属性指定的列之间的差距。 注意： 如果指定了列之间的距离规则，它会取平均值。 语法 column-gap: length|normal; Flex layout(存在兼容性问题) HTML 1 <div id="flexbox"> 2 <div></div>
阅读全文
摘要：1 2 3 4 5 6 7 纯CSS导航栏下划线跟随效果 8 9 55 56 57 纯CSS导航栏 58 导航菜单项 59 被划过 60 下划线跟随 61 62 63
阅读全文
摘要：CSS盒子模型 当我们把padding和width,height全部设置为0，border设为一个较大的像素时 即：我们需要什么方向的三角形，只需把其余的三角形背景色设置为transparent；
阅读全文
摘要：原理：先让下拉菜单隐藏，鼠标移到的时候在显示出来 1>display 无动画效果，图片是秒出 2>opacity 有动画效果，我这里是1S出现，推荐配合绝对定位使用
阅读全文
摘要：元素是怎样浮动 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 浮动元素之后的元素将围绕它。 浮动元素之前的元素将不会受到影响。 正文 浮动是一种半脱离文档流的状态，他不像绝对定位那样完全脱离文档流 绝
阅读全文
摘要：第一种：通过text/HTML var txt1="<h1>Text.</h1>"; 第二种：通过jQuery var txt2=$("<h2></h2>").text("Text."); 第三种：通过JavaScript/DOM var txt3=document.createElement("h
阅读全文
摘要：HTML可以看成是由节点（node）组成的树结构 我们一般都是在<p>节点里面写字符串。 在上图中，<p>节点和字符串之间有一个text, 这个text就是文本节点。 我们可以这样创建文本节点 document.createTextNode(String); 我们也可以把他添加到<p>节点 var
阅读全文
浙公网安备 33010602011771号