網頁程式設計
基礎入門教學

用CSS制作圓形圖示大頭貼照

網頁設計中,常使用到的 CSS 樣式,基本上在各大社群網站及 app 內皆可發現其蹤跡,將語法記錄在此,以便將來取用。(看本頁面讀者,必須有 HTML 基本語法及 CSS 樣式等概念唷)。

基本款

直接在 html 語法內使用

顯示結果:


單一頁面內使用 id 或是 class 方式呈現的方法

顯示結果:


進階版(一)

這種作法是比較常見,也是常被網頁所運用的方式,利用 css 定位的方式或是以背景模式去達成,讓我們來看看實際的範例及效果為何:

此方式是以背景模式做大頭貼,右下角多個數字,用以標示訊息數量,讀者亦可自己增加文字檔於語法當中,CSS 設計的樣式,其實是可以有許多種方式的。

下面代碼是第一張圖的代碼,後兩張僅須改變 img_text 這個class內的對齊位置即可,請自行變化


進階版(二)

上面的CSS樣式中,可看出由於中間的圓形圖示是以 background-image 背景圖方式顯示,有時在使用上會顯得不是很實用,下面再稍微改變一下作法,讀者可自行測試看看:(上個範例使用 class 類別作範例,這個範例我們則以 id 為例)

代碼如下:

 

CSS 小知識:同一頁面中,id 具有唯一性,同一個命名只能使用一次,class命名的類可以在一個網頁中使用無數次。
id在css代碼中是以“#”井號符號開頭命名的類
class在css代碼中是以“.”小寫句號符號命名開頭的類

以上,就是制作CSS圓圖大頭貼的常用網頁語法,當然還有更多種方式,這裡僅是提供小學生較常使用的方式,希望對讀者有所幫助。

 

讚(0)

評論 搶沙發

  • 暱稱 (必填)
  • Email (必填)
  • 網址