文章專區

網頁設計相關文章

 CSS的text-transform屬性可用來控制文字字母的大小寫,僅適用於英文字母, 不管你原本寫的文字是大寫還是小寫,皆可透過text-transform做設定, 可設定為全部大寫、全部小寫或只有第一個字母大寫。   設定值如下: text-transform:uppercase 所有字母皆為大寫 text-transform:lowercase 所有字母皆為小寫 text-transform:capitalize 第一個字母大寫,其他字母小寫   範例: See the Pen YJrVgb by Ya (@bok770) on CodePen.
CSS的word-spacing屬性可以用來控制網頁上英文單字之間的間距,由於英文字是以半形空白做為區隔,而此屬性便是控制此空白的間距, 全形空白則不受其影響,word-spacing可以為負值,如word-spacing: -5px   乍看之下跟letter-spacing屬性有些相似,但是word-spacing控制的是單字之間的距離,而letter-spacing則是控制單一字母間的距離。 範例:  See the Pen NORQrg by Ya (@bok770) on CodePen. 以上範例的句子:「e-work design」,如使用letter-spacing屬性,控制到的會是「e、-、w、o」……等等的單一文字之間的距離。 而若是使用word-spacing屬性的話,控制到的是「e-work」、「design」這兩個單字間的距離。   而word-spacing的另一項特性,句子若是中文字的話,如果中間有空格,也會將空格視為單字之間的分隔, 例如「一化網頁設計」會被視為一個單字,而「一化 網頁設計」則會被視為兩個。 範例: See the Pen Zqpgrm by Ya (@bok770) on CodePen.
 CSS的first-letter 屬性,可以用來控制文字段落的第一個字母,透過此屬性,我們可以對首字母的樣式做一些美化,而要注意的是,由於first-letter是偽元素,所以在寫CSS時必須用:first-letter。   範例:     利用此屬性,可以一次設定多個區塊文字的開頭 範例:
之前我們介紹了CSS的word-wrap,此屬性可以讓過長文字直接換至下一行,使得文字不會超出div區塊的範圍。 而CSS還有另一個相似的屬性為word-break,功能也是讓文字換行,那麼此兩項屬性有什麼差別呢?就讓我們來看以下範例吧。 延續上次的範例介紹的word-wrap,可以讓過長文字換行如下: 原本過長會直接超出範圍    使用word-wrap:break-word,可以使過長的design單字直接換行 但是可以發現的是,由於整行design文字換行的關係,使得「e-work」這段文字右邊留下很大一片空白,除了顯得有些浪費空間以外,看起來也較不整齊,視覺上就沒那麼美觀了。 因此,為了解決此一問題,我們可以使用CSS的word-break屬性。 設定值有: normal:瀏覽器的預設規則 break-all:可以在單字的字母之間換行,不一定要完整單字才能換行。 keep-all:不可以在單字的字母之間換行,必須保留完整單字,比如說遇到半形的空格才可換行。 範例: 可以發現,e-work右邊的空間被填滿了!但缺點是,若是一個完整的單字被強制斷行,可能會失去該單字的易讀性,使得閱覽者不清楚此單字或是誤以為是兩個分開的單字,所以在使用上須斟酌一下。
 CSS的word-wrap功能為讓過長的單字能夠切換到下一行,大多的瀏覽器預設上,為了保持較長文字的完整性,並不會拆掉文字,而是直接跳至下一行,或是直接讓單字超出div的範圍,如果要避免以上這兩種情況,可以使用word-wrap屬性。   若不加word-wrap的時候,在瀏覽器默認下,若有一個單字很長,導致一行剩下的空間都容納不下它時,則會把這個單字挪到下一行。 所以如下圖所示,e-work後面會留下一片空白,而容納不下剩餘空間的design會直接移到下一行。   以上範例的文字整體長度還是在div區塊的範圍之內,但是如果這個單字本身長度比div還要長的時候呢?由下圖我們可以發現,如此便會直接超出div區塊的範圍。   而為了讓以上情況的單字可以不超出範圍,我們可以用word-wrap: break-word讓過長文字直接拆至下一行。   以上便是css word-wrap的功能介紹,此屬性在所有瀏覽器皆有支援。  
html的< dl > < dt >< dd >是在網頁設計上的一種內文排版技巧,通常被稱為定義清單,可以呈現出縮排的效果,撰寫規則為< dd >< /dd >< dt >和< dt >< /dt >皆是寫在< dl >< / dl >裡面,< dt>通常表示項目的標題,而< dd >則為項目的敘述。 範例: See the Pen QVqpra by Ya (@bok770) on CodePen.
 在網頁設計上icon的使用是不可或缺的,一般是切成圖片,然而若是以文字形式呈現的話,不僅縮放都不會失真,還可以任意更換顏色,比svg檔更便利!而有個網站便是專門將svg轉換成文字檔, IcoMoon :https://icomoon.io/app/#/select 不僅提供許多的現成圖示可以使用,還可以將自己繪製的icon放進來做轉換。   可以直接選擇想要使用的icon,選取到的會框起來   也可以直接將自己繪製的圖示放進來,點選左上方的「import Icons」,即可匯入   點選最右下角的「generate Font」轉成文字檔   將下載的檔案解壓縮後,只要將style.css和 fonts的資料夾放進自己寫的專案裡即可   點開demo.html會顯示你所下載的每個圖示的class名稱,實際套用時只要加進class裡即可   比如要套用上圖的icon-file-text的圖示,便可將 icon-file-text的class放進來,若要修改樣式可以新增class,如下圖的icon01、icon02、icon03,便是修改圖示的大小和顏色,因為是文字所以需用 font-size
在網頁排版上,要讓div垂直置中是經常遇到的問題,這裡介紹幾個常見的解決方式。 1.line-height 這是初學者一開始會學到的方法,雖然相當簡單,但僅適用於單行文字排版,兩行以上的話行距會變大。 範例: See the Pen wEwqWb by Ya (@bok770) on CodePen.   2.偽元素(before,after)+ display:inline-block 此方法可適用於單行或多行文字,以及區塊置中 缺點是需多寫一行css(偽元素) 範例: See the Pen dqbzpe by Ya (@bok770) on CodePen.   3.display:table+table-cell 在最外層寫一個偽table,也就是display:table,然後在要垂直置中的區塊,加上display:table-cell以及vertical-align: middle 範例: See the Pen bxbrgX by Ya (@bok770) on CodePen.   4.Flexbox 最方便彈性的方法,可以讓區塊內容自適應外面的容器,只要在最外層寫上 display:flex、align-items:center;(垂直置中) 、justify-content:center;(水平置中)即可 關於Flexbox的排版詳細可見CSS3的flexbox版面配置-flex container(容器)可用的屬性 範例: See the Pen OoLjmY by Ya (@bok770) on CodePen.  
 placeholder為input輸入框的預設文字,默認樣式為灰色字,但可以透過css來美化, 不過若只寫以下的css會發現沒有作用 input[placeholder], [placeholder], *[placeholder] {    color:blue; } 必須針對不同的瀏覽器做不同的設定。一些基本的樣式都可以套用在placeholder上,例如:字型、顏色、大小等等。 Webkit瀏覽器(如:chrome、Safari等等) ::-webkit-input-placeholder Firefox 4-18瀏覽器 :-moz-placeholder Firefox 19+瀏覽器 ::-moz-placeholder IE10瀏覽器 要注意的是IE9以下不支援   範例: See the Pen KBRqvN by Ya (@bok770) on CodePen.  
  (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = 'https://connect.facebook.net/zh_TW/sdk.js#xfbml=1&version=v3.1'; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk'));  在網頁設計上,可能需要將Facebook粉絲專頁的貼文內嵌至網頁內,而Facebook官方本身就有提供這方面的嵌入設定,就算對網頁不熟悉也可以輕鬆操作。 Facebook 嵌入粉絲團的設定頁:https://developers.facebook.com/docs/plugins/page-plugin 在頁面上可以看到許多的設定項目,而且可以隨時預覽呈現的方式。   首先貼上粉絲專頁的網址,寬度與高度的單位為像素,只要填入數字即可,下方的勾選項目可依據自身需求勾選。 確定好沒問題之後點選「取得原始碼」,會跳出兩種原始碼,分別為JavaScript SDK和iframe   其中iframe頁籤較為單純直接,只要複製貼上於網頁中要顯示的位置即可。缺點是必須設定寬度和高度,無法自動適應寬度變化,不支援RWD    而JavaScript SDK插入方式有兩段原始碼,第一段需插在<body>之後,第二段原始碼之前。而第二段則是跟iframe一樣,插入在要實際顯示的位置。 一般較推薦使用JavaScript SDK,只要設定時不指定寬度,且勾選「搭配外掛程式容器寬度」,插入的粉絲專頁即可在180~500pixel的範圍內自動縮放。 範例:   一化網頁設計