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>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章