HTML、CSS小白——盒子标签border画直角三角形，分组、派生选择器，行级、块级、行块级元素display、伪类选择器hover

<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
    /*父子选择器
		派生选择器*/
    /*div span {
        background-color: red;
    }*/

    /*div strong em {
        background-color: orange;
    }*/
    /*直接子元素选择器*/
   /* div > em{
    	background-color: blue;
    }*/
    /*自右向左顺序查找的*/
    /*section div ul li a em{
    	background-color: green;
    }*/
    /*并列选择器*/
    /*div.demo{
    	background-color: orange;
    }
    #only{
    	background-color: red;
    }
    .content em{
    	background-color: green;
    }
    .wrapper > .content > .box{
    	background-color: blue;
    }
    div.wrapper > div[class="content"] > .box{
    	background-color: orange;
    }*/
    /*div #idP{
    	background-color: red;
    }
    .classDiv .classP{
    	background-color: green;
    }*/
    /*分组选择器*/
   em,
   strong,
   span{
   	background-color: red;
   }
   /*div{
   	font-size: 16px; 字体大小
   	font-weight: bold; 字体加粗类似于strong
   	font-style: italic; 斜体类似于em
   	font-family: arial; 英文字体乔布斯发明的
   	color: rgba();
   	复合属性
   	border: 1px solid black;给加盒子 */
   	/*border: border-width,border-style,border-color; */
   /*	border-left-color: red;
   }*/
   /*设置颜色
   1.土鳖(纯英文单词) green red white
   2.颜色代码 #ffff
   3.颜色函数 rgba(255,255,255)
   r            g          b
   00-ff       00-ff      00-ff
   */

   
   /*画三角形*/
   .qaq{
   	width: 0px;
   	height: 0px;
   	border: 200px solid transparent;
   	border-bottom-color: red;
   	/*直角三角形*/
   	border-left-color: red;
   }
    </style>
</head>


   <!-- 画一个三角形 -->

   <div class="qaq"></div>



   <!--  <em>1</em>
    <strong>2</strong>
    <span>3</span> -->

    <!-- <div class="Div" id="idDiv">
    	<P class="classP" id="idP">1</P>
    </div> -->



   <!--  <div class="wrapper">
    	<div class="content">
    		<em class="box" id="only">1</em>
    	</div>
    </div>
 -->
<!-- <body>
    <div>
        <strong>
            <em>234</em>
        </strong>
        <em>22</em>
    </div>
    <div>
        <span>2421</span>
    </div> -->



   <!--  <section>
    	<div>
    		<p>
    			<a href="">
    				<span></span>
    			</a>
    		</p>
    		<ul>
    			<li>
    				<a href="">
    					<span>
    						<em>1</em>
    					</span>
    				</a>
    				<p></p>
    			</li>
    			<li></li>
    		</ul>
    	</div>
    	<a href="">
    		<p>
    			<em>2</em>
    		</p>
    		<div></div>
    	</a>
    </section> -->

</body>

</html>

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		div{
			border:1px solid black;
			text-align: left;  /*对齐方式*/
			height: 200px;
			line-height: 20px; /*行高度*/
			/*line-height = hight 居中方式*/
			text-indent: 2em;
			/*相对位置 缩进两个字节 1em = 1 * font-size */
		}
		/*span{
			text-decoration: line-through;*/
			/*划线*/
			/*text-decoration: underline;*/
			/*下划线*/
			/*color: rgb(0,0,238);
			cursor: pointer;
			width: 100px;*/
			/*鼠标光标鼠标提示符*/
		/*}*/
		/*伪类选择器 鼠标移动到标签发生变化*/
		a{
			text-decoration: none;
		}
		a:hover{
			background-color: orange;
			color: #fff;
			border-radius: 10px;
			font-weight: bold;
			font-family: arial;
			text-decoration: underline;
		}
		/*改变行级元素为块元素 display*/
		span{
			width: 50px;
			height: 50px;
			display: block;
			background-color: rgb(0,0,238);
		}
		/*改变块级元素为行级元素*/
		.qaq{
			display: inline;
			width: 100px;
			height: 100px;
			background-color: blue;
		}
		img{
			width: 100px;
			height: 200px;
			/*margin-left: -4px;*/
		}


	</style>
</head>
<body>
	<div>因新冠肺炎疫情，学校延期开学。在家时间不浪费，提高技能好机会。阿里云弹性计算联合开发者社区，推出高校“在家实践”计划，全国高校学生，每人可免费领取一台云服务器ECS算力资源，在线实践课程等资源。</div>
<!-- 

	<del>原价50元</del>
	<span>原价50</span>

	<a href="www.baidu.com">www.baidu.com</a>
	<div class="qaq">123123</div> -->


	<img src="https://bkimg.cdn.bcebos.com/pic/54fbb2fb43166d22ca0c87944a2309f79052d2b3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"><img src="https://bkimg.cdn.bcebos.com/pic/54fbb2fb43166d22ca0c87944a2309f79052d2b3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"><img src="https://bkimg.cdn.bcebos.com/pic/54fbb2fb43166d22ca0c87944a2309f79052d2b3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg"><img src="https://bkimg.cdn.bcebos.com/pic/54fbb2fb43166d22ca0c87944a2309f79052d2b3?x-bce-process=image/resize,m_lfit,w_268,limit_1/format,f_jpg">
	<!-- 凡是带有inline的元素，都有文字特性 -->

	<!-- 1.行级元素、内联元素 inline
		span strong em del a 
	feature ： 内容决定元素所占位置
	           不可以通过css改变宽高
	     2.块级元素 block
	      div p ul li ol form address
	feature ： 独占一行
               可以通过css改变宽高
         3.行级块元素 inline-block
         img
    feature ： 内容决定大小
               可以改宽高
               -->

</body>
</html>

不会java不改名

发布了82 篇原创文章 · 获赞 21 · 访问量 2011

私信关注

HTML、CSS小白——盒子标签border画直角三角形，分组、派生选择器，行级、块级、行块级元素display、伪类选择器hover

猜你喜欢