標籤: 網頁設計

圖片編碼後鑲在網頁中

2011 年 5 月 8 日2021 年 3 月 12 日日落有 3 則留言

無意間發現 Google 404 頁面中的背景圖片並非以圖片形式存在，瀏覽器將 CSS 中的 base64 解碼後轉成圖片顯示而成。

檢視原始碼可看到：

background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKsAAA....)

以這種方式鑲圖片的好處，除了點右鍵沒辦法令存圖片、暫存檔沒有實體檔案外 (其實我原始的目的就是想複製他的圖片 XD)，主要的用途是讓瀏覽器不會對伺服器做而外的要求動作。

一般來說，瀏覽器會先取得 HTML，解譯過後發現需要額外的檔案，如：CSS、Javascript、圖片等，就會依照 HTML 中的網址向伺服器要檔案，若檔案數量很大則可能會造成伺服器不少負擔。若是將檔案直接鑲在網頁當中，瀏覽器解譯後直接使用，則不必再向伺服器要求資源。

找到一個工具可以將網路上的資源轉 base64，供大家將資源鑲在網頁中。

網頁設計

2010 年 6 月 13 日2021 年 3 月 12 日日落尚無留言

IE 6 是一個歷史悠久的瀏覽器，不是說他不好而是因為 parser 實在沒有按照標準撰寫，導致網頁設計的時候一堆語法還要為 IE6 客製化，實在浪費生命。

在網頁底下加入一段語法，讓使用 IE6 瀏覽網頁的使用者會收到建議更換瀏覽器的訊息：

<!--[if IE 6]>
   <script type="text/javascript" src="http://letskillie6.googlecode.com/svn/trunk/letskillie6.zh_TW.pack.js"></script>
<![endif]-->

網頁設計

2010 年 2 月 15 日2021 年 3 月 12 日日落有 1 則留言

在 LESS 看到的：

.rounded_corners {
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

網頁設計

2010 年 2 月 15 日2021 年 3 月 12 日日落尚無留言

LESS 是一個用 Ruby 寫成的 CSS 產生器，可以讓習慣寫成是的人將 CSS 程式、模組化，在交由 LESS 轉成正式的 CSS 發佈。

例如事先定義：

@my_color: #f00;

之後可以在各個 class 用到：

.top {
   ...
   font-color: @my_color;
}

.main {
   background-color: @my_color;
}

感謝 Jefflen 推薦。

網頁設計

2010 年 2 月 14 日2021 年 3 月 12 日日落有 3 則留言

今天遇到的鳥問題：CSS 中真正的 width 要等於 margin + border + padding + 設定的 width。

假設原本的 DIV 設定如下：

.box {
   width: 800px;
}

若要讓原本的區塊寬度不變但要加上 20px 的 padding 必須這樣設定：

.box-padding {
   padding-left: 20px;
   padding-right: 20px;
   width: 760px; /* 800 - 20 - 20 = 760 */
}

網頁設計