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;

}




留言

張貼留言

這個網誌中的熱門文章

HTML Day1

圖片
******HTML: 標記語言****** 標記:<文本> <html> 單標籤: <img/> 標籤對: <html> </html> 文本: 顯示文字 超文本:顯示文字、音樂、影音 範例: <html>     <head>            <title>hi Benny</title>     </head>     <body>         hello everybody     </body> </html> ******CSS :  層疊樣式表****** 加入 <div   style="width: 100px; height:100px; background:red;"></div> ******javascript****** 加入 JS後點擊紅色區域可以跟變改寬度 <div  onclick="this.style.width='200px';"   style="width: 100px; height:100px; background:red;"></div> HTML 基本結構 <!--注釋 快捷鍵 ctr + / --> <!-- 開頭檔--> <!DOCTYPE html>    <!--網頁正式內容 --> <html>                <head>             <...
閱讀完整內容

HTML&CSS Day4 CSS 嵌入方式 與 選擇器

  < html > < head >      < title > charset </ title >       <!-- 內部樣式表 -->       < style >           /* CSS註釋方式*/           /*書寫樣式中 空格 換行不影響*/           /* div{width: 100px; */               /* height: 100px; */               /* background:blue;} */                 /* 導入外部樣式  方法1*/                 /* 使用import 寫在 style */     ...
閱讀完整內容

HTML Day2 table

圖片
表格      tr:行     td:單元格     width: 表格寬度     height:表格高度     border:邊寬大小     cellspacing:單元格之間的距離 cellspacing="0" cellspacing="1" cellspacing="2"    cellspacing="3"   cellspacing="30"  ************************************************* cellpadding:挑整內容位置     align:對其方式 left center right     加入在table 對齊表格           tr    對齊整行           td    對齊單元格       Valign: 垂直方向 只能用於 tr /td ; top middle bottom     bordercolor: 邊框顏色 ************************************ <table width="300" height="200" border="=1" cellspacing="0"  cellpadding="0" bordercolor="blue">         <!-- 第一行 -->         <tr align="center">             <td valign="bot...
閱讀完整內容