創建HTML按鈕，如xperia x8主屏幕

-1

因此，大多數電話公司在Android用戶許可他們的手機時都有自己的轉折點。我喜歡索尼愛立信爲他們的手機創建的UI設計，他們在主屏幕的角落有四分之一圈。創建HTML按鈕，如xperia x8主屏幕

我正在爲我的HTML頁面創建類似的按鈕。這樣我的頁面就會在屏幕的四個角落有四個四分之一圓圈。

source: pianetacellulare.it

我相信，如果這個問題是理解這一點就可以輕鬆解決了，我只是找不到合適的詞來搜索。從本質上講，我需要這樣的事情只使用HTML，CSS和JQuery（以下是在Word中創建的圖像時，4個橢圓與下拉選項按鈕）：

enter image description here

而且雖然我們在這，是有任何索尼用於其定製用戶界面的術語（例如，Xperia X8使用Android 2.1，但其主屏幕與HTC手機使用的不同）。

來源

2013-02-26 IndianNoob

我認爲索尼的自定義UI被稱爲'Timescape UI'。 – Rowno 2013-02-26 07:48:31

@Rowno嗯，這是有益的...現在的HTML .. – IndianNoob 2013-02-26 07:54:48

_「我相信這可以很容易地解決」_ - 雖然我明白你想達到什麼目的，但我不明白你在哪裏卡住，你有什麼嘗試到目前爲止？ – Uooo 2013-02-26 08:06:31

有很多方法可以解決這個問題。

如果是我，我只想提出四點的div固定的位置和周圍的角落，像這樣：

http://jsfiddle.net/KDgLU/2/

div.button { 
    display:block; 
    position:fixed; 
    background-color:blue; 
    height:50px; width:50px; 
} 
#topLeft { 
    left:0; 
    top:0; 
    border-bottom-right-radius:100%; 
} 
#topRight { 
    right:0; top:0; 
    border-bottom-left-radius:100%; 
} 
#botLeft { 
    bottom:0; 
    left:0; 
    border-top-right-radius:100%; 
} 
#botRight { 
    bottom:0; 
    right:0; 
    border-top-left-radius:100%; 
}

請注意，您應該使邊界半徑更跨瀏覽器友善。你可以用這個小工具輕鬆做到這一點：http://border-radius.com/

這是你在問什麼？

來源

2013-02-26 08:03:18

原來我一直在努力與位置：固定一直......但kuods ......這正是我正在尋找。 – IndianNoob 2013-02-26 09:07:42

您可以使用CSS設計它們的樣式。這是你的HTML的假設：

<html> 
    <body> 
    <button id='upper-left-corner'>Messages</button>

現在你添加CSS：

<style> 
#upper-left-corner { 
position:absolute; 
text-align:left; 
left:0; 
top:0; 
</style>

這是八九不離十。

來源

2013-02-26 08:12:31 aIKid

創建HTML按鈕，如xperia x8主屏幕

回答

相關問題