前端笔记总结--需要Typora可联系作者

一、w学习CSS笔记Day01

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TxkRnbd0-1654052681687)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220524200853060.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-w3jjNrD5-1654052681688)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220524214848756.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pJ4D0I6w-1654052681688)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220524215655249.png)]

1.内边距

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SSpcJhLg-1654052681688)(file:///C:\Users\Administrator\Documents\Tencent Files\2529165097\Image\C2C\7602583A710E5D65D8E4D131D546106F.jpg)]

1.1总结

body标签,默认有一个边距,造成页面四边都有白色间隙,如何去除

body{

margin:0

}
内容居中

文本居中,文本会在这个区域中居中。

雷云腾

区域居中,自己要有宽度+margin-left:auto margin-right:auto

如果存在float修饰,一定记得加入

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ggi73GYE-1654052681688)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220525204417415.png)]

1.1.1小总结

.body{

margin:0;

}

表示填满格子没有空隙

margin:0 auto;

width:1128px;

将内容居中到1128px位置

在a 里面的行内标签：默认设置高度,边距无效, 块级 &行内=块级

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fjVVVnyk-1654052681688)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220528112507536.png)]

1.1.2取消超链接下划线

如果以后在a 标签中不想显示超链接的下划线text-decoration: none

想要设置移动到a标签内的文字变为其他颜色代码如下：

.sub-header .menu-list a:hover{
    color:#ff6700;
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JtnBCpSC-1654052681689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220528163305539.png)]

设置文字透明度：opacity: 0.7;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bPxCTRpG-1654052681689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220528225407675.png)]

1.2.hover

使img标签下的图片不被显示

如果display:block;

那么将会显示

或者嵌套样式hover里面

1.3.after

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cg9uGBrR-1654052681689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220528225802636.png)]

与写的样式拼接, 拼接在文本的后面

1.4.float

如果在样式里面定义了float

则需要在下面定义中写上

1.5.postition

fixed: 固定在窗口的某个位置随滚动条浮动

二、JavaScript的使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AUXborP9-1654052681689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220529151541248.png)]

当鼠标点击大标题时候会触发JS里面的myfunc函数

function myFunc()

οnclick=myFunc();---->JS入口

alert()–>弹窗

1.字符串类型

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XzPM8DFT-1654052681689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220529161322170.png)]

2.JS定时器

JavaScript中的定时器

setInterval(show,1000)

3.DOM

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gKo3OEfz-1654052681689)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220530101459658.png)]

4.根据标签提供内容

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nbvJ8i2D-1654052681690)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220530102501499.png)]

document.createElement(“li”) 往里面添加内容为北京，创建一个叫li的标签
tag.appendChild是将内容输入进去

5.事件的绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZfOebqHG-1654052681690)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220530104720091.png)]

6.动态事件绑定

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Iec9cF8E-1654052681690)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220530105203882.png)]

7.动态事件绑定进阶

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UZWe3GY4-1654052681690)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220530105813115.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FwQEUn98-1654052681690)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531130338486.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HfX1L7p2-1654052681690)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531130358360.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-PdDlTzKG-1654052681691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531130417485.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DXvrs07Y-1654052681691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531130433747.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ii78rsoh-1654052681691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531130452502.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HO1b8aUp-1654052681691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531174800285.png)]

8.事件

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jyf1LgsJ-1654052681691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531222231628.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zPIdrJwm-1654052681691)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531223123884.png)]

9.事件删除

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wQcJhACI-1654052681692)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220531223705808.png)]

三、前端总结

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KXFcIINQ-1654052681692)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220601110300020.png)]
外链图片转存中…(img-jyf1LgsJ-1654052681691)]

[外链图片转存中…(img-zPIdrJwm-1654052681691)]

9.事件删除

[外链图片转存中…(img-wQcJhACI-1654052681692)]

三、前端总结

[外链图片转存中…(img-KXFcIINQ-1654052681692)]