發表文章

目前顯示的是 10月, 2019的文章

HTML &CSS Day8 CSS core attribute -3

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8">     <title></title>     </head>   <body>     <div id="box">       hello world!     </div>       <ul>        <li>HTML</li>       <li>CSS</li>       <li>Javascript</li>               <p>HTML</p>           <a href="www.google.com">google</a>     </ul>       </body> </html> *****CSS*** #box{       background:red;       width:300px;       height:30px;       line-height:30px;       color:white;       text-align:center;   } ul{ ...
張貼留言
閱讀完整內容

HTML&CSS day7 core attribute - 2

圖片
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <div class="view"><span class="phone"> iPhone XS Max </span> <span>256GB</span>，6.5 吋超Retina 特製OLED 顯示器玻璃材質搭配醫療級特製不鏽鋼邊框<span>IP68 </span>等級，了解更多iPhone XS Max 256GB相關的資訊、規格型號、不用<span class="price2">18888</span>、 ...只要<span class="price1">6999</span></div> </body> </html> *****CSS**** span{   font-size:25px; } .phone{   color:red; } .price1{   color:red;   text-decoration: underline; /* 底線   */ } .price2{   color:blue;   text-decoration:line-through; /* 刪除線   */ }
張貼留言
閱讀完整內容

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; // 行高等於容器高度 文字上下至中     ...
張貼留言
閱讀完整內容

HTML&CSS Day5 CSS權重 與屬性

< html > < head >      < title ></ title >      < style   type = "text/css" >           /* 權重大小規則     標籤權重:1 class權重:10 id權重:100     權重表達方式:0000     類型選擇符:0001     class選擇符:0010     id選擇符:0100     偽類選擇符:0010     包含選擇符:權重之和     內聯樣式:1000     集成樣式:0000      */          div {           width :  100px ;           height :  100px ;           background : red ;      }       #head {  ...
張貼留言
閱讀完整內容

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

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