分享

HTML&CSS Day6 core attribute - 1

 
<body>
 <div class="box"></div>
 <br/>
 <br/>
 <div class="bt">
   寫文章
   </div> 
</body> 
.box{
  width:300px;
  height:300px;
/*背景顏色    */
  background-color:red;  
/* 背景圖片   */
 background-image:url(https://i.postimg.cc/qMbf9qcK/icon-00.png); 
/* 背景平鋪方式
 repect 平鋪(default)
 no-repeat 不平鋪  
 repect-x 水平方向平鋪
 repect-y 垂直方向平鋪
 */ 
 background-repeat:no-repeat; 
/* 背景大小   */ 
 background-size:100px 100px; 
/*  背景位置
 水平方向 left/center/right/數值
 垂直方向 left/center/right/數值*/ 
 background-position:center center; 
.bt{
   width:100px;
height:30px;
   color:blue;
   text-align:center;
line-height:30px; // 行高等於容器高度 文字上下至中
   font-size:14px;  
/*     background-color: #9370DB;
   background-image:url(https://i.postimg.cc/s2YdvcSF/fountain-pen-tip.png);
 background-repeat:no-repeat;
 background-position:10px center; */ 
↕ 
/*   簡寫 */
 background:no-repeat 10px center url(https://i.postimg.cc/s2YdvcSF/fountain-pen-tip.png) #9370DB; 
分類:學習

評論
上一篇
  • 下一篇
  • 更多文章
    載入中... 沒有更多了