前端学习第三天_学习前端第三天遇到的问题-CSDN博客

本文链接：https://blog.csdn.net/weixin_43805192/article/details/84635608

第三天学习

今天是学习前端的第三天，准确的可以说是第四天因为第三天是自习，用来巩固前两天所学的前端知识，今天一上课老师就找同学上去进行例行检查，我也被叫上去了，结果就是20遍单词的抄写，接下来就是今天的教程了。

css选择器

1.后代选择器
空格
sel1 sel2
sel1里面的所有sel2
2. 子选择器
> 右括号
sel1>sel2
sel1下一目录下所有sel2
3. 兄弟选择器
+加号
sel1 + sel2
紧跟在sel1值之后的sel2
4.组合选择器合并选择器
, 逗号
sel1,sel2
sel1和sel2所有

每日单词

结构 structure
背景 background
按钮button
像素 pixel
边框 border

今日成果


<!DOCTYPE html>
<html>
     <head>
            <title>11.29</title>
            <style>
            #p1{
            	font-size:30px;
            }	
            .p22{
            	font-size:40px;
            }
             p{
            	font-size:20px;
            }
            #id{
            	width: 500px;
            	height: 400px
            }
             #div0 span{
            font-size:60px;	
            }
             #div0>span{
            font-size:80px;	
            }
            #div0+p{
            font-size:40px;	
            }
            #pp,#divv,#spann{
            	font-size:50px;	

            }
            #pp{
            	color: blue;
            }
            .btn{
            	width: 100px;
            	height: 50px
            }
            .red{
            	color: red;
            }
            .blue{
            	color: blue;
            }
            .ww {
			width: 80px;
			height: 60px;
		    }

		    .w1 {
			background: rgb(0, 0, 255);
		    }

		    .w2 {
			background: rgba(0, 0, 255, 0.6);
		}
            </style>
</head>
<body>
	<div class="ww w1"></div>
	<div class="ww w2"></div>
	<hr/>
<button class="btn red">红色按钮</button>
<button class="btn blue">蓝色按钮</button>
	<hr/>
<p id="pp">段落中的内容1</p>
<div id="divv">段落中的内容2</div>
<span id="span">段落中的内容3</span>
<hr/>
	<span>span测试内容1</span><br/>
	<span>span测试内容2</span><br/>
	<span>span测试内容3</span><br/>
<hr/>
	<div id="div0">
		<span>div中span测试内容</span>
		<p><span>div中p中的span测试内容</span></p>
	</div>
      <p>p中span测试内容1</p>
       <p>p中span测试内容2</p>
	<hr/
	<p id="p1">这是一个测试段落对的语句id</p>
	<p class="p22">这是一个测试段落对的语句class</p>
	<p>这是一个测试段落对的语句tag</p>
	<img id="id"src="C:\Users\99722\Documents\1111.jpg" titlt="这是一张图片">
	<div id="div2">
	<img id="id2"src="C:\Users\99722\Documents\1111.jpg" titlt="这是一张图片">	
	</div>
    </body>
</html>