01 2021 档案
摘要：知识梳理 translate //1 位移 rotate //2 旋转 scale //3 缩放 transform-origin //4 设置旋转中心 一 平移 [ translate ] div { width: 150px; height: 100px; background: pink; t
阅读全文
摘要：一 属性选择器 使用要点 属性选择器、标签选择器、伪类选择器权重都是10 1）直接写属性 [ 最基本的使用 ] /*所有按钮改为小手*/ button { cursor: pointer; } /*给添加禁用的按钮修改为默认小箭头*/ 选择的是：既是 button 又有 disabled 属性的元素
阅读全文
摘要：一 语义化标签 1）常用标签 <header></header> //1 头部标签<nav></nav> //2 导航标签<asite></asite> //3 侧边栏标签<article></article> //4 内容标签<section></section> //5 块级标签<footer>
阅读全文
摘要：三个重点 1 网页图标 2 网页三大标签 3 字体图标 4 logo的主流写法 一 引入icon图标 1 ）获取别的网站的icon图标 https://www.jd.com/favicon.ico //获取京东的icon小图标https://www.mi.com/favicon.ico //获取小米
阅读全文
摘要：用到的背景图片 1 滑动门 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .nav { width: 800px; margin: 100px auto;
阅读全文
摘要：一 元素的显示与隐藏 1）display实现 display:none; //隐藏元素display:block; //显示元素display:block; 不光有转换块元素的功能，还有显示的功能特点：隐藏元素 不保留位置 2）visibility实现 visibility [ˌvɪzəˈbɪlət
阅读全文
摘要：一个完整的网页，由标准流、浮动、定位一起完成布局的。 1）标准流 块元素按顺序上下排列行内元素按顺序左右排列 2）浮动 可以让多个块元素在一行显示浮动的盒子就是按照顺序左右排列 3）定位 定位按照顺序前后层叠排列显示，后来居上，可以通过z-index来调整显示顺序
阅读全文
摘要：定位总结 关于定位 1 标准流在最底层 ( 海底 )2 浮动的盒子在中间层 （ 海面 ）3 定位的盒子在最上层 ( 天空 ) 前置知识 1）为什么要使用定位 将盒子定在某一个位置，自由的漂浮在其他盒子上面 2）基本语法 定位 = 定位模式 + 边偏移 3）边偏移 [ 方位名词 ] top: 30px
阅读全文
摘要：一 浮动 float 1）作用 1 让多个盒子水平排列一行，使得浮动称为重要的布局手段2 可以实现盒子的左右对齐等3 浮动最早是用来控制图片，实现文字环绕图片的效果 2）特性 1 脱离标准流2 浮动的元素具有了行内块元素的特性。3 浮动的元素需要添加一个标准流父亲4 浮动会导致父元素高度坍塌 3）浮
阅读全文
摘要：知识梳理 1 盒子是网页布局的关键点2 padding值会撑开盒子3 样式的层叠性 后面的会覆盖前面的4 块级元素的宽度默认和父级的宽度一样5 块级元素不设置宽度就是通栏的6 border-top: 1px solid transparent; 透明边框7 li是块级元素 不用给宽度，默认和父亲一样
阅读全文
摘要：一 显示模式 display 1）块级元素 h1-h6 p div ul ol li //1 常见块元素： //2 特点 . 自己独占一行 . 宽度默认父级容器的100% . 空格 内外边距都可以设置 . 是容器级盒子，可以包含 行内元素 和 块元素 p h1-h6 dt 都是文字级块标签，里面不能
阅读全文
摘要：知识梳理 选择器就是找到页面中特定的HTML元素CSS就两件事 选对人 做对事选择器分为基础选择器 和 复合选择器 一 基础选择器 1）标签选择器 [ 元素选择器 ] div {color: red;} //直接写HTML元素名称 2）类选择器 [ 重点 ] <div class = "one tw
阅读全文
摘要：Emmet的HTML语法（敲代码的快捷方式） 版权声明：本文为网上转载。 所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。 2.输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补
阅读全文
摘要：背景总结 一 背景位置 [ 难点] background-position：X坐标 Y坐标; [ 参数可以使用方位名词 和 精确数值 ]精确数值: 百分数 或整数和单位标识组成的长度值 方位名词: top center bottom left right 1） 使用前提 必须先指定 backgrou
阅读全文
摘要：一 文本样式 1）颜色 color 1 预定义颜色值 red blue pink等2 十六进制 #fff000 #000000 [ 最常用 ]3 rgb模式 rgb(255,0,0,0.1) 最后一个参数是透明度 [ 设置阴影时常用 ] 2）水平对齐 text-align: left center
阅读全文
摘要：一 层叠性 .nav { color: red; } .nav { color: blue; } <div class="nav">样式的层叠性</div> //页面文字显示蓝色 原则： . 样式冲突 遵循的原则是就近原则，哪个样式离结构近，就执行哪个。 . 样式不冲突，不会层叠 二 继承性 子标签
阅读全文
摘要：Emmet的HTML语法（敲代码的快捷方式） 版权声明：本文为网上转载。 所有操作按下“tab”键即可瞬间完成 元素 1.在编辑器中输入元素名称，即可自动补全生成 HTML 标签，即使不是标准的 HTML 标签。 2.输入：! 或者 html:5 或者 html:4s 或者 html:4t 将自动补
阅读全文
摘要：一 书写规范 1）空格规范 .box { width: 200px;}选择器和花括号之间有空格冒号和后面的值之间有空格 2）选择器规范 .box, .nav { width: 200px; height: 200px; }并集选择器，每个选择器声明必须独占一行 3）每个属性独占一行 .box {wi
阅读全文
摘要：input禁止输入的方法1： readonly规定输入字段为只读可复制，但是，用户可以使用Tab键切换到该字段，可选择,可以接收焦点，还可以选中或拷贝其文本。<input type="text" value="哈哈哈" readonly="readonly">2：disabled 被禁用的 inpu
阅读全文
摘要：三 表单 作用：收集用户信息1 由三部分组成: 表单控件 input [也称表单元素] 提示信息 表单域 from checked属性 选中的意思 check的过去式 表示过去已经被选中的 一 input标签 1）常用属性 1 name 控件的名称2 size 控件在页面中的宽度3 value 默认
阅读全文
摘要：知识梳理 li 和 td 都是容器 放什么元素都是可以的 一 表格 知识梳理 1 作用：让数据整齐规范的显示2 表格由行中的单元格组成3 表格中没有列元素，列的个数取决于单元格的个数4 表格不要纠结外观 那是css的事情 1）表格属性 <table border="1" //表格边框 width="
阅读全文
摘要：定位锚点 id值一致 //1 使用id名标注跳转目标的位置<h2 id="md">我是锚点</h3>//2 链接内容<a href="#md">我要找锚点</a> base标签 <html> <head> <base target="_blank"/> </head> <body> <a href=
阅读全文
摘要：1 目录文件夹: 就是普通文件夹，里面存放我们需要的相关素材2 根目录: 打开目录的第一层 就是根目录 这个页面就是根目录 这个页面所有的都是在根目录 一 相对路径 相对路径，是从代码所在的这个文件触发，去寻找我们的目标文件而我们说的上一级 下一级 同一级，就是图片位于HTML有页面的位置 1）同级
阅读全文
摘要：一 排版标签 1 标题标签 <h1></h1>2 段落标签 <p></p> 3 水平线标识 <hr/> 单标签 4 换行 <br/> 单词 breck缩写 打断换行 5 div + span 没有语义 布局使用 div division的缩写 分割 分区的意思 span 跨度 跨距 范围 一行多个可
阅读全文
摘要：一 web标准 辅导辅导 //1 输入：html:5 按下tab键 快速生成骨架//2 输入：! 按下tab键 也可以快速生成骨架<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
阅读全文
