2010-03-19 62 views
0

我想創建iPhone上的網頁,你可知道一些好的網站關於「iphone CSS佈局」,你可以幫助我提高我的代碼

,但我不能以簡單的方式完成它,

這是我的代碼:

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" > 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=5.0,user-scalable=yes"> 

    </head> 
<body onorientationchange="updateOrientation();" onload=updateOrientation()> 
<div id="a"> 
    <input id='ab' type="button" value="button" /> 
</div> 

<div id=b style="display: none">sssadwq dwqdqw</div> 

<style type="text/css"> 
*{ 
    margin:0; 
    padding:0; 
    } 


/* Reposition on orientation change */ 
body.landscape{ 
    height: 268px; 
} 
body.landscape #a{ 
    height:134px; 
    line-height:134px; 
    } 

body.landscape #b{ 
    height:114px; 
    width:470px; 
    } 
body{ 
    height: 416px; 
} 
#a{ 
    line-height:208px; 
    height:208px; 
    text-align:center; 

} 
#b{ 
    height:198px; 
    width:310px; 
    background:red; 
    border:5px solid black; 
} 


</style> 
<script src="jquery-1.4.2.js" type="text/javascript"></script> 
<script type="text/javascript"> 

function updateOrientation() { 
     var orientation = window.orientation; 
      switch (orientation) { 
        // If we're horizontal 
      case 90: 
      case -90: 

      // Set orient to landscape 
      $(document.body).addClass("landscape"); 
      break; 

      // If we're vertical 
      default: 

      // Set orient to portrait 
      $(document.body).removeClass("landscape"); 
      break; 
     } 
} 

$('#ab').click(function(){ 
    if($('#b').css('display')=='none')$('#b').css('display','block') 
    else $('#b').css('display','none') 
    }) 
</script> 
</body> 
</html> 

它使用更多的定數,這是不是最好的辦法,我認爲最好的辦法是

使用比例越來越多,

你可以做到這一點FO我,,

感謝

回答

0

下載Xcode中,並使用Dashcode中。它會爲你做這項工作。或者,試試iWebkit

相關問題