一、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)]