1

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

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

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

电视控制器

2012 年 7 月 23 日更新

我在下面添加了 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;
        }

红外设计 2

4

2 回答 2

1

使用遥控器的图像,然后使用HTML 地图标签on click事件来触发您的代码隐藏怎么样?尽管我强烈建议您至少了解一下CSS 的基础知识

于 2012-07-22T15:52:52.180 回答
1

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

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

如果您没有设置其他托管,理论上您可以使用保管箱或类似的东西托管文件。

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

如果您不希望自己学习如何设置 CSS 样式,您可以从这样的站点复制一些内容,或者使用那里的众多生成器之一生成它。

http://www.cssbutton.me/

于 2012-07-22T16:44:30.170 回答