鳴黎的筆記

2016年9月27日星期二

Android-AndroidStudio 2.2 新增功能( 連結彙整 )

終於到的 AndroidStudio 2.2 正式版本的發佈
更新重點 :
1 . 新版 Layout 版面設計
2 . 編譯速度加快( 這很有感 !!! )
3 . 測試個案錄製
其實還有一些還沒寫出來
以下連結可以參考

參考資料 : Android Studio 2.2 来啦
參考資料 : 新版Android Studio 2.2的新功能真佛心

2016年9月25日星期日

Website-使用 WordPress 自己架專屬的網站_簡易架設

上一篇 : 使用 WordPress 自己架專屬的網站_功能簡介

那我們這篇就來做簡易的流程教學

歡迎轉載，請註明出處。

Website-使用 WordPress 自己架專屬的網站_功能簡介

上一篇 : 使用 WordPress 自己架專屬的網站_註冊

歡迎轉載，請註明出處。

2016年9月19日星期一

Website-使用 WordPress 自己架專屬的網站_註冊

您是否有跟我一樣

有想要架設自己的網站
但不知道該如何下手 ?

我有想法但是版面不會設計

我想 WordPress 會是您最好的選擇

但是 !!!
你要知道你做這網站的目的 !
你要知道你做這網站的目的 !
你要知道你做這網站的目的 !

首先依照步驟來註冊帳號吧

此選項會影響提供版面的風格( 後續還是可更改 )

可以掛載 WordPress 底下
或者自行提供 ( 需升級，如下圖 )

註冊成功

控制台

參考資料 : 從零到有教你架出一個網站：架網站真的很簡單！

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年9月27日 星期二

2016年9月25日 星期日

2016年9月19日 星期一

2016年8月5日 星期五

浮動模型

層次模型

2016年8月4日 星期四

1 . 常用於文字系列

2 . 邊框系列

3 . 填充

4 . 邊界

5 . 填充和邊界的差異

2016年7月29日 星期五

2016年9月27日星期二

2016年9月25日星期日

2016年9月19日星期一

2016年8月5日星期五

2016年8月4日星期四

2016年7月29日星期五