今夏和太平洋有約
台東、我來了 !

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

還有誰停留 ?


喧嘩 隱入了夜
靜默
新月如鉤
勾起了 前世今生的愛戀
夢很輕 諾言卻過於沉重
 朝來花開
在起霧時 靜坐聽禪
 夕往葉落
在下一個雨季來時
離開
  

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

人生歡樂有幾何？
憂愁又有幾何？
在不知不覺中，又是一年

往事慢慢地塵封
曾經漸漸地模糊
卻獨漏了自己的心
放任無奈，淹沒塵埃
我的執著承載不了所有一切你要的
只能任由寂寞纒繞著我
 
天真偷走了心，冷漠凍傷了肺，謊言把愛灌醉
 希望烘乾了眼淚，熱情滌去了憔悴。
在不知不覺中，又走過了四季長了一歲！
莫說無奈，別喊好累。
你的對手在看書，你的仇人在磨刀
你的閨蜜在減肥，隔壁老王在練腰
你還在發呆，讓你的對手有可趁之機嗎 ?
 
這些日子以來 ~
快樂已在時光的河裡溺斃
即使妳用期望的槳、使盡洪荒之力的划
幸福還是上不了岸
我用粉彩將年華畫成一幅
淡淡的風景
隱隱的心痛
連呼吸都 沉重

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

忘記沒有忘記的過去
習慣已經習慣的生活。

習慣一個人在家，
忘記時間，忘記存在，
忘記沒有忘記的過去。
習慣已經習慣的生活，
習慣一個人有種莫名的安全感，
卻又有種莫名的寂寞，
以前不習慣的但漸漸的都習慣了。
習慣一個人，因為一個人的世界，只有一個人懂。
一個人的世界或許很孤單，但是卻可以不用受傷害。 

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

Media Queries 媒體查詢
使用 Flex 模式配置版面
「RWD」彈性調適型的網頁設計
Media Queries 媒體查詢
隨著現今行動裝置的多樣化和普及，網頁的技術近年來也開始重視手機上的視覺效果。
於是出現(Responsive Web Design)簡稱RWD，響應式網頁設計的概念，又稱適應性網頁、自適應網頁設計、回應式網頁設計。
「RWD」彈性調適型的網頁設計，大部份就是指 CSS Media Queries 這個技術的應用。 「媒體查詢」是完成「響應式設計」最強大的工具，透過CSS，可以使得網站透過不同大小的螢幕視窗來改變網頁排版的方式，使得各種裝置的使用者，如電腦、平板、手機、電視都能夠呈現得更完美，由於是由同一份網頁內容轉變，以後要修改比較輕易。
在製作 Responsive Web Design 的網站時，大致上會區分為三個不同的 CSS 版型：
智慧型手機尺寸( 320 X 480 )
平板電腦尺寸( 401 X 641 ~ 768 X 1024 )
一般電腦螢幕尺寸( 768 X 1024 以上 )
你還可以使用 meta viewport 讓你的版面配置在行動裝置的瀏覽器上呈現得更完美。
viewport tag 的定義只對mobile device有用，用來控制 mobile device 顯示網頁內容時的一些設定。
<meta name=”viewport” content="width=device-width"> 設定說明與預設值 @viewport { width: device-width; }
使用 Flexbox + Media Queries 配置簡單的版面
新的 flexbox 技術重新定義了使用 CSS 版面配置的方法。
這裡只是一些讓你瞭解概念的例子而已：

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

 要如何讓痞客邦的影音檔，能連續播放？
假如你使用他人的 YouTube ~ 影片、歌曲，有可能在不知哪一年的哪一天會被移除?
喏、使用隨意窩，又會如何? 隨意窩的影片會加入廣告，假如你不是隨意窩的VIP會員，圖片、音訊檔、影音檔，會有流量限制，(XD...
那 ~ 改用痞客邦的影音檔又會有啥麼鳥事 呢?
接下來只告訴你如何做，不做詳細的解說~
貼成背景音樂，在 Script的前面，寫下一個註解標籤Tag <!-- -->， 醬就可以呼嚨過後台編輯器，程式碼不會被P客邦吃掉。

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

CSS 佈局模式

CSS 佈局模式
話說很久很久以前，有多久? 我已經忘記了，網頁開發者、 都習慣使用頁框 frame 和表格 table 來分割版面，之後常見有5種佈局模式。

block

inline

table

float

positioned

現在 CSS 3 又有了兩種新的佈局方式 Flexbox 和 Grid， 可用來取代 float 和 table mode
彈性盒子 Flexbox 會根據單一的行或列分配空間, 類似 float 調配控制元素的位置尺寸概念, 但更靈活好用!
格線 Grid 將佈局區分成 rows 和 columns, 有點類似 table 但比其更具有彈性。

關於 float 屬性
本質上 float 並不是用來協助我們佈局的, 它只是一個舊有的對齊屬性，跟表格(table)和圖像(img)的 Align屬性一樣，可用來實現文繞圖
<div id="block" height="100px"> <span style="float:left;">
浮貼左邊對齊
22222
</span>

表格	ALIGN="left"
	000	表格的左、右邊對齊 非浮動對齊 Float 效果卻和浮貼一樣 會紅杏出牆

<img style="float:right;">
由此範例可看出 ~ 這個浮動對齊的圖片，吃不飽時就劈腿， 溢出到了容器外面！ </div>

在使用 float 的時候經常會遇到一個奇怪且糟糕的事： 當被設定為浮動元素，其高度比包含它的父層容器還高時，就會劈腿出軌， 有個賤招 clearfix 密技（hack）可以解決這個問題，就是在父元素 #block 加入 overflow: auto; 或 overflow:hidden; 屬性。
#block {
overflow: auto;
}

加了 overflow 屬性之後，浮動元素(圖像)就不會再翻牆了。
這個清除浮動的賤招，有數個問題要注意:
#block 父元素的高度不可以是固定的高度，還有 position 絕對定位元素和浮動元素重疊，會出現捲軸滑軌，還有鄰居的外邊距對它無效， 要保持距離，要由浮動元素來決定。

另一個清除浮動定位 clear 屬性
當我們使用 float 元素排版時，由於區塊是浮動的，所以若下一個區塊未使用 float 屬性的話，可能在排版上會往上跑，造成跑版的現象，而使用 clear 可以適當地解決這個問題。
比較一下、以下的例子

-- CSS--
.theDiv{
width:400px;
border:1px solid black;
}
.nav{
background:rgba(220, 220, 100, 0.3);
border:1px solid blue;
width:100px;
float:left;
}
.par1{
background:rgba(100, 210, 220, 0.3);
border:1px solid red;
margin-left: 20px;
}
.par2{
background:rgba(250, 200, 200, 0.3);
border:1px solid orange;
margin-left: 20px;
width:150px;
}

• 項目一


• 項目二


• 項目三

段落 一 ❤️❤️❤️ ❤️❤️❤

段落 二 ♠️♠♠️ ♠♠️♠

在清單元素<ul class="nav">上套用了Float屬性，元素會浮動到左邊， 可是並不會將空間完全釋放出來，段落 二設定了寬度 width:150px，因此內容被擠到下面

--- HTML ---
<div class="theDiv">
<ul class="nav">
<li>項目一</li>
<li>項目二</li>
<li>項目三</li>
</ul>
<p class="par1">段落 一 ❤️❤️❤️ ❤️❤️❤</p>
<p class="par2">段落 二 ♠️♠♠️ ♠♠️♠ </p>
</div>

• 項目一


• 項目二


• 項目三

段落 一 ❤️❤️❤️ ❤️❤️❤

段落 二 ♠️♠♠️ ♠♠️♠

段落 二 不設定寬度，就變這樣子

若在 "段落 二" 加上clear屬性，clear:both 或 clear:left， 就可以擺脫 Float 浮動元素的糾纏，自成一行

• 項目一


• 項目二


• 項目三

段落 一 ❤️❤️❤️ ❤️❤️❤

段落 二 ♠️♠♠️ ♠♠️♠

使用 float 配置版面

使用 float 來實現頁面的版面配置是很常見的。
下面是一個將側欄 Aside 設定為靠右浮動的典型例子 ~

 HTML 

<div>
<header><img ....> </header>
<aside> Aside </aside>
<article class="art"> article-1 .... </article>
<article class="art"> article-2 .... </article>
<footer> Footer </footer>
</div>

Aside

• 項目一


• 項目二


• 項目三

article-1
一定要找機會去一個完全沒有人認識你、在乎你、要求你的地方。沒有人認識你，是你開始認識你自己的最佳時候；沒有人在乎你，是你開始照看自己的最好機會；沒有人要求你，你才擁有空間審視自己的真實需求。

article-2
提筆思念，落筆無言。爐中的香，讓它消散吧，桌上的茶，隨它漸涼。知道你還在張望，就足夠溫暖。

Footer

aside {
float: right;
width:200px;
}
.art {
margin-right:200px;
}
footer {
clear:both;
}

靠右浮動側欄 Aside 的寬度為200px，為了不要和側欄疊在一起， article 設定預留了 200px 的外間距空間。
當浮動側欄 Aside 的高度，比 article 這些「固定」的內容還要高時就會紅杏出牆，為了防止劈腿出軌，footer 加上清除浮動定位屬性 clear:both;。

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

Box Model（區塊模型）

關於 CSS 盒子模型

CSS盒子模型本質上是一個包裝每個HTML元素的框。 它包括：邊距，邊框，內距和實際內容。
內容 - 顯示文本和圖像的框、內容
內距 - 清除內容周圍的區域。 內距是透明的
邊框 - 圍繞內距和內容的邊框
邊距 - 圍繞邊框周圍的區域。 邊距是透明的
當你設定了元素的長度和寬度後，實際顯示的元素卻比你設定的還大：Why ? 因為元素的框線（border）和內距（padding）是外加上去的，會撐開元素。
看下面的例子，我們設定了兩個都擁有相同寬度和高度的樣式，但最後元素顯示的實際大小卻不太一樣。

.Box1 {
width: 500px;
height: 150px;
margin: 20px auto;
background:#ffe;
}
.Box2 {
width: 500px;
height: 150px;
margin: 20px auto;
padding: 30px;
border:solid #33ccff 20px;
}

Box1
寬度 500px，高度 150px

Box2 + 框線（20px）+ 內距 (30px)
寬度 = 600px，高度 = 250px

每次排版佈置要設定每一個盒子區塊元素的寬高時，都要做計算加加減減，是不是很麻煩? 謝天謝地，現在 CSS 出現一個新的屬性.box-sizing，你不需要再這麼做了， 當元素設定成 box-sizing: border-box;之後， 框線和內距將變成內含，自此你只要設定好物件的邊界寬高，不用再考慮框線和內距。

限制最大和最小值

max-width屬性 ，min-width屬性
max-height屬性 ，min-height屬性
限制最大值、可以防止元素、圖片(img) 溢出版面，在我的格子裡的留言輸入方塊裡， 就使用了最大值和最小值約制寬度，最小值約制高度，你可以拉拉左下角，看它的伸縮 狀況如何，再去看看你的或別人的有何差異 ?

Reset CSS – 重置歸零

使用 CSS 最令人頭痛的部份就是各家瀏覽器的預設值差異性太多了，在排版的時候就得依每個瀏覽器的不同，而多花好多時間來調整改寫 CSS 語法。只要在我們寫的 CSS 前掛上這一段「Reset CSS」的語法，就可以輕鬆解決大部份瀏覽器的差異了。

*{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

 
輕鬆一下 ~


 

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

置中對齊 篇

垂直 置中對齊 Vertical Align
使用 CSS 語法要設定一個 div 水平置中，是很常見到的需求，而水平置中很好處理，不外乎就是設定margin:0 auto;或是text-align:center;,就可以輕鬆解決掉水平置中的問題。
但一直以來最麻煩對齊問題，都是「垂直置中」這個討人厭的設定， 「垂直置中」的方法、起碼有10種以上，騎牛也有20種，不用學太多，夠用就好。
以下將介紹幾種 CSS 垂直置中的方式
設定 absolute + margin負值的技巧
範例物件一塊高、200px，寬、300px 的 div元素， 將屬性設定成 position: absolute; 絕對位置
<div id="block"> 高、200px，寬、300px </div>
設定 #block 的座標位置 right 和 top 各50%，這樣 DIV物件的右上角，剛剛好就會是畫面的正中央位置， 接著再將要置中物件的 marign-top、margin-right 各設定為自身負一半的高度，把 div 位移至垂直及水平置中，網頁的正中央
#block {
height: 200px;
width: 300px;
background-color: black;
position: absolute; /*絕對位置*/
top: 50%; /*從上面開始算，下推 50% (一半) 的位置*/
right: 50%; /*從右邊開始算，左推 50% (一半) 的位置*/
margin-top: -100px; /*高度的一半*/
margin-right: -150px; /*寬度的一半*/
}

設定 absolute + translate 的技巧
絕對定位置中的另一個移位方式，此方式置中的定位物件不需要固定的寬跟高。
利用 transform:translate(50%, 50%) 位移置中物件自身寬與高的 50% 就能達成置中的目的了。

#block {
width: 300px;
background-color: black;
position: absolute;
bottom: 50%;
right: 50%;
transform: translate(50%, 50%);
}

設定 absolute + margin auto 的技巧

這個方式比較特別一點，當物件設定絕對定位之後，預設它是抓不到整體可運用空間的範圍，所以 margin: auto 此時會失效，但當你設定了 top: 0; bottom: 0 時，絕對定位物件就抓到可運用的空間了，這時你的 margin: auto 就生效了，如果你的絕對定位物件需要水平置中於父層，那你同樣可以設定 left: 0; right: 0; 來讓絕對定位物件取得空間可運用範圍，再讓 margin-left 與 margin-right 設定為 auto 即可置中。

#block {
height: 200px;
width: 300px;
background-color: black;
position: absolute; /*絕對位置*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto; /*方框外距離平均分配*/
}

設定 absolute + %百分比 的技巧

利用 %百分比平均分配邊距，以達成置中。

#block {
background-color: black;
position: absolute;
width:60%; left:20%; /* (100-60)/2 */
height:80%; top:10%; /* (100-80)/2 */
}
#block {
background-color: black;
position: absolute;
top: 20%;
right: 20%;
bottom: 20%;
left: 20%;
}

以下要介紹的定位方法，不再是作用在#block 區塊 DIV 物件本身， 而是包含在#block 區塊內的元素(內容物件)
HTML

<div id="block"> ❤️❤️❤️ ❤️❤️❤ </div>

設定行高 Line-height 的技巧

適用：單行文字垂直置中
若將行內元素 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中
注意 :是行內元素垂直置中，不是垂直對齊哦!

#block {
line-height:200px; /*垂直置中*/
}
#block {
line-height:200px;
text-align:center; /*水平置中*/
}

❤垂直置中️❤

❤垂直置中️ + 水平置中❤

設定行高 Line-height + inline-block 的技巧

適用：多行文字垂直置中

HTML

<div id="block">
<p id="inline"> 1.❤️❤️❤️ ❤️❤️❤ <br> 2.多行文字置中 <br> 3.🦁🦁🦁🦁🦁 </p>
</div>

設定行高 ( line-height ) 只會使單行文字被垂直置中， 倘若要讓多行文字被垂直置中，可以嗎? 答案是 ~ 要把內層的多行物件，包裹成一個行列區塊 inline-block

#block {
text-align:center; /*水平置中*/
line-height:200px; /*垂直置中*/
}
#inline {
display: inline-block;
line-height:1.2;
width: 200px;
background: #99aa99;
vertical-align: middle;
}

 

1.❤️❤️❤ ️❤️❤️❤
2.多行文字置中
3.🦁🦁🦁🦁🦁

設定Display: table-cell 的技巧

使用 display 屬性將 div 設定成表格的儲存格(td)，這樣就能利用支援儲存格垂直對齊的 vertical-align: middle 屬性來將資料垂直置中了。

#block {
width: 500px;
height: 250px;
text-align: center;
display: table-cell;
vertical-align: middle;
}

設定Flex + margin 的技巧

在父層物件 #block 設定 display: Flex，接著在需要垂直置中(#inline)的物件上設定 margin: auto 即可自動置中囉。

#block {
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: Flex;
}
#inline {
width: 400px;
background: #ccc;
margin:auto;
}

設定Grid + margin 的技巧

這個設定是否感覺和上一個一樣 ? 只差display: Grid，其實格線Grid和Flex盒子， 有些屬性，是一樣的，都可以做到垂直置中，其他的 Grid和Flexbox 屬性以後再討論。

#block {
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
display: Grid;
}
#inline {
width: 400px;
background: #ccc;
margin:auto;
}

使用 calc 的技巧

利用 calc() 這個「計算」函數，將百分比即時且動態的計算出實際要的置中高度位置。

#block {
width: 500px;
height: 250px;
border: 1px solid #f00;
margin: auto;
}
#inline {
width: 400px;
height: 100px;
position: relative;
top:calc((100% - 100px) / 2);
background: #ccc;
margin:auto;
}

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

練完基本功之後 ..
再來玩痞客邦的版面配置

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()

清涼如水的月光下、誰在獨白
且將 滿廂愁緒於落花下深埋
清涼如水的月光下、誰在獨白
且將 滿廂愁緒於落花下深埋
 
邀月共飲
 這一杯
我敬你
漫不經心
闖入
我的生命
又
不動聲色地
擾動
我的生活
再
漫無目的
從我的視線裡消失
來
乾了這杯
我們
 不提心事

(繼續閱讀...)

灰 鴿 發表在 痞客邦 留言(0) 人氣()