-1

因此，大多数电话公司在为他们的手机授权时对 Android UI 都有自己的改动。我喜欢索尼爱立信为他们的手机创建的 UI 设计，他们的主屏幕角落有四分之一圈。

我正在寻找为我的 HTML 页面创建类似外观的按钮。这样我的页面就会在屏幕的 4 个角落有 4 个四分之一圆。

来源：pianetacellulare.it

如果问题被理解，我相信这可以很容易地解决，我只是找不到合适的词来搜索它。本质上，我需要这样的东西，只使用 HTML、CSS 和 JQuery（下面是在 Word 中创建的图像，4 个椭圆是带有下拉选项的按钮）：

在此处输入图像描述

此外，在我们讨论的同时，索尼是否为其定制的 UI 使用了任何术语（例如，Xperia X8 使用 Android 2.1，但其主屏幕与 HTC 手机使用的不同）。

4

2 回答 2

2

有很多方法可以解决这个问题。

如果是我，我只会制作四个位置固定并绕角的 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 回答