<!DOCTYPE html>
<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <!-- 第一步：引入项目下面生成的 fontclass 代码： --> <link rel="stylesheet" href="font_icon/iconfont.css" /> </head> <body> <p>伪类选择器</p> <ul> <li class="first">itme1</li> <li>itme2</li> <li>itme3</li> <li>itme4</li> <li>itme5</li> <li>itme6</li> <li>itme7</li> <li>itme8</li> </ul> <style> / :nth-of-type(an+b) 1. a: 系数, [0,1,2,…] 2. n: [0,1,2,3,….] 3. b: 偏移量, 从0开始 注: 计算出来的索引,必须是有效, 从1开始 / / 选中一个元素 / / 选中第一个元素 / li.first:nth-of-type(1) { background-color: pink-; } / 选中第5个元素 / li:nth-of-type(5) { background-color: pink-; } / 选中倒数第1个元素 / li:nth-last-of-type(1) { background-color: pink-; } / 选中一组元素 / / 从第6个元素开始,选中后面的全部元素 / li:nth-of-type(n + 6) { background-color: aquamarine-; } / n: 从0开始取, n+6 匹配的全过程 1. n=0: 0+6=6, 匹配第6个 2. n=1: 1+6=7, 匹配第7个 3. n=2: 2+6=8, 匹配第8个 4. n=3: 3+6=9, 索引越界,匹配失败,结束计算 n+6 => [6,7,8], 匹配到3个 / / 从第3个元素开始,选中前面的全部元素 / / 2.2 a=-1, 功能与 a=1是一样,但是反向取 / / 取前3个 / li:nth-of-type(-n + 3) { background-color: blanchedalmond-; } / 选中偶数行元素:2n或者even效果一样 / li:nth-of-type(2n) { background-color: aquamarine-; } li:nth-of-type(even) { background-color: aquamarine-; } li:nth-of-type(2n):hover { background-color: burlywood-; } / 选中奇数行元素:2n+1或者2n-1或者odd效果一样 / li:nth-of-type(2n + 1) { background-color: aquamarine-; } li:nth-of-type(odd) { background-color: aquamarine-; } </style> <hr /> <p>表单伪类</p> <!-- disabled:表示禁用 --> <input type="text" disabled value="001" /><label for="">编号</label> <input type="text" /><label for="">用户名</label> <input type="radio" name="sex" id="m" /><label for="m">男</label> <input type="radio" name="sex" id="n" /><label for="n">女</label> <style> input:disabled { background-color: antiquewhite; } / :enabled: 有效的,允许提交的 默认就是允许被提交的/ input:enabled { background-color: cyan; } / 当被选中后,将它的标签文本前景色设置为红色 / input:checked + label { color: red; } </style> <hr /> <p>引入字体图标的详细步骤</p> <!-- 方法1：把图标下载到本地，然后放在对应的项目中，到时候直接用可以了 --> <img src="icon/yonghu.png" alt="" /> <!-- 方法2：把图标下载至项目，然后下载到本地，解压后放入项目中，打开图标的index文件，有3种使用的图标方式，推荐使用第二种class方法 第一步：引入项目下面生成的 fontclass 代码： <link rel="stylesheet" href="font_icon/iconfont.css" /> 第二步：挑选相应图标并获取类名，应用于页面即可 --> <span class="iconfont icon-shanchu"></span> <style> img { width: 50px; } span.iconfont { font-size: 50px; } </style> <hr /> <p>盒模型</p> <div class="box"></div> <style> / 盒模型常用属性 1. width:宽度 2. height：高度 3. border：边框 4. padding：内边距 5. margin：外边距 6. box-sizing: border-box;此时，width, heigth设置的盒子大小, 就是最终的计算尺寸 7.background-clip: content-box;背景被裁剪到边框盒 / .box { width: 300px; height: 300px; background-color: bisque; / 边框有视觉效果,有宽度, 样式, 颜色，而且可以设置单独一边的边框样式 / border: 5px solid peru; padding: 20px; / margin 与 padding是一样,只不过它在边框外部, 是外边距, 控制多个盒子之间的间隔; / margin: 10px; / 四值 , 顺时针 / / padding: 上 右 下 左 ; / / padding: 5px 10px 15px 20px; / / 三值 , 中间表示左右/ / padding: 5px 10px 15px; / / 双值: 第1个上下,第2个左右 / / padding: 5px 10px; / / 单值, 四个方向全一样 / / padding: 5px; / / padding: 是透明的,只有宽度可以设置 / / 当前盒子的总宽度：300+ 202 + 52 =350px / / 改变盒子大小的计算方式,使用户设置width,height就是盒子的实际大小,以方便计算与布局 / box-sizing: border-box; / 此时, width, heigth设置的盒子大小, 就是最终的计算尺寸 / / 当前盒子总宽度: 250 + 202 + 102 = 300px / / 计算出来的300px, 就是width=300px / } / 样式重置的简化通用方案 / * { padding: 0; margin: 0; box-sizing: border-box; } </style> </body></html>
相关推荐
© 2020 asciim码
人生就是一场修行
