2013年2月27日 星期三

書終於上架 - jQuery Mobile與ASP.NET實戰開發


書終於上架了!!

 jQuery Mobile與ASP.NET實戰開發:跨平台行動介面與網頁應用程式設計





以下網站都可查到書訊息:

2013年2月19日 星期二

CSS Flexible Box Layout Module語法

CSS Flexible Box Layout Module的語法在不同版本中不太一樣,整理如下:

版本

語法

官方文件

Editor's Draft, 5 February 2013

display: flex;

官方文件

W3C Candidate Recommendation, 18 September 2012

display: flex;

官方文件

W3C Working Draft, 22 March 2012

display:flexbox;

官方文件

W3C Working Draft, 29 November 2011

display:flexbox;

官方文件

W3C Working Draft, 22 March 2011

display:flexbox;

官方文件

W3C Working Draft, 23 July 2009

display: box;

官方文件

2013年2月8日 星期五

IE10 font-face不work問題

若要使用CSS3  @font-face功能下載字型檔案到用戶端,可以

  • 先連到以下網站,將字型轉換成能在Web中使用的格式

http://www.font2web.com/

  • 選取本機字型檔,下載zip檔案

image

  • 解壓縮zip檔案,其中有一個css檔案,與一個fonts目錄

image

  • fonts目錄包含許多格式的檔案,提供給不同的Browser使用

image

  • 開啟fonts.css檔案,有使用此字型檔案的範例:

@font-face {
    font-family: 'Conv_BAUHS93';
    src: url('fonts/BAUHS93.eot');
    src: local('☺'), url('fonts/BAUHS93.woff') format('woff'), url('fonts/BAUHS93.ttf') format('truetype'), url('fonts/BAUHS93.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

  • 使用VS2012建立一個ASP.NET Empty Web Site

image

  • 將Fonts目錄與fonts.css加入Web Site

image

  • 加入一個HTML檔案

image

  • 加入HTML,使用fonts.css

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link href="fonts.css" rel="stylesheet" />
  <style>
    h1 {
      font-family: 'Conv_BAUHS93';
    }
  </style>
</head>
<body>
  <h1>This is a demo</h1>
</body>
</html>

  • 設定VS2012執行時同時啟用三個Browser

image

  • 按CTRL選多個Browser,按"設定為預設值",然後按"瀏覽"

image

  • 程式會自動run在三個browser中,但….ie10,不work…不正常啊

image

  • 手動修改CSS,加上這段反白的設定

image

code:

@font-face {
    font-family: 'Conv_BAUHS93';
    src: url('fonts/BAUHS93.eot') ;
    src: local('☺'),url('fonts/BAUHS93.eot') format('embedded-opentype'), url('fonts/BAUHS93.woff') format('woff'), url('fonts/BAUHS93.ttf') format('truetype'), url('fonts/BAUHS93.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

  • 再次執行,這回就正常了!!

image

2013年2月6日 星期三

設定ie10預設文件模式

每次執行ie,預設文件模式都是 ie7 ,按F12開啟開發工具如下:

image

可以設定相容性檢視

image

清除勾選:

image

這樣預設就會使用最新版本了:

image

總網頁瀏覽量