Vue

 

插件:Live Server:浏览器实时预览

 

搜索:VUE  小时   

 

2021最新RT-Thread实时操作系统教程，入门到精通全套完整版

https://www.bilibili.com/video/BV1Cb4y1m7W5?spm_id_from=333.999.0.0

 

黑马程序员人工智能教程_10小时学会图像处理OpenCV入门教程

https://www.bilibili.com/video/BV1Fo4y1d7JL?spm_id_from=333.999.0.0

黑马程序员人工智能教程_快速入门深度学习与CV，深度学习零基础到精通

https://www.bilibili.com/video/BV1Uo4y1R77t?p=97

Java自学教程Java物联网开发“尚方宝剑”之EMQ_黑马程序员

https://www.bilibili.com/video/BV1o5411E7V1?p=74

 

黑马程序员VUE经典视频-4小时+5个拣选案例让你快速入门Vue.js

https://www.bilibili.com/video/BV1HE411e7vY/?spm_id_from=333.788.recommend_more_video.1

 

前端开发利器vue，微信小程序快速开发实战，黑马程序员前端web教程

 https://www.bilibili.com/video/BV1Sc41187nZ?spm_id_from=333.999.0.0

 

黑马程序员SpringBoot教程，6小时快速入门Java微服务架构Spring Boot

https://www.bilibili.com/video/BV1Lq4y1J77x?spm_id_from=333.999.0.0

 

（持续更新中）快速掌握 Vue 面试题

https://www.bilibili.com/video/BV1fX4y1G7iT?p=5&spm_id_from=pageDriver

 

Springboot极简入门教程，5分钟写一个http接口

https://www.bilibili.com/video/BV1Bq4y1j7Zz/?spm_id_from=333.788.recommend_more_video.1

新手一节课入门spring boot，手把手教你写java web和接口

https://www.bilibili.com/video/BV16541147s1/?spm_id_from=333.788.recommend_more_video.1

 

【极简入门】15分钟学会JWT的使用-楠哥教你学Java

https://www.bilibili.com/video/BV1cK4y197EM/?spm_id_from=333.788.recommend_more_video.-1

30分钟学会 Spring Boot + JWT + Vue-楠哥教你学Java

https://www.bilibili.com/video/BV1Kf4y187Fz?from=search&seid=9254692824834372087&spm_id_from=333.337.0.0

 

 

【2020版】4小时学会Spring Boot+Vue前后端分离开发

https://www.bilibili.com/video/BV137411B7vB?spm_id_from=333.999.0.0

 

【快速上手】Element UI+Spring Boot教程，通俗易懂深入浅出

https://www.bilibili.com/video/BV17m4y1Q7gn?spm_id_from=333.999.0.0

 

 Node.js 实践教程 基于 Midway.js 框架 2021.12.26 (nodejs midwayjs)

https://www.bilibili.com/video/BV1254y1E73m?p=12&spm_id_from=pageDriver

 

 

HTML spam元素

为了给css而存在,跟div一样.

div是块元素,spams是行元素

1 <p>Add the <span class="ingredient">basil</span>a paste.</p>
2 span {
3   background: gold;
4  }
5 
6 就basil变成了金色

 

 1 无序:
 2 <ul>
 3   <li>Coffee</li>
 4   <li>Milk</li>
 5 </ul>
 6 
 7 有序:
 8 <ol>
 9   <li>Coffee</li>
10   <li>Milk</li>
11 </ol>
12 
13 表:
14 <table border="1">
15     <tr>
16         <th>Header 1</th>
17         <th>Header 2</th>
18     </tr>
19     <tr>
20         <td>row 1, cell 1</td>
21         <td>row 1, cell 2</td>
22     </tr>
23     <tr>
24         <td>row 2, cell 1</td>
25         <td>row 2, cell 2</td>
26     </tr>
27 </table>

 

 

 

 

 

 

 

 

 

 做这种图片叠加;需要学习CSS 元素定位

 1 //根据父class_div位置为原点 定位left和right
 2 .class_div{position: relative;} //默认是static,必须填写除了static
 3 .left { position:absolute; opacity:0.3; left:0px; top:100px;} //position必须absolute
 4 .right{ position:absolute; opacity:0.3; left:200px; top:100px;} //opacity 透明度 5 
 6 
 7 <div class="class_div">  //外边必须有一个class
 8     <img src="1.jpg">    
 9     <img src="left.jpg" class="left"> 
10     <img src="right.jpg" class="right">         
11 </div>

 

 

1 //3秒之后变成false
2 loding=true;
3 setTimeout(()=>{
4         loding=flase
5 },3000)

 

CSS clear

样例1：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <div>A</div>   
    <div>B</div>     
    <style>
        li{float: left;}
    </style>

 

效果:A怎么在123旁边下面的，B不受影响

 

 

 1     <ul>
 2         <li>1</li>
 3         <li>2</li>
 4         <li>3</li>
 5     </ul>
 6     <div>A</div>   
 7     <div>B</div>     
 8     <style>
 9         li{float: left;}
10         /*li和div都是Block*/
11         /*现象:只给了li但是div即A也跟着float:left,但是下面的B没有*/
12         /*原因:float只影响到下一个,但是下下一个B不受影响*/
13         /*解决:用clear: both*/
14         div{clear: both;}
15     </style>

效果:A下来了

 

样例2：

1     <div class="a1">
2         <div>1</div>
3         <div>2</div>
4      </div> 
5     <div>3</div>  
6     <style>
7         .a1 div{float:left;border: 1px solid pink;}
8         .a1{background-color: red; border: 1px solid blue;} 
9     </style>

效果:3上去了,class='a1'的背景色看不到,边框是2px

 

 

 解决:

 1     <div class="a1">
 2         <div>1</div>
 3         <div>2</div>
 4         <!--<br style="clear:both;">-->
 5     </div> 
 6     <div>3</div>  
 7     <style>
 8         .a1 div{float:left;border: 1px solid pink;}
 9         .a1{background-color: red; border: 1px solid blue;}
10         /*现象:背景红色看不到,border是2px只在上面,虽然给了上下左右4个面*/
11         /*分析:float的父类(1,2的父类即class=a1)的高度会消失,下面的4转上来*/
12         /*解决:有两个办法,  CSS里没有clearfix
13                第1个方法:子类最后加<br style="clear:both;">
14                第2个方法:添加在类a1后面,内容为空,block属性,*/
15         .a1:after {content:"";display:block;clear:both;}  
16     </style>

内容为""就等于<span>,但是span是inline不受clear影响，所以转换成block属性

<br>本来就block属性所以可以直接clear:both;

 为了使用方便 定义一个class类

.clear:after {content:"";display:block;clear:both;} /*用在float的父类*/
 1     <ul class="clear">
 2         <li>a1</li>
 3         <li>a2</li>
 4         <li>a3</li>
 5     </ul>
 6     <div>a4</div> 
 7     <div class="d1 clear">
 8         <div>b1</div>
 9         <div>b2</div>
10     </div> 
11     <div>b3</div>   
12     <style>
13         /* 为了使用方便 定义一个class类*/
14         .clear:after {content:"";display:block;clear:both;} /*用在float的父类*/
15         li{float: left;}
16         .d1 div{float:left;border: 1px solid pink;}
17         .d1{background-color: red; border: 1px solid blue;}
18     </style>

 

 
 
 

 

 padding margin

并且一定要用

box-sizing: border-box;
1 <style>
2     *{ /*全局适应*/
3             box-sizing: border-box;/*以边框为中心*/
4     }
5     .clear:after {content:"";display:block;clear:both;} /*用在float的父类*/
6 </style>

https://www.youtube.com/watch?v=HKVmR9mdGCc

 

 https://www.youtube.com/watch?v=SJyBE-_2D34&list=PLkbzizJk4Ae_ZCinIZzwLf4XDh1NvjmyE&index=8

 

 

 

Reset.css

 1 html, body, div, span, applet, object, iframe,
 2 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 3 a, abbr, acronym, address, big, cite, code,
 4 del, dfn, em, img, ins, kbd, q, s, samp,
 5 small, strike, strong, sub, sup, tt, var,
 6 b, u, i, center,
 7 dl, dt, dd, ol, ul, li,
 8 fieldset, form, label, legend,
 9 table, caption, tbody, tfoot, thead, tr, th, td,
10 article, aside, canvas, details, embed, 
11 figure, figcaption, footer, header, hgroup, 
12 menu, nav, output, ruby, section, summary,
13 time, mark, audio, video {
14     margin: 0;
15     padding: 0;
16     border: 0;
17     font-size: 100%;
18     font: inherit;
19     vertical-align: baseline;
20 }
21 
22 /* HTML5 display-role reset for older browsers */
23 article, aside, details, figcaption, figure, 
24 footer, header, hgroup, menu, nav, section {
25     display: block;
26 }
27 body {
28     line-height: 1;
29 }
30 ol, ul {
31     list-style: none;
32 }
33 blockquote, q {
34     quotes: none;
35 }
36 blockquote:before, blockquote:after,
37 q:before, q:after {
38     content: '';
39     content: none;
40 }
41 table {
42     border-collapse: collapse;
43     border-spacing: 0;
44 }

 

normalize.css

  1 /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 
  3 /* Document 文档   ==== */
  4 html {
  5   line-height: 1.15; /* 更正所有浏览器中的行高。 */
  6   -webkit-text-size-adjust: 100%; /* 防止在 iOS 中的方向更改后调整字体大小。 */
  7 }
  8 
  9 /* Sections 部分 ============= */
 10 
 11 /*删除所有浏览器中的边距。*/
 12 body {  margin: 0;}
 13 
 14 
 15 /*在 IE 中一致地呈现 `main` 元素*/
 16 main {  display: block;}
 17 
 18 
 19 /*更正 Chrome、Firefox 和 Safari 中 `section` 和 `article` 上下文中 `h1` 元素的字体大小和边距。*/
 20 h1 {
 21   font-size: 2em;
 22   margin: 0.67em 0;
 23 }
 24 
 25 /* Grouping content 分组内容  ========== */
 26 
 27 hr {
 28   box-sizing: content-box; /* 在 Firefox 中添加正确的框大小。*/
 29   height: 0; /* 在 Firefox 中添加正确的框大小。 */
 30   overflow: visible; /* 在 Edge 和 IE 中显示溢出。 */
 31 }
 32 
 33 pre {
 34   font-family: monospace, monospace; /* 修正所有浏览器中字体大小的继承和缩放。 */
 35   font-size: 1em; /* 更正所有浏览器中奇怪的“em”字体大小。 */
 36 }
 37 
 38 /* Text-level semantics 文本级语义 ================= */
 39 
 40 
 41 /*删除 IE 10 中活动链接的灰色背景。*/
 42 a {  background-color: transparent;}
 43 
 44 /**
 45  * 1. Remove the bottom border in Chrome 57-
 46  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 47  */
 48 
 49 abbr[title] {
 50   border-bottom: none; /*删除 Chrome 57 中的底部边框- */
 51   text-decoration: underline; /*在 Chrome、Edge、IE、Opera 和 Safari 中添加正确的文本装饰。*/
 52   text-decoration: underline dotted; /*在 Chrome、Edge、IE、Opera 和 Safari 中添加正确的文本装饰。*/
 53 }
 54 
 55 /*在 Chrome、Edge 和 Safari 中添加正确的字体粗细。*/
 56 b,
 57 strong {  font-weight: bolder;}
 58 
 59 code,
 60 kbd,
 61 samp {
 62   font-family: monospace, monospace; /* 修正所有浏览器中字体大小的继承和缩放。 */
 63   font-size: 1em; /* 更正所有浏览器中奇怪的“em”字体大小。 */
 64 }
 65 
 66 
 67 /*在所有浏览器中添加正确的字体大小。*/
 68 small {  font-size: 80%;}
 69 
 70 
 71 /*防止 `sub` 和 `sup` 元素影响行高 所有浏览器。*/
 72 sub,
 73 sup {
 74   font-size: 75%;
 75   line-height: 0;
 76   position: relative;
 77   vertical-align: baseline;
 78 }
 79 
 80 sub {  bottom: -0.25em;}
 81 sup {  top: -0.5em;}
 82 
 83 /* Embedded content 嵌入内容 ============== */
 84 
 85 
 86 /*删除 IE 10 中链接内图像的边框。*/
 87 img {  border-style: none;}
 88 
 89 /*Forms 形式=============================== */
 90 button,
 91 input,
 92 optgroup,
 93 select,
 94 textarea {
 95   font-family: inherit; /*更改所有浏览器中的字体样式。*/
 96   font-size: 100%; /*更改所有浏览器中的字体样式。*/
 97   line-height: 1.15; /*更改所有浏览器中的字体样式。*/
 98   margin: 0; /*删除 Firefox 和 Safari 中的边距。*/
 99 }
100 
101 
102 /*在 IE 中显示溢出。在 Edge 中显示溢出*/
103 button,
104 input {  overflow: visible;}
105 
106 
107 /*去除Edge、Firefox、IE中文本变换的继承。*/
108 /*移除 Firefox 中文本转换的继承。*/
109 button,
110 select {  text-transform: none;}
111 
112 
113 /*更正无法在 iOS 和 Safari 中设置可点击类型的样式。*/
114 button,
115 [type="button"],
116 [type="reset"],
117 [type="submit"] {
118   -webkit-appearance: button;
119 }
120 
121 
122 /*移除 Firefox 中的内边框和内边距。*/
123 button::-moz-focus-inner,
124 [type="button"]::-moz-focus-inner,
125 [type="reset"]::-moz-focus-inner,
126 [type="submit"]::-moz-focus-inner {
127   border-style: none;
128   padding: 0;
129 }
130 
131 
132 /*恢复先前规则未设置的焦点样式。*/
133 button:-moz-focusring,
134 [type="button"]:-moz-focusring,
135 [type="reset"]:-moz-focusring,
136 [type="submit"]:-moz-focusring {
137   outline: 1px dotted ButtonText;
138 }
139 
140 
141 /*更正 Firefox 中的填充。*/
142 fieldset {
143   padding: 0.35em 0.75em 0.625em;
144 }
145 
146 legend {
147   box-sizing: border-box; /*更正 Edge 和 IE 中的文本换行。 */
148   color: inherit; /* 更正 IE 中`fieldset` 元素的颜色继承。 */
149   display: table; /* 更正 Edge 和 IE 中的文本换行。 */
150   max-width: 100%; /* 更正 Edge 和 IE 中的文本换行。 */
151   padding: 0; /*删除填充，以便开发人员在所有浏览器中将 `fieldset` 元素归零时不会被发现。*/
152   white-space: normal; /* 更正 Edge 和 IE 中的文本换行。 */
153 }
154 
155 
156 /*在 Chrome、Firefox 和 Opera 中添加正确的垂直对齐方式。*/
157 progress {  vertical-align: baseline;}
158 
159 /*删除 IE 10+ 中的默认垂直滚动条。*/
160 textarea {  overflow: auto;}
161 
162 [type="checkbox"],
163 [type="radio"] {
164   box-sizing: border-box; /*在 IE 10 中添加正确的框大小。*/
165   padding: 0; /*删除 IE 10 中的填充。*/
166 }
167 
168 /*更正 Chrome 中增量和减量按钮的光标样式。*/
169 [type="number"]::-webkit-inner-spin-button,
170 [type="number"]::-webkit-outer-spin-button {
171   height: auto;
172 }
173 
174 [type="search"] {
175   -webkit-appearance: textfield; /*更正 Chrome 和 Safari 中的奇怪外观*/
176   outline-offset: -2px; /*更正 Safari 中的轮廓样式。*/
177 }
178 
179 
180 在 macOS 上删除 Chrome 和 Safari 中的内部填充。*/
181 [type="search"]::-webkit-search-decoration {
182   -webkit-appearance: none;
183 }
184 
185 ::-webkit-file-upload-button {
186   -webkit-appearance: button; /*更正无法在 iOS 和 Safari 中设置可点击类型的样式。*/
187   font: inherit; /* 在 Safari 中将字体属性更改为“继承”。 */
188 }
189 
190 /*========== Interactive 交互的 ===============*/
191 
192 /*在 Edge、IE 10+ 和 Firefox 中添加正确的显示。*/
193 details {  display: block;}
194 
195 /*在所有浏览器中添加正确的显示。*/
196 summary {  display: list-item;}
197 
198 /* =========杂项============*/
199 
200 /*在 IE 10+ 中添加正确的显示。*/
201 template {  display: none;}
202 
203 /*在 IE 10 中添加正确的显示*/
204 [hidden] {  display: none;}

 

 

 

 

 

 

 

 

posted @ 2021-12-28 08:41  kingboy100  阅读(49)  评论(0)  编辑  收藏  举报