今天是歡樂星期天，來講個概念性的東西吧！鐵人賽也過了1/3了呢！別放棄，一起堅持下去吧！！ 覺得昨天講的相對位置和絕對位置，如果沒細講區塊的概念，會容易混亂和混...
排版好的網頁真的很重要ㄚ，那小公主今天要的是位置設定的兩種方法：絕對位置＆相對位置 大致可分為以下這些分類方式• absolute：絕對位置，當網頁往下拉時，元...
第一週手把手教學了很多基本觀念，接下來第二週要開始css的教程了！ Css主要掌控格式、美編、字體大小等等，小公主建議與html分開兩個檔案撰寫，才可更有效及清...
情境 在上一篇當中我們討論了固定高度在某些特定情境下有可能產生內溶溢出的問題。我相信我們的讀者一定也很能夠舉一反三，既然固定高度下，內容過長有可能會溢出，那換個...
鐵人賽邁入第七天，終於一個禮拜了，好感動！ 相信有了文字也有圖片，可以產出圖文並茂的網頁，不過還是少不了些格式化的基本工具，像是….表格！ 表格可以輕鬆清楚的規...
情境 不知道大家有沒有設計過官網或是活動頁的經驗呢？ 主頁橫幅(Hero Section)往往是針對網站訪問者遇到的第一視覺頁面，其目的是要提出一個該網站最重要...
結束標題後，我們可以來到網頁主視覺的部分 好的圖片，好的網頁，才能吸引消費者的興趣！人是視覺動物，第一眼給閱聽者的感官刺激決定了他會不會繼續瀏覽下去甚至按下購買...
情境 決定畫面的平衡有許多要考慮的因素，除了過長的內容會造成畫面破版之外，反過來，如果過短的內容是不是也會造成視覺上的不協調呢？ 你能看見多遠的未來呢？ 看看下...
情境 我們用下面這個垂直下拉選單來說明這個情境： 上圖示我們常見的下拉選單形式，這些選單有一些選項，例如我們可以對這個帳號做一些設定、登出、查看自己的個人資料...
小公主頻道邁入第五天ㄌ 當進入網頁映入眼簾的最上方，就是我們的標題，言簡意賅的標題對任何網站來說都十分重要，畢竟在分頁海裡，一目瞭然的找到想要的分頁，精確的標題...
又到了憂鬱星期一，歡迎回到小公主頻道！前幾天解說了前後端、html一些寫程式前的概念解說，說了那麼多廢話（沒），終於要開始寫程式了（痛哭流涕），大家準備好了ㄇ！...
情境 如下圖，網站中有這樣一塊又一塊的圖形設計，稱之為「卡片」。近年來 卡片式設計 在網站上越來越常見。 矩形的卡片設計能夠順利的與不同視窗大小做搭配，因此無論...
間距、間距、間距！ 情境 在討論今天的主題之前，我們先來看看下面這張圖： 第一張圖的情境，有可能是在介面上我們試圖要做一些不可逆的操作，例如你要去刪除某篇文章...
建構網頁最初階的一定就是html...不過html其實不是真正的程式語言，而是所謂的標記語言！ 那什麼是標記語言….？標記語言通常用於處理文本相關信息，能依照不...
情境 今天我們來討論一個常見的設計，標題與圖示。下面這是一張很常見的卡片式設計，看起來很正常不是嗎？ 我們在生活當中很常遇到類似這樣的設計，就是在一個卡片式的...
歡迎光臨小公主嘗試集＿第二集即將開始展開程式前端之旅…..等等所以什麼是前端ㄚ 好的小公主說書時間到！網頁設計大致可分為前端、後端 前端通常可以使用的語言為ht...
前言 像我這樣一個對程式語言，一無所知卻試圖想要進來這樣一個領域的初學者來說 腦袋畫面閃過的不外乎寫程式的就像是電影裡面打字噠噠噠很快速的駭客 好像咻咻咻幾分鐘...
大家好，我是小公主~(≧▽≦)/~就讀大三理工相關科系的廢物千金小公主，也是個有個創業夢想的小公主（有夢最美），期待自己可以除了推廣企業核心和創新應用外，也想在...
卡片版面3 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.在container設定display: flex讓資料橫...
卡片版面2 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
卡片版面1 在這個範例中要練習卡片版面的切版 整理幾個小重點如下方： 1.將section設為滿版2.添加一個container，做為固定欄寬1200px的區塊...
如何使用 Font Awesome 在網頁設計的同時，可以看到需要使用大量的icon，當我們網站要放入一些比較複雜的icon設計圖示，但沒有設計師幫我們產出時，...
合體版面 今天要將DAY6~DAY13所練習的所有版面合體起來，變成一個完整的頁面結束完這個完整個範例後，接下來的這幾天，每天會提供一個比較常見的範例一起練習...
導覽列 在這個範例中要練習導覽列區塊的切版 整理幾個重點:1.將section_kv設為滿版，添加屬性position: fixed (固定定位)，將導覽列的區...
頁尾 在這個範例中要練習頁尾部分的切版 整理幾個小重點如下方： 1.將footer_content設為滿版，添加背景色#FFEBF22.添加一個containe...
浮動視窗 在這個範例中要練習固定的浮動視窗，類似我們常看到的側邊廣告，位置不會隨著視窗滑動而改變 1.position: fixed 使用屬性position:...
區塊卡片2 在這個範例中要練習多個卡片的排列以及游標移至卡片後的效果 整理幾個小重點如下方： 1.將section_card設為滿版2.添加一個containe...
區塊卡片 今天要練習第四區塊卡片的切版 整理幾個小重點如下方： 1.將section_part2設為滿版2.添加一個container，做為固定欄寬1200px...
圖文版面2 今天要練習第二塊跟第三塊圖文版面的部分 整理幾個小重點如下方： 1.將section_melon以及section_gym設為滿版2.兩個部分都添加...
(先來個開場白幹話)網路大家每天都在使用，可以隨時方便地到達各個網站搜尋或是購買各種需要的東西，但這個每天幾乎無時無刻使用的工具，你真的知道他背後的運作原理嗎...
icetong
Taiming
candy82202
ruhui0726
bernice123
iThome鐵人賽
看影片追技術