如何獲取如下所示的視圖？

你好我使用的PhoneGap開發Android應用程序，我所遇到的它看起來像爲顯示在畫面如何獲取如下所示的視圖？

enter image description here

在這裏像有一堵牆，它的UI不同用戶的信息纏在它周圍。我想以這種方式得到的東西誰能給我一個想法如何使用HTML和CSS來獲得這種UI。我希望我能夠解釋我需要抱歉，如果我的問題不清楚。謝謝。

來源

2012-05-18 android phonegap

呀以前的UI是不同的，但現在這是我want.I想究竟這是什麼樣的一些事情我不是能找到它可以幫助我嗎？ –

您可能想要移除上一個問題。這一個更清晰（不要發佈重複） – keyser

其背景圖像或使用白色背景的分頻器圖像。 –

我在這裏找到答案：http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-practical-css-shapes/。

雖然這只是一方面，但我認爲它也不是很難讓它在右側工作。

編輯：

我得到它的工作對雙方都：

<!DOCTYPE html> 

<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>CSS Shapes</title> 
    <style type="text/css"> 
     #container { 
      background: #666; 
      margin: auto; 
      width: 500px; 
      height: 700px; 
      padding-top: 30px; 
      font-family: helvetica, arial, sans-serif; 
     } 

     h1 { 
      background: #e3e3e3; 
      border-top-left-radius:3px; 
      border-top-right-radius:3px; 
      border-bottom-right-radius:3px; 
      background: -moz-linear-gradient(top, #e3e3e3, #c8c8c8); 
      background: -webkit-gradient(linear, left top, left bottombottom, from(#e3e3e3), to(#c8c8c8)); 
      padding: 10px 20px; 
      margin-left: -20px; 
      margin-top: 0; 
      position: relative; 
      width: 100%; 

      -moz-box-shadow: 1px 1px 3px #292929; 
      -webkit-box-shadow: 1px 1px 3px #292929; 
      box-shadow: 1px 1px 3px #292929; 

      color: #454545; 
      text-shadow: 0 1px 0 white; 
     } 

     .arrow { 
      width: 0; height: 0; 
      line-height: 0; 
      border-left: 20px solid transparent; 
      border-top: 10px solid #c8c8c8; 
      top: 104%; 
      left: 0; 
      position: absolute; 
     } 
     .rightArrow { 
      width: 0; height: 0; 
      line-height: 0; 
      border-right: 20px solid transparent; 
      border-top: 10px solid #c8c8c8; 
      top: 104%; 
      left: 100%; 
      margin-left:-20px; 
      position: absolute; 
     } 
    </style> 
    <!--[if IE]> 
     <style> 
      .arrow { top: 100%; } 
     </style> 
    <![endif]--> 

</head> 
<body> 
    <div id="container"> 

     <h1> My Heading <span class="arrow"></span> <span class="rightArrow"></span></h1> 

    </div> 
</body> 
</html>

來源

2012-05-22 13:15:25 11684

嘿感謝您的回答這是我真正想要的東西 –

以及我前面提到的css3功能非常強大，只需通過這些demos來檢查它可以實現哪些功能。大多數情況下可以通過phonegap完成，因爲phonegap可以很好地適用於css3。 jquery頁面轉換也會有很大幫助。

來源

2012-05-18 10:52:37 Neji

謝謝，我會通過這些演示。 –

他不應該接受這個，因爲它實際上沒有回答這個問題。（但是：令人驚歎的這些演示！謝謝！） – 11684

如何獲取如下所示的視圖？

回答

相關問題