# blogs
**Repository Path**: NickASuo/htmlcssjs
## Basic Information
- **Project Name**: blogs
- **Description**: GowthamTirri Complete Website Tutorial
印度小哥的前端一个博客网页制作视频的素材及源码
- **Primary Language**: HTML
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-12-23
- **Last Updated**: 2024-12-24
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# GowthamTirri Complete Website Tutorial
> 这是一个印度小哥开发一个博客网页的视频，包括html、css、js，讲得非常好，所以从头跟着敲了一边代码，包括其原始素材均在该仓库中。
## 博客网页开发内容
### 第一部分
### 第二部分
### 第三部分
### 第四部分
### 第五部分
## 学习该博客网页开发视频的收获
1. img背景透明,对于后期css操作img有很大的灵活性处理，包括设置背景颜色，通过css给背景绘制其他装饰内容。
2. nav标签默认是块级标签，占满一行。
3. 标签 + 点 + 类名，可以快捷键生成标签 + 类名的内容。
4. ul、li默认是块级标签，会换行占满一行。
5. 可以将a标签用css修饰成button按钮。
6. 点 + 类名，快捷键生成div + 类名的标签。
7. h1和p标签为块级标签，a为行内标签。
8. display:flex,可以让块级标签变成行内标签，让垂直内容变水平。
9. position:absolute;让自己漂浮起来，脱离文档流。
10. ul可以用text-align:left,center,left修饰。
11. li可以用list-style:none;取消有序、无序的序号。
12. display:inline-block;可以让块级标签变成行内标签，让垂直内容变水平。
13. 如何用a标签制作一个按钮，设置padding扩充ａ的内容，设置背景颜色，设置border-radius为圆角，
一个按钮就有了，：hover添加鼠标悬浮效果，js获取元素添加按钮点击之后的业务逻辑。
14. 可以在container div里通过display:flex;让子元素div全部成为行内标签，垂直布局变水平布局。
15. 一个container的div如何把两个div平均分成一样大的两份，用flex-basis:50%。
16. 一个container的div如何把四个div平均分成一样大的四份，用display:grid;grid-template-column:1fr 1fr 1fr 1fr;
17. box-shadow添加阴影，比QFrame添加阴影强一万年。
18. 所见即所得，让多段文本有更好的段落效果，padding-right:5rem;给右边一些空间挤下去，margin-bottom，顺势把下面的内容挤下去放段落。
19. 如何让一幅图活起来，给img添加一个bos-shadow:2px 2px 10px rgba(0,0,0,0,239)，再给一个圆角边框border-radius:10px。
20. 如何让3*2的六个div上下水平方向上平均布局三个div，只需两步：第一步，父亲的容器container div用display:grid;grid-template-column:1fr 1fr 1fr;一行布局三个
第二步，将img的宽度设置为100%。
21. h1标签最通用的处理方式，1.加一个字体大小font-size:18px; 2.文字居中text-align:center;
22. div标签内大的布局调整，用padding:50px; 可以大幅秒改布局，达到你想要的效果。
23. 同一个标签在不同的区域中有不同的css修饰，这时候的选择器写成区域类名 + 空格 + 具体修饰标签类名{css};，这样不同区域里同一个类名的标签可以处理不一样的css样式修饰，
不然很容易互相影响，混乱不可维护，我在跟着硬度小哥学习的过程中踩过坑。
24. div标签中的内容垂直方向的平均布局，用display:flex;flex-direction:column;justify-content:space-around;
25. 让h1标签从块级标签变为行内标签，并且在水平方向上平均布局，用display:flex;justify-content:space-around;
26. 搜索“AOS JS”,可以搜到非常好的第三方JS动画，我感觉这是硬度小哥给我最好的知识了，以后我的网页有比肩ppt的各种动画效果了，变大，从左嵌入，从右嵌入，散成碎片等等动画效果。
27. JS实现悬浮球点击滚动到网页首页的功能，简单易懂超赞。
28. 鼠标交互时的切换，cursor:pointer，让有交互的标签有交互鼠标样式。
**我是一个从C++转过来的纯菜鸟前端开发，希望跟大哥大姐们一起好好学习，天天向上**