此版本的目標畫面成果是：
＊金色名字。
＊金色社交按鈕圖示，點擊按鈕另開對應的網頁或著顯示comming soon。
＊名字和按鈕在網頁中央，如果網頁寬度不夠會換行，夠就不換行。

<div class="draft-block draft--p left">此版本的目標畫面成果是：</div>
<div class="draft--imgFloat draft-block"><div><div style="height:1372px" class="image-block-prerender" data-src="https://images.vocus.cc/7b0f8ef9-c357-4356-98f6-4bf07c99fe0d.jpg" data-width="1372" data-height="1346" data-position="float"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left"></div>
<ul>
  <li class="draft-block draft--li">金色名字。</li>
  <li class="draft-block draft--li">金色社交按鈕圖示，點擊按鈕另開對應的網頁或著顯示comming soon。</li>
  <li class="draft-block draft--li">名字和按鈕在網頁中央，如果網頁寬度不夠會換行，夠就不換行。</li>
</ul>
<div class="draft--imgNormal draft-block"><div><div style="height:1920px" class="image-block-prerender" data-src="https://images.vocus.cc/b728e7bc-862f-499c-8d7e-dd10410651c9.jpg" data-width="1920" data-height="1277" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft--imgNormal draft-block"><div><div style="height:1920px" class="image-block-prerender" data-src="https://images.vocus.cc/cf00733d-0cb9-42d4-a2ec-ea6295dcda8c.jpg" data-width="1920" data-height="1490" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">先打開index.html來研究一下。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:740px" class="image-block-prerender" data-src="https://images.vocus.cc/baadd0dd-2298-4b65-9db5-5a6f42a51576.jpg" data-width="740" data-height="520" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">看起來，index.html裡面只會放基本的html內容，主要的元件還是另外用Kotlin寫，Kotlin的部分會轉換成script標籤裡嵌入的js檔案。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:862px" class="image-block-prerender" data-src="https://images.vocus.cc/2011e22d-4f60-4de1-84f7-669521acd8c6.jpg" data-width="862" data-height="556" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">現在在body標籤加上背景色屬性bgcolor，常見的顏色都可以直接打英文字彙，特殊顏色才需要使用色碼#000000。網路上可以查到很多對照的色碼表，就不多介紹了。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1736px" class="image-block-prerender" data-src="https://images.vocus.cc/e990d125-0fe2-4496-85a8-800d598271e8.jpg" data-width="1736" data-height="638" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">link標籤裡則放上引用的css路徑，這個css有很多支援的網站圖示，非常方便。我是從w3schools網站找到的，他們也提供直接在他們網站測試css的功能。</div>
<div class="embed-block-prerender" data-type="vocus" data-url="https://www.w3schools.com/howto/howto_css_social_media_buttons.asp"></div>
<div class="draft-block draft--p left">接下來打開main.kt檔案，目標是讓名字和社交按鈕會隨著視窗大小維持水平和垂直置中。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:740px" class="image-block-prerender" data-src="https://images.vocus.cc/976e07f9-12e2-41ea-9332-ec83c1d1d949.jpg" data-width="740" data-height="474" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">先把名字和按鈕放在同個div區塊，然後在外層的div元件裡加上width和height是100%視窗大小的設定。vw：view width，vh：view height。</div>
<div class="draft-block draft--p left">再加上display, alignItems, justifyContent, flexWrap等屬性使其置中。</div>
<div class="draft-block draft--p left">這些設計Html網頁風格的CSS（Cascading Style Sheets）都是加在attrs的style裡，如果要重複使用就和程式碼函式一樣可以獨立放在class裡。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1214px" class="image-block-prerender" data-src="https://images.vocus.cc/4a548195-4701-488a-abd3-94bc43b700bf.jpg" data-width="1214" data-height="1112" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">為了可讀性和好維護性，我把名字元件和社交按鈕各自拉出來。對了，元件方法都要註明Composable的annotations。</div>
<div class="draft-block draft--p left">名字的部分加上顏色屬性color金色，因為社交按鈕的寬度和名字寬度不會相同，所以文字這邊還要額外設定textAlign。因為希望不要和按鈕貼太近，所以加上padding，px是像素單位。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:902px" class="image-block-prerender" data-src="https://images.vocus.cc/f65b1b7c-64a4-4b27-82ec-e02ff5880270.jpg" data-width="902" data-height="542" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">再來是社交按鈕區域，把功能拉出來單獨寫成functions，方便重複利用。</div>
<div class="draft-block draft--p left">fontSize平常是用在設定字型大小，而在這裡則是用來設定社交按鈕的圖示大小。</div>
<div class="draft-block draft--p left">設定padding讓按鈕圖示增加元件反應面積。</div>
<div class="draft-block draft--p left">SocialIconLink方法則是傳入class相關的name和點擊的連結href，想要新開網頁所以target是blank，按鈕圖示也和文字一樣是金色。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1108px" class="image-block-prerender" data-src="https://images.vocus.cc/f05a7048-020b-49f7-a737-a51ff8b5a98c.jpg" data-width="1108" data-height="978" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">然後就可以放進去要加的按鈕了。</div>
<div class="draft--imgNormal draft-block"><div><div style="height:1776px" class="image-block-prerender" data-src="https://images.vocus.cc/8f88552a-cf30-45db-a946-bd9b7e74ff92.jpg" data-width="1776" data-height="670" data-position="center"></div><figcaption class="imageCaption draft-block" style="cursor:text;display:block"></figcaption></div></div>
<div class="draft-block draft--p left">完整的程式碼在這裡：</div>
<div class="embed-block-prerender" data-type="vocus" data-url="https://github.com/kateLee/personal_website/tree/1.3.0"></div>
<div class="draft-block draft--p left">下一階段的目標是加上頭像和活動表。</div>
<figure><a href="https://github.com/kateLee/personal_website/tree/1.3.0"><em>m that action t this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.</em></a><br>
<a href="https://github.com/kateLee/personal_website/tree/1.3.0"><em>GitHub</em></a></figure>

職場產業

金色社交按鈕圖示，點擊按鈕另開對應的網頁或著顯示comming soon。

名字和按鈕在網頁中央，如果網頁寬度不夠會換行，夠就不換行。

看起來，index.html裡面只會放基本的html內容，主要的元件還是另外用Kotlin寫，Kotlin的部分會轉換成script標籤裡嵌入的js檔案。

現在在body標籤加上背景色屬性bgcolor，常見的顏色都可以直接打英文字彙，特殊顏色才需要使用色碼#000000。網路上可以查到很多對照的色碼表，就不多介紹了。

link標籤裡則放上引用的css路徑，這個css有很多支援的網站圖示，非常方便。我是從w3schools網站找到的，他們也提供直接在他們網站測試css的功能。

Style all font awesome icons */.fa { padding: 20px; font-size: 30px; width: 50px; text-align: center; text-decoration: none;} /* Add a hover effect if you want */.fa:hover { opacity: 0.7;} /* Set a specific color for each brand */ /* Facebook */.fa-facebook { background: #3B5998; color: white;} /* Twitter */.fa-twitter { background: #55ACEE; color: white;}

How To Create Social Media Buttons

接下來打開main.kt檔案，目標是讓名字和社交按鈕會隨著視窗大小維持水平和垂直置中。

先把名字和按鈕放在同個div區塊，然後在外層的div元件裡加上width和height是100%視窗大小的設定。vw：view width，vh：view height。

再加上display, alignItems, justifyContent, flexWrap等屬性使其置中。

這些設計Html網頁風格的CSS（Cascading Style Sheets）都是加在attrs的style裡，如果要重複使用就和程式碼函式一樣可以獨立放在class裡。

為了可讀性和好維護性，我把名字元件和社交按鈕各自拉出來。對了，元件方法都要註明Composable的annotations。

名字的部分加上顏色屬性color金色，因為社交按鈕的寬度和名字寬度不會相同，所以文字這邊還要額外設定textAlign。因為希望不要和按鈕貼太近，所以加上padding，px是像素單位。

再來是社交按鈕區域，把功能拉出來單獨寫成functions，方便重複利用。

fontSize平常是用在設定字型大小，而在這裡則是用來設定社交按鈕的圖示大小。

設定padding讓按鈕圖示增加元件反應面積。

SocialIconLink方法則是傳入class相關的name和點擊的連結href，想要新開網頁所以target是blank，按鈕圖示也和文字一樣是金色。

然後就可以放進去要加的按鈕了。

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.

GitHub - kateLee/personal_website at 1.3.0

下一階段的目標是加上頭像和活動表。

kateLee - GitHub - kateLee/personal_website at 1.3.0

m that action t this time. You signed in with another tab or window. You signed out in another tab or window. Reload to refresh your session. Reload to refresh your session.
GitHub

個人網站GitHub網頁上傳

GitHub - kateLee/personal_website at 1.1.0

CSS 是控制網頁外觀的語言，應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。

Michael楊

CSS入門-Day1：語言介紹、觸及的領域、誰在使用

您對前端有興趣，對CSS不陌生。CSS新特性前應瞭解基本內容。CSS屬性制定經歷過程，瀏覽器私有前綴及處理，開發者對新特性漸進增強，優雅降級處理，Web標準定義、作用等。

大漠聊 CSS

图解CSS：揭开CSS的面纱

Keep Go的沙龍

Padlet

Kate的沙龍

個人網站1.3.0逐行解說

因為最近需要建立自我品牌，所以決定來架個人網站。
架個人網站的方式非常多，最簡單的是直接找台伺服器拿現有模板套上去。
但是我喜歡自由，而且也已經有方格子部落格網站，所以打算做個簡單的名片網站。

建立個人網站 Set up Personal Website

明明想要某個欄位的寬高為 200px，卻發現自己不知道為什麼怎麼更改都會改不動，又或者寬高更改了，卻沒有辦法與其他元素並列。
上述的狀況，通常都是在不熟悉 HTML display 特性而產生的狀況下才會出現⋯⋯

Vivian Yeh - 跨領域轉職的軟體工程師

【CSS 教學】inline、block、inline-block 使用時機講解

一個網頁只會有一個h1
標籤(h1.p.img)裡面可以放多個屬性(src.background.color)
建立 HTML 環境
 告訴大家這是html5的語法

關於整個專案的資訊放這裡面
	頁籤標題


	寫給別人看的要放這裡面



Emmet 預設安裝
 /*語意使用英文*/
	 /*使

王聖禮的沙龍

基礎HTML學習筆記

與HTML不同，CSS是專門修改網頁內容「樣式」的程式語言，也就是說你沒有辦法透過CSS去新增網頁的文字或是圖片等相關的內容，但你可以透過HTML新增網頁內容後，再使用CSS去修改他的樣式，例如⋯⋯

【自學程式】什麼是CSS選擇器? 學習如何改變網頁內容的樣式

職場

音樂藝文

學習

以行動支持創作者！付費即可解鎖

軟體開發

10天快速學習系列

日後將分享關於我的經驗(日常、工作、技術)，並期待未來能創造屬於我的宇宙。

科技

CSS 领域专家，在这里只聊 CSS 相关的话题。在这里你将获得 CSS 的最新特性、技巧和实战案例！

電影戲劇

國際

Kotlin 系列

和 Kotlin 相關的系列文章。

給程式初學者的「Kotlin 學習系列」
給正在實戰的工程師「Kotlin 實戰系列」

<div class="draft-block draft--p left">很有價值的資訊，感恩😊</div>

RD少女養成計畫

為了追求可以窩在座位上、可以心無旁騖思考問題、座位可以亂七八糟沒關係、不需要到處哈腰點頭跑客戶，不用腳踩十公分、連妝都可以不用化的職場人生，文組少女毅然決然踏上RD的養成日常。


親子與教育

01-選擇器寫法

圖片來源：自己擷取電腦螢幕
1.可以下.main .img .hot span  
控制到a 下面的兩個span
也可以省略成下 .hot span  只要整個html不容易相撞到相同的class就可以

2.也可以下.hot .title  就單純控制span class=＂t

設計

You 的沙龍

HTML.CSS學習筆記01

在youtube上找尋前端的小專案來練習，就發現了這個不是很難，又可以讓我練習怎麼把javascript用在網頁裡的專案，於是就跟者影片做了一遍。當然，比起前一個寫遊戲的影片來說，可以說是輕鬆很多。

教育學習

遇到的坑、解過的題、新知識的探索、舊時代的遺毒!? 工作後我發現，文件更新往往跟不上新需求的更迭，犯錯的歷史總是不斷重演。因此，我改變了方式，蒐集從程式上、系統上的每一次異常處理過程，好讓再次遇到相同的問題時能快速應變。此專題就是我的錯題本，期待日後不管在工作上或交流上遇到難題，都能輕鬆地應答：有什麼難的，我都踩過。