HTML6&CSS学习心得

HTML6&CSS学习心得

1.关于之前无法使用到div的问题，今天发现主要是因为css的目标选择器的问题，直接引用class类选择器貌似无法直接选中我想要修改的元素
例如

<div class="left">
		 <div class="p1">
			 <img src="imgs/QQ音乐-01.png" width="150px" />
		 </div>
		 <div class="t1">
			 <center><p class="1">在线音乐</p></center>
				 <div class="11">
					 <span>
						 <img src="imgs/music.png"  width="30" />
					 </span>
					<span> 音乐馆</span>
				 </div>
				 <div class="11">
					 <span>
						 <img src="imgs/video.png" width="30"  />
					 </span>
					<span>视频</span>
				 </div>
				 <div class="11">
					 <span>
						 <img src="imgs/redio2.png" width="30"  />
					 </span>
					<span>电台</span>
				 </div>

这是我在模仿QQ音乐做导航栏界面时编写的HTML代码，然后在我想对t1下的div进行css编辑时下意识的对全部的div进行了class命名（class=“11”）
以下是我一开始写的css代码

.11｛
background-coler:  red;
font-size:   23px;
display: flex;
align-items: center;
justify-content: center;
｝
.11:hover{
background-coler:#5555FF;
cursor:pointer;
}

然后的运行结果就没了
然后想了好久试了一下父类选择器

.t1 div{
	display: flex;
	align-items: center;
	justify-content: center;
}
.t1 div:hover{
	background-color: #5555FF;
	cursor: pointer;

然后他就能用了

（这里因为是截图所以看不见鼠标小手的转换）
这样应该算是初步解决了这个问题。
至于还有没有其他的办法还有待于我继续学习。
2.今天还搞清楚了如何用css让单行字符居于一个div盒子的正中间
上代码

    display: flex;
	align-items: center;
	justify-content: center;

这个主要用到了正在学的flex的布局方式，这应该算是比较简单的一种运用吧，emmmm，用flex确实能够比较简单的实现float不太好实现的垂直居中，这应该算是我今天的一个小收获吧。