1

テレビを制御するためのWebページを作成します（下の図を参照）。ボタンをクリックすると、サーバーはPOSTリクエストを受信し、それをIR信号に変換します。

できます。しかし、UIは見苦しいです。私はWebフロントエンドの初心者です。ボタンの見栄えを良くするCSSライブラリ、またはJSライブラリを使用した動的な外観はありますか？

ところで、Webサーバーは2Kメモリ、16MHz CPU、30kフラッシュを備えたArduinoでホストされています。そのため、内部CSSを保存するのに十分なメモリがありません。HTMLページをできるだけ小さくしたい。私が探しているのは、リンクできるCSSです。

TVコントローラー

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;
        }

IRデザイン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>

他のホスティングを設定していない場合は、理論的には、Dropbox などを使用してファイルをホストできます。

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

自分で CSS のスタイルを設定する方法を学びたくない場合は、このようなサイトから何かをコピーするか、そこにある多くのジェネレーターの 1 つを使用して生成することができます。

http://www.cssbutton.me/

于 2012-07-22T16:44:30.170 に答える