自己

c-bd · Nov 30, 2019 · 5d521e9 · 5d521e9
1 parent a78bcc3
commit 5d521e9
Show file tree

Hide file tree

Showing 48 changed files with 2,113 additions and 0 deletions.
diff --git a/保存/6.27HTML标识.md b/保存/6.27HTML标识.md
@@ -0,0 +1,44 @@
+第一天笔记本 《标签》
+
+head下面 
+
+base技巧  target=“—blank”
+
+![1561622184201](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561622184201.png)
+
+锚点  
+
+设置锚点id=“abc”   
+
+回到锚点 a href=“#abc”
+
+strong   b  加粗
+
+em       i     斜体
+
+del      s     删除
+
+ins        u    下滑
+
+p         段落 
+
+br        换行
+
+hr        横线
+
+img  图片
+
+&nbsp  空格
+
+&gt  尖括号右
+
+&lt    尖括号左
+
+shift+/   补充标签
+
+h    标题标签
+
+   ![1561637264713](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561637264713.png)
+
+<P><P>
+
diff --git a/保存/6.28HTML表格.md b/保存/6.28HTML表格.md
@@ -0,0 +1,41 @@
+![1561640982194](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561640982194.png)
+
+![1561686730370](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561686730370.png)
+
+![1561689015685](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561689015685.png)
+
+![1561704408058](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561704408058.png)
+
+属性对于密码输入框都有用
+
+![1561704977466](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561704977466.png)
+
+checked=checked
+
+ 默认选项
+
+![1561705984857](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561705984857.png)
+
+![1561706176933](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561706176933.png)
+
+![1561706261693](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561706261693.png)文本上传
+
+![1561706548460](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561707855136.png)
+
+作用是for=input id属性值 绑定当点击label内容是 会获取光标焦点
+
+![1561709045669](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561709045669.png)
+
+表单name 是多个表单传递的凭证
+
+![1561709343508](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561709343508.png)
+
+传递信息的方法
+
+在form内填写
+
+![1561710129593](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561710129593.png)
+
+<textarea cols="每行中的字符数" rows="显示的行数">
+  文本内容
+</textarea>
diff --git a/保存/6.30CSS基础.md b/保存/6.30CSS基础.md
@@ -0,0 +1,37 @@
+微软雅黑    Microsoft YaHei   \5FAE\8F6F\96C5\9ED1
+
+宋体  SimSun  \5B8B\4F53
+
+
+
+数字 400 等价于 normal，而 700 等价于 bold。  但是我们更喜欢用数字来表示。{字体加粗用CSS实现}
+
+一个标签可以调用多个类选择器 <class=“类名 类名”>
+
+![1561876266198](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561876266198.png)
+
+![1561876394355](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561876394355.png)
+
+让题目不加粗
+
+![1561876618529](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561876618529.png)
+
+![1561877024955](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561877024955.png)
+
+![1561877613705](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561877613705.png)
+
+![1561879131011](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561879131011.png)
+
+1em相当于一个汉字的大小
+
+#### 10.p父代选择器
+
+![1561882234448](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561882234448.png)
+
+子代选择器
+
+## 11.并集选择器
+
+![1561884927175](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561884927175.png)
+
+相邻选择器 必须是并列关系 必须为紧挨着的元素
diff --git a/保存/7.16CSS动画.md b/保存/7.16CSS动画.md
@@ -0,0 +1,38 @@
+![1563241306861](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563241306861.png)
+
+2D转换的优势和特点
+
+1.放大{倍数  不加单位}缩小取值范围0 到1；设置一个值时 宽高等比例缩放
+
+
+
+![1563244545033](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563244545033.png)
+
+![1563247422163](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563247422163.png)
+
+
+
+动画
+
+![1563247877707](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563247877707.png)
+
+必须设置持续的时长才可以；
+
+![1563249062768](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563249062768.png)
+
+![1563249220967](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563249220967.png)
+
+前两个 顺序 必须按顺序  其余的随便，
+
+2.多状态动画
+
+![1563259752265](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563259752265.png)
+
+![1563262269652](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563262269652.png)
+
+![1563265116105](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563265116105.png)
+
+使用Z轴时  必须配合 给上级元素设置perspective（视距）：像素值；z轴不变 视距越大 物体越小
+
+视距不变 z轴越大 物体越大 
+
diff --git a/保存/7.17CSS流式布局.md b/保存/7.17CSS流式布局.md
@@ -0,0 +1,19 @@
+![1563414049423](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563414049423.png)
+
+# 1.像素
+
+## 2.流式布局的特点是 宽度随屏幕缩放 但是 高度不会改变设置好屏幕最大和最小的缩放尺寸
+
+
+
+![1563418366163](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563418366163.png)
+
+解决方案： 设计素材人员，设计图片时 多倍设计。
+
+![1563419837756](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563419837756.png)
+
+![1563439359615](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563439359615.png)
+
+![1563451407954](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563451407954.png)
+
+设置移动端 图片一行显示是 流式布局中 按百分比 给a 设置大小 并浮动 使其一行显示  这样会出现的情况是 图片会变得很大 层叠起来  需要给图片 设置宽度为百分之百 则在a内全部显示。
diff --git a/保存/7.19Flex布局.md b/保存/7.19Flex布局.md
diff --git a/保存/7.1CSS.md b/保存/7.1CSS.md
@@ -0,0 +1,31 @@
+![1561951418628](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561951418628.png)
+
+![1561951435225](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561951435225.png)
+
+![1561952299035](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561952299035.png)
+
+![1561953484002](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561953484002.png)
+
+背景属性连写
+
+![1561963037185](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561963037185.png)
+
+文本居中完全可以当做文字居中
+
+
+
+技巧![1561964296895](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561964296895.png)
+
+![1561966763955](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561966763955.png)
+
+![1561967525671](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561967525671.png)
+
+
+
+![1561968129370](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561968129370.png)
+
+# 1.熟练使用
+
+![1561970826473](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561970826473.png)
+
+![1561971762101](C:\Users\Mr.Chen\AppData\Roaming\Typora\typora-user-images\1561971762101.png)
diff --git a/保存/7.21rem布局.md b/保存/7.21rem布局.md
@@ -0,0 +1,78 @@
+1em=父亲字体的大小
+
+只要用到em子元素都有效
+
+只能在父元素下面受控制
+
+#### rem
+
+root指html的font-size大小，
+
+形成绝对唯一控制 设置在html上。
+
+吧px换成rem 可以控制等比变化
+
+
+
+![1563673771360](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563673771360.png)三种方案
+
+1.padding值加定位（pc端）
+
+2.flex设置（移动端）
+
+3.margin值加定位{宽度不设置 设置margin值会往中间挤}
+
+媒体查询 
+
+查询屏幕的变化
+
+
+
+less语法中
+
+@开头是变量 【@color：red；
+
+嵌套关系  
+
+![1563680132423](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563680132423.png)
+
+伪类 等{&代表自己}写在括号内
+
+	接着写卸载a下面 括号外
+
+![1563680201629](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563680201629.png)
+
+运算
+
+![1563680386644](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563680386644.png)
+
+两个不同单位取第一个单位；
+
+![1563691439910](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563691439910.png)
+
+rem布局缺点：
+
+		挡位划分不够细 所以会发生 不流畅变化	
+
+js
+
+	默认划分10份
+
+	变化一次 计算一次
+
+引用 JS时
+
+![1563701143491](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563701143491.png)
+
+![1563701255350](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563701255350.png)
+
+权重不够 行内的没有文件权重高 所以需要提权  加！improtent
+
+rem布局：rem+flexible.js 连续变化；用户友好体验；
+
+- 第二步：
+  - **准备各个档位下的rem**：这个不需要准备，JS帮我们实现每个屏幕都有自己的font-size
+  - **拿到当前设计稿下的1rem代表多少PX值**：因为我现在是750px的设计稿，所以可以得到750px这个尺寸属于的档位下的HTML 的font-size大小，也就是750px设计稿下的1rem值。
+  - **计算比例**：把页面刚才所有的元素的PX值替换为 rem 比例值；（82px 想转换成多少rem ,75px = 1rem  82rem/75）;
+  - **达到目标**：那么，屏变化时，1rem(基础块)也会变化，自然就是等比缩放；
+
diff --git a/保存/7.22响应式布局.md b/保存/7.22响应式布局.md
@@ -0,0 +1,38 @@
+# 1.bookstrap(初始化样式)
+
+![1563762156687](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563762156687.png)
+
+下面的js是对ie浏览器的不支持 做兼容。
+
+这个js里面有预制好的样式  直接掉类名就可以。
+
+不设置宽度  margin值设置会向内压缩；但如果margin设置成负值；则向外扩展。
+
+## 2.栅格 系统  （重要）
+
+![1563764329993](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563764329993.png)
+
+## 3.控制显示 和隐藏
+
+![1563765987257](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563765987257.png)
+
+![1563767325350](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563767325350.png)	
+
+![1563785195489](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563785195489.png)
+
+
+
+更换挡位时   图片还是原来的大小
+
+第一步：
+
+![1563787946807](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563787946807.png)
+
+第二步
+
+![1563786616310](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563786616310.png)
+
+第三步
+
+![1563787498877](C:\Users\HP\AppData\Roaming\Typora\typora-user-images\1563787498877.png)
+