-1

そのため、ほとんどの電話会社は、Android UIのライセンスを取得する際に、独自の工夫を凝らしています。ソニーエリクソンが携帯電話用に作成したUIデザインが気に入っています。ホーム画面の隅に四分円があります。

HTMLページに似たようなボタンを作成したいと思っています。私のページが画面の四隅に4つの四分の一円を持つように。

ソース：pianetacellulare.it

問題を理解すれば簡単に解決できると思いますが、検索するのに適切な用語が見つかりませんでした。本質的に、HTML、CSS、JQueryのみを使用したこのようなものが必要です（以下はWordで作成された画像で、4つの楕円はドロップダウンオプション付きのボタンです）：

ここに画像の説明を入力してください

また、SonyがカスタマイズされたUIに使用する用語はありますか（たとえば、XperiaX8はAndroid2.1を使用しますが、ホーム画面はHTC電話で使用されるものとは異なります）。

4

2 に答える 2

2

これについては多くの方法があります。

私の場合は、次のように、位置を固定して角を丸めて4つの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-26T08:03:18.863 に答える
0

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-26T08:12:31.383 に答える