發表文章

目前顯示的是 8月, 2017的文章

CSS選擇器(class/ID/後代/群組)

class選擇器 html <body> <div class="primary-box"> <h2>Primary Box</h2> <p>Some text <em>in the box</em>.</p> </div> <div class="secondary-box"> <h2>Secondary Box</h2> <p>Some text <em>in the box</em>.</p> </div> css .primary-box{ } .secondary-box{ } ID 選擇器 html <div id="monkey"> <p>I am. a monkey.</p> </div> CSS #monkey{ } 後代選擇器 CSS .primary-box em { font-style: italic; color: #6fd6f5; } 群組選擇器 CSS .inner-box h3,.inner-box p{ font-size: 24px; color: #b2acac;}

CSS 表單樣式

HTML Form 語法 <form></form> html語法顯示form裡面是一個表格 <fieldset></fieldset>填表範圍 <legend></legend>表格內容大標 <label></label>表格問題名稱 *FIELD 主要用在輸入表格(FORM)。LEGEND 只用在 FIELDSET,宣告 FIELDSET 的標題 <form>    <label for="contact_name">Name</label>    <input type="text" id="contact_name"></input>   <labal for="Contact_email">Email</label>   <input type="text" id="Contact_email"></input>                  </form> 表單元素 文字輸入欄位 <input type="text"></input> email輸入欄位 <input type="email"></input> 送出表單按鈕 submit <input type="submit" value-"send messege"></input> 多行的文字輸入欄位 <textarea cols="X" rows="Y"> </textarea>  <textarea style="width:200px;height:100px;...

html基本架構:特殊字元/nav, section和 article/aside/abbr, quote和blockquote

特殊字元- html語法 &amp=& &copy=© &lt=< 更多: http://www.ascii.cl/htmlcodes.htm nav , section and article/aside < nav >導覽列 < ul > < li ><a href ="header-footer . html">header &Footer</a></ li > < li ><a href ="ids_class.html">IDS &Classes</a></ li > < li ><a href =" div -span . html">Span &Div </a></ li >         </ ul > </ nav > < article  文章架構 class="blog-post"> < section  段落 class="post-heading" >標題 <h2>A Blog Post Heading</h2> </ section > < section class="post-body">本體 < p >This the body of our blog post</p> </ section > < section class="post-footer">結尾 <h2>Read more about this topic</h2> < ol > < li ><a href ="header-foo...

html基本架構:超連結/列表/表格/表單

創建一個資料夾,把網頁會連到的相關連結放在裡面 首頁取名通常為index.html,以利伺服器找到首頁 超連結<a href=""></a> 1.絕對網址 連到外部網站,通常為絕對網址 <a href="http://google.com"></a> 2.相對網址 連到網站內部的其他網頁,這類網站通常會放置於和首頁相同資料夾 <a href="名稱.html"></a> 列表 1. 無序列表 <ul> <li>carrot</li> <li>cucumber</li> <li>kale</li> </ul> 2. 有序列表 <ol> <li>Yellow Potato</li> <li>Red Potato</li> <li>Blue Potato</li> </ol> 3. 描述性列表 <dl> <dt>carrot</dt> <dd>a food that rabbits are fancy on</dd> <dt>cucumber</dt> <dd>a green stick</dd> <dt>kale</dt> <dd>a leafy like vegetable</dd> </dl> 表格 <table>表格架構 <tr>表格欄(table row) <th>Name</th>表格欄主標(table head) <th>City</th> <th>Age</th> </tr>...