鳴黎的筆記

2016年8月5日星期五

Css-基本認知( 四 )_佈局方法

我們在上一篇有介紹 : 基本樣式

接下來要如何去佈局您的畫面
通常我們比較常拿 Div ( 塊狀模型 ) 來做區塊
然後再去排 Div 的位置與大小
如下圖 :

什麼是 Div ( 塊狀模型 ) ?
通常我們用來做不同的區塊特性
通常 Div 預設是直接佔用一整行

在網頁中，我們有幾種佈局的方法 ;

流動模型 ( Flow )
浮動模型 ( Float )
層次模型 ( Layout )

浮動模型

剛剛有提到 Div 是直接佔用一整行

那如果我們要呈現像上方的圖( 樣式 )就可以用浮動模型 ( Float )

( * 如果有兩個以上的塊狀，要被調整的前一個塊狀要設定 )
例如上圖 : Div_2 要靠 Div_1 右邊，所以要對 Div_1 設置

用法	說明	備註
float:left;	調整 Div 區塊對應位置	left ( 靠左 )、right ( 靠右 )

層次模型

模型層	用法	說明
絕對位置	position:absolute;	模塊移動到對應的座標位置
相對位置	position:relative;	模塊移動到對應的座標位置但實際是占用到原本的空間
固定位置	position:fixed;	模塊移動到對應的座標位置但不隨網頁的滾動產生移動

<!DOCTYPE html>
<html>
<style>
#box1{
    width:150px;
    height:150px;
    border:2px red solid;
    position:absolute; // 可更改參數看這三種的差異
    left:50px;
    top:50px;
}
</style>
<body>
    <div id="box1"></div>
    <div>Hello world !!!</div> 
</body>
</html>

歡迎轉載，請註明出處。

2016年8月4日星期四

Css-基本認知( 三 )_基本樣式

前幾篇我們有介紹甚麼是 Css 、宣告樣式

這一篇最主要是最常用到的樣式
比如說是 : 文字、粗細、顏色...等。

List :

文字
邊框
填充 ( Padding )
邊界 ( Margin )
填充和邊界的差異 ?

1 . 常用於文字系列

用法	說明	備註
font-family:"Microsoft Yahei";	文字字體
font-size:"12px";	文字大小
color:"#555";	文字顏色
font-weight:bold;	粗體字
font-style:italic;	斜體字
text-decoration:underline;	底線
text-decoration:line-through;	刪除線
text-indent:2em;	字句空兩字
line-height:2em;	上下行間距
letter-spacing:20px;	文字間距
text-align:center;	對齊方式	felt、right、center 模塊也適用

2 . 邊框系列

用法	說明	備註
border-width:3px;	線寬
border-style:solid;	邊框形狀	dashed( 虛線 )、 dotted( 點線 ) solid( 實線 )
border-color:yellow;	邊框顏色

一般邊框

div{
    border : 3px solid yellow;
}
等於
div{
    border-width:3px;
    border-style:solid;
    border-color:yellow;
}

特殊邊框

border-top:1px solid red; // 上方
border-right:1px solid red; // 置右
border-left:1px solid red; // 置左

3 . 填充

上右下左
div{padding:10px;}

上下 、 左右
div{padding:10px 20px;}

上右下左( 順時針 )
div{padding:20px 10px 15px 30px;}
等於
div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

4 . 邊界

上右下左
div{margin:10px;}

上下 、 左右
div{margin:10px 20px;}

上右下左( 順時針 )
div{margin:20px 10px 15px 30px;}
等於
div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

5 . 填充和邊界的差異

padding 和 margin 最大的差別是 :
padding : 在邊框內。
margin : 在邊框外。

歡迎轉載，請註明出處。

2016年7月29日星期五

Android-NavigationDrawer

參考資料 : Fragment Navigation Drawer

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>

剛剛有提到，如果標籤 <p></p> 三種宣告方法都有設定樣式怎辦 ?
他會依照優先權 : 標籤內 > 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>

訂閱：文章 (Atom)

2016年8月5日 星期五