Web前端第二季(CSS):一:101-什么是CSS+102-下载安装HBuilder+103-什么是div和span标签+104-块元素和行内元素的区别+105-CSS基本语法

目录

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

 1.我自己代码的GitHub网址

1.SIKI学院:我参考此视频实操

1.w3school官网:当做字典使用

1.菜鸟教程：当做字典使用

三.注意

四.操作:1:成功:101-什么是CSS？

1.成功：了解了什么是CSS

四.操作:2:102-下载安装HBuilder

1.下载：发现官网没有了HBuilder(已经是上一个版本了)，全部是HBuilderX

1.创建项目:成功

​ 

 四.操作:3:103-什么是div和span标签

1.创建新的html文件 

1.运行效果：成功:

四.操作:4:104-块元素和行内元素的区别

1.运行结果：div是块元素：不会换行

1.知道如何查看优秀网站的前端代码

四.操作:5:105-CSS基本语法

1.运行结果：成功

---

一.目的

1.想：学习前端知识

2.想：记录笔记，下次不用看视频，直接看笔记就可以快速回忆。

二.参考

 1.我自己代码的GitHub网址

​​​​​GitHub - xzy506670541/WebTest: SIKI学院的Web前端

1.SIKI学院:我参考此视频实操

Web前端第二季（CSS） - SiKi学院 - 生命不息，学习不止！

1. 我参考此视频实操

1.w3school官网:当做字典使用

w3school 在线教程

1.菜鸟教程：当做字典使用

菜鸟教程 - 学的不仅是技术，更是梦想！

三.注意

四.操作:1:成功:101-什么是CSS？

1.成功：了解了什么是CSS

布局方式：
为什么需要先给整个网页布局？
没有布局的网页，是不美观的，是杂乱的。
有了布局，就相等于大楼有了主体结构，接下来就是给主体结构添砖加瓦，刷漆等。
这些后续工作在我们的网页中就是内容，图片文字等内容。
第一种方式：Table（基本不用）
第二种方式：DIV+CSS（项目中的常用方式）

四.操作:2:102-下载安装HBuilder

1.下载：发现官网没有了HBuilder(已经是上一个版本了)，全部是HBuilderX

HBuilderX-高效极客技巧

版本：HBuilderX.3.2.9.20210927

1.创建项目:成功

 

 

 

 

 

 四.操作:3:103-什么是div和span标签

1.创建新的html文件 

	
		
		
	
	
		
我是第1个div标签里面的内容
这个是标题
		
我是第2个div标签里面的内容
		
我是第3个div标签里面的内容
		
		我是第3个div标签里面的内容

		我是第3个div标签里面的内容

		我是第3个div标签里面的内容

	

1.运行效果：成功:

1. div感觉没有起到作用，需要和css在一起才会有效果

 

	
		
		
	
			
		我是第1个div标签里面的内容 

		我是第2个div标签里面的内容 

		我是第3个div标签里面的内容 
		
		我是第3个div标签里面的内容 
	
		我是第3个div标签里面的内容 
	
		我是第3个div标签里面的内容 
	
		
我是第3个div标签里面的内容 
	
		
我是第3个div标签里面的内容 
	
		
我是第3个div标签里面的内容 
	
	

 

四.操作:4:104-块元素和行内元素的区别

1.运行结果：div是块元素：不会换行

 

	
		
		
	
	
		
		
div是块元素：单独占一行
		
标题
		
段落
		

		
		
		span是行内:不会换行
		b标签
		i标签
		font标签
		
		
		
	

 

1.知道如何查看优秀网站的前端代码

 

四.操作:5:105-CSS基本语法

1.运行结果：成功

	
		
		
		
	
	
		
我是第2个div标签里面的内容
		
我是第2个div标签里面的内容
		
我是第2个div标签里面的内容
		
我是p标签内容