發表文章

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 */     ...
張貼留言
閱讀完整內容

HTML Day3

圖片
*****From**** 表單: <form name="test" method="get" action="https://www.google.com"></from> from 表單 用於提供使用者輸入資訊並提交給server 輸入密碼欄: password:<input type="password" placeholder="六位數密碼"  > 表籤input type 設定為password key資訊則為隱藏 *****單選按鈕*****  <input type="radio" name="sex" checked="checked" >男 <input type="radio" name="sex" >女 type 設定為 radio 則為單選鈕 name 設定相同 在單選鈕中相同的name 只能選擇一個 checked="checked"設定為默認項 *****複選按鈕***** <input type="checkbox" name="like" />睡覺 <input type="checkbox" name="like" checked="checked" />吃飯 <input type="checkbox" name="like" />打豆豆 type 設定為  checkbox 則為複選鈕 name 設定相同 在複選鈕中相同的name 將複選鈕群組 checked="checked"設定為默認項 *****下拉菜單***** ...
張貼留言
閱讀完整內容

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...
張貼留言
閱讀完整內容