CSS 學習筆記

leviliang發表於2024-05-06
原文網址 : https://juejin.im/post/5ceea61c51882574837cdbda
CSS筆記

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		#triangle-down {
			height: 0;
			width: 0;
			border-top: 100px solid green;
			border-right: 50px solid transparent;
			border-left: 50px solid transparent;
		}
		#triangle-right {
			height: 0;
			width: 0;
			border-left: 50px solid red;
			border-top: 25px solid transparent;
			border-bottom: 25px solid transparent;
		}
		#triangle-top-right {
			height: 0;
			width: 0;
			border-top: 100px solid red;
			border-left: 100px solid transparent;
		}
	   #heart {
	      position: relative;
	      width: 100px;
	      height: 90px;
	    }
	    #heart:before,
	    #heart:after {
	      position: absolute;
	      content: "";
	      left: 50px;
	      top: 0;
	      width: 50px;
	      height: 80px;
	      background: red;
	      border-radius: 50px 50px 0 0;
	      transform: rotate(-45deg);
	      transform-origin: 0 100%;
	    }
	    #heart:after {
	      left: 0;
	      transform: rotate(45deg);
	      transform-origin: 100% 100%;
	    }
	</style>
</head>
<body>
	<div id="triangle-down"></div>
	<div id="triangle-right"></div>
	<div id="triangle-top-right"></div>
	<div id="heart"></div>
</body>
</html>複製程式碼

效果圖：

CSS 學習筆記

字型抗鋸齒：

-webkit-font-smoothing: antialiased; /*chrome、safari*/

-moz-osx-font-smoothing: grayscale;/*firefox*/複製程式碼

opacity

p {
  background: #fff;
  opacity: .5;
}複製程式碼

字型和背景都半透明

rgba()

p {
  background: rgba(255, 255, 255, .5);
}複製程式碼

只有背景半透明

height: 100%

父容器有具體的高度值，則當前元素高度值為父容器的100%

外邊距塌陷

相鄰塊元素垂直外邊距合併（外邊距塌陷）：上下兩個塊元素有margin-bottom和margin-top時，之間的垂直距離是二者較大的那個邊距值，避免就好

響應式選單

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8"> 
 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 
 <title>Document</title>  <style type="text/css">   
 body {      margin: 0;    }    
.container {      width: 80%;      height: 500px;      margin: 0 auto;      background-color: red;    }  
  .header {      display: flex;      justify-content: space-between;      line-height: 70px;      position: relative;    }  
  .tab-bar {      display: flex;    }    .tab {      width: 120px;      text-align: center;    }  
  .tab-bar-vertical {      display: none;      position: absolute;      top: 70px;      left: 0;      background-color: #fff;    }    .tab-vertical {      line-height: 70px;      width: 120px;    }    .toggle-menu {      display: none;    }    @media screen and (max-width: 500px) {      .container {        width: 95%;      }      .tab-bar {        display: none;      }      .tab-bar-vertical {        display: block;      }      .toggle-menu {        display: block;      }    }  </style></head><body>  <div class="header">    <div class="logo">xiaobao</div>    <div class="tab-bar">      <div class="tab">首頁</div>      <div class="tab">客戶</div>      <div class="tab">關於我們</div>      <div class="tab">登入</div>    </div>    <div class="toggle-menu">三</div>    <div class="tab-bar-vertical">      <div class="tab-vertical">首頁</div>      <div class="tab-vertical">客戶</div>      <div class="tab-vertical">關於我們</div>      <div class="tab-vertical">登入</div>    </div>  </div>  <div class="container">  </div></body></html>複製程式碼


動態樣式

可以先將樣式寫在不同的選擇器下，通過更換選擇器來實現樣式變更


相關文章