Question

我创建了一个网页来控制我的电视（见下图）。当我单击按钮时，服务器会收到POST请求并将其转换为IR信号。

有效。但UI看起来很难看。我是网络前端的新手。是否有任何CSS库可以使按钮看起来更好，或者JS库有一些动态外观？

BTW，网络服务器托管在Arduino上，它有2K内存，16MHz CPU和30k闪存。因此没有足够的内存来保存内部CSS。我希望html页面尽可能小。我正在寻找的是我可以链接的CSS。

TV controller

更新7/23/2012

我在下面添加CSS代码，按钮看起来很像字母，但它不够完美。

button {
            display: inline-block;
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1da36), color-stop(100%,#fcf088));
            background: -moz-linear-gradient(center top, #f1da36 0%, #fcf088 100%);
            -webkit-box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
            -moz-box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
            box-shadow: 0px 0px 5px #777777, 0px 0px 2px #333333 inset;
            -webkit-border-radius: 30px;
            -moz-border-radius: 30px;
            border-radius: 30px;
            padding: 10px 15px;
            border-color: #ffffff;
            border-width: 1px;
            border-style: solid;
            font-size: 16px;
            color: #000000;
            font-weight: bold;
        }
        button:hover {
            background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeff07), color-stop(100%,#fcf088));
            background: -moz-linear-gradient(center top, #eeff07 0%, #fcf088 100%);
        }
        button:active {
            -webkit-box-shadow: 0px 0px 5px #333333 inset;
            -moz-box-shadow: 0px 0px 5px #333333 inset;
            box-shadow: 0px 0px 5px #333333 inset;
        }

IR Design 2

Answer 1

如何使用image of a remote control，然后使用HTML map tag的点击事件触发您的代码隐藏？虽然我强烈建议您至少查看basics of CSS。

Answer 2

您可以使用CSS进行样式设置并将其保存在另一个文件中。然后，您可以将CSS文件托管在单独的服务器上并将其链接到外部。

<head>
<link rel="stylesheet" type="text/css" href="http://www.myotherserver.com/mystyle.css" />
</head>

如果您没有设置其他主机，理论上您可以使用dropbox或类似方式托管该文件。

http://www.maclife.com/article/howtos/how_host_your_website_dropbox

如果您不想学习如何自己设置CSS样式，您可以从这样的网站复制某些内容，或者使用众多生成器之一生成它。

http://www.cssbutton.me/

有什么想让我的html页面看起来更好吗？

2 个答案: