鳴黎的筆記

2016年7月29日星期五

Android-NavigationDrawer

2016年7月24日星期日

Css-基本認知( 二 )_樣式宣告、選擇器

前一篇 :

那我們要如何去宣告 ?
那宣告的格式為何 ?

1 . 宣告樣式方法

選擇器 {
    <!-- 屬性 : 參數 ; -->
    樣式
}

2 . 我們知道公式後，要怎麼套用 ?

選擇器 : 簡單來說，我要把這樣式套用在哪裡。
樣式 : 字體大小、顏色...等。

接下來這篇介紹選擇器 :

Html 標籤
物件名稱
ID 名稱
子項選擇器
後代選擇器
通用選擇器
多組選擇器

1 ) Html 標籤

p{
   color:red;
}

2 ) 物件名稱 : 選擇器前面有加 "."

.setColor{
   color:red;
}
<span class="setColor">Tom</span>

3 ) ID 名稱 : 選擇器前面有加 "#"，但是 ID 多用於辨識元件或讀取參數

#setColor{
    <!-- 屬性 : 參數 ; -->
   color:red;
}
<span id="setColor">Tom</span>

4 ) 子項選擇器 : 某元件底下一層的元件 ( 只對一層 )，中間會用 : >

.ttable>li {
    <!-- 屬性 : 參數 ; -->
   border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

5 ) 後代選擇器 : 某元件底下所有被選擇到的元件 : 中間會用 : _ ( 空白 )

.ttable li {
    border:1px solid red;
}
<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

為了讓大家更能了解到 4 、 5 的差異

6 ) 通用選擇器 : 全部的標籤都會被套用到樣式，會使用 : *

*{
    border:1px solid red;
}

<ul class="ttable">
    <li>Car
        <ul>
            <li>TX</li>
            <li>MX</li>
            <li>HX</li>
        </ul>
    </li>
</ul>

7 ) 多組選擇器 : 共用相同的樣式，減少重複的風格樣式，會使用 : ，

h1,span{color:red;}

3 . 樣式權重

p{color:red;} /*權值為1*/
p span{color:green;} /*權值為1+1=2*/
.warning{color:white;} /*權值為10*/
p span.warning{color:purple;} /*權值為1+1+10=12*/
#footer .note p{color:yellow;} /*權值為100+10+1=111*/

同選擇器具權重 : 標籤遠近

<style>
p{color:red;}
p{color:green;} V
</style>

最重要 !important

<style>
p{color:red!important;} V
p{color:green;} 
</style>

歡迎轉載，請註明出處。

2016年7月20日星期三

Css-基本認知( 一 )_CSS?

建議 : 此篇要有一些些 Html 的基礎會比較容易懂。

CSS 在網頁的角色定位 ?

可以參考此篇 : Html、Css、JavaScript是什麼關係?

回歸正題，我們在這裡就先統稱"樣式"

CSS 最大的功用是來幫我們網頁添加色彩

有時候也可以幫我們解決客戶一些奇怪的需求

( 咳咳... )

首先，我們要在哪裡宣告 ? ( 哪裡放置我們的樣式? )
有三種方式可用( 三選一；也可三種一起宣告同名，但會受到優先權影響 )

1 . 直接在標籤內宣告，要添加 : "" 和 ; ，

<p style="font-size:12px; color:red;">大家好...</p>

2 . 在 Style 區塊宣告

</head>
<style type="text/css">
p{
   font-size:12px;
   color:red;
   font-weight:bold;
}
</style>
<body>

3 . 外部文件 : 指定檔案位置 ( .css )

<head>
    .
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

剛剛有提到，如果標籤 三種宣告方法都有設定樣式怎辦 ?
他會依照優先權 : 標籤內 > Style 區塊 > 外部文件

歡迎轉載，請註明出處。

Html-基本認知(五)_資料格式標籤簡介

前幾篇有簡單介紹過頁面的設定
接下來是如何將資料傳送到後端的前置元件

<form></form>	將在 form 內的參數送至目標服務器	method = GET、POST action = 服務端位置	<form method="post" action="main.jsp"> . . . </form>
<textarea></textarea>	文字區塊	rows : 行數 cols : 列數	<textarea rows="20" cols="20">請輸入文字</textarea>
<select><option></option></select>	下拉選單	select : 選擇器 name : 元件名稱 option : 選項 value : 向後台提出的值	<select name="selected"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select>
<input></input>	輸入元件	type : 輸入元件的型態 name : 輸入元件的名稱，用於後端辨別 value : 預設參數 placeholder : 文字框提醒文字	<input type="text" name="inputAcc" value=""></input>
		hidden : 隱藏輸入元件 image : 圖像按鈕 number : 數字控制器 password : 密碼格式 radio : 單選按鈕 range : 左右滑動扭 reset : 重置按鈕 search : 搜索文字字段 submit :提交按鈕 text 文字。預設20字元 . 因為屬性很多，請上W3c 搜尋。

2016年7月18日星期一

Html-基本認知(五)_連結標籤簡介

這篇介紹有關連結會用到的標籤
比如 : 超連結、第三方元件的連線位置、圖片...等。

標籤	功能	說明	用法
<a></a>	超連結	href : Hypertext Reference 超文本引用 title : 滑鼠移至文字後，出現的浮動提醒文字 target : 視窗 _bank = 新視窗 _parent = 當前視窗 _self = 預設	<a href="www.yahoo.com.tw" target="_blank" title="Yahoo">Yahoo</a>
<a></a>	電子郵件	mailto : 電子信箱 cc : 副本 bbc : 密件副本 subject : 主旨 body : 內容	<a href="mailto:aa@yahoo.com;bb@yahoo.com ?cc=cc@yahoo.com &bbc=dd@yahoo.com &subject=今天會議。 &body=大家對今天會議的看法。">大家對今天會議的看法。</a>
<img></img>	圖片	src : 來源 alt : 載入失敗 title : 滑鼠移動到此元件後，浮出的提醒	<img src="http://img.mukewang.com/52172.jpg" alt="" title="电影介绍">

1 ) <a></a>

2 ) <a></a>

3 ) <img></img>

4 ) <img></img>

Html-基本認知(四)_Table標籤簡介

20161112 更新 : 新增 Div + Css 範例連結

看到Table表格標籤不知不覺就想到表格( 廢話
此 Table 標籤可以參考看看
如果資料異動、UI需求不大在使用
不然建議使用 Div + Css 方法

標籤	功能	說明	用法
<table><tbody><tr><th><td>	表格	table : 表格框架 tbody : 可不加入。加入，載入完後顯示。不加，邊載邊顯示。 tr( table row ) : 列 th( table head ) : 標頭 td( table data ) : 資料 th 和 td 差異? th 會把標頭文字邊粗體	因程式碼無法對齊，所以放置於下方
<caption></caption>	表格標題	放置在 table 下方

<table>
    <caption>班級人數</caption>
    <tbody>
        <tr>
            <th>班級</th>
            <th>人數</th>
        </tr>
        <tr>
            <td>101</td>
            <td>36</td>
        </tr>
        <tr>
            <td>102</td>
            <td>39</td>
        </tr>
    </tbody>
</table>

參考資料：Div+Css Table
參考資料：HTML Table 表格

2016年7月17日星期日

Html-基本認知(三)_各式標籤簡介

看到標籤
大家一定會跟我一樣一樣搖搖頭
( 天呀 ! 怎麼這麼多，要記到什麼時候才記的完 )
好吧 ! 也有可能只有我....

但是
至少把標籤嘗試一次或是參考網頁的原始碼就更有方向的
( P.s. 以下標籤有附成果圖，請用網頁尋找功能

標籤	功能	說明	用法
<hx></hx>	標題	x : 1~6 h1 : 最重要 ; 以此類推	<h1>重要標題</h1> <h2>次之標題</h2>
<p></p>	段落	為什麼不直接輸入<br />? 段落上下行文字間距會有明顯差別	<p>這是第1-1段這是第1-2段這是第1-3段</p> <p>這是第2-1段這是第2-2段這是第2-3段</p> 這是第3-1段這是第3-2段這是第3-3段<br/> 這是第4-1段這是第4-2段這是第4-3段<br/>
<em></em>	斜體		<em>斜體字?</em>
<strong></strong>	粗體字		<strong>粗體字?</strong>
<span></span>	獨立文字效果	一行文字內，只想對某字處理	方法一 : 我是<span style=color:red>Tom</span>，請多多指教。方法二 : <style> span{ color:red; } </style> <body> ... 我是<span>Tom</span>，請多多指教。 ... </body>
<q></q>	雙引號		<q>大明星</q>
<blockquote></blockquote>	範圍內文字縮排		......... <blockquote>床前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</blockquote> ........
	空白		&nbsp  我是某某某
<hr />	水平分隔線	將標籤前後做分割	......... <hr /> .........
<address></address>	地址、郵件	跟<em>一樣會顯示斜體，但多獨立換行	聯絡地址 : <address>南投縣信義鄉111號</address>
<code></code>	簡短程式碼	為何不直接打? 因為瀏覽器有可能誤會成要執行	<code>int a = 0; a++; </code>
<pre></pre>	大量程式碼	為何不直接打? 因為瀏覽器有可能誤會成要執行
<ul><li></li></ul>	列表( 點 )	文字前會帶圓點	以下幾點 : <ul> <li>訊息</li> <li>訊息</li> </ul>
<ol><li></li></ol>	列表( 排序 )	文字前會帶數字	以下幾點 : <ol> <li>信息</li> <li>信息</li> </ol>