任何想法讓我的html頁面看起來更好？

我創建了一個網頁來控制我的電視（請參見下圖）。當我點擊按鈕時，服務器收到POST請求並將其轉換爲IR信號。任何想法讓我的html頁面看起來更好？

它的工作原理。但UI看起來很難看。我是網絡前端的新手。有沒有任何CSS庫可以使按鈕看起來更好，或與JS庫的一些動態外觀？

順便說一句，網絡服務器託管在Arduino，它具有2K內存，16MHz CPU和30k閃存。所以沒有足夠的內存來保存內部CSS。我希望儘可能小的HTML頁面。我在找的是我可以鏈接的CSS。

TV controller

UPDATE 7/25/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

來源

2012-07-22 Jeffrey

查看twitter bootstrap。不確定是否有託管版本。 – bfavaretto 2012-07-22 16:10:44

你好bfavaretto，我無法訪問我們國家的Twitter。你能幫忙發佈一個快照嗎？儘管我無法閱讀它的源代碼，但至少我可以知道更好的UI應該是什麼。 – Jeffrey 2012-07-23 00:00:27

Bootstrap是一組用於網站的CSS和JavaScript組件，由Twitter成員創建。他們有非常漂亮的按鈕，只需要一個CSS文件包含在您的HTML中。 Bootstrap託管在GitHub上，我希望你能訪問它：http://twitter.github.com/bootstrap/base-css.html#buttons – bfavaretto 2012-07-23 15:18:38

你可以用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/

來源

2012-07-22 16:44:30 Bruce

謝謝布魯斯的鏈接。我從中找到許多令人敬畏的按鈕。我會試一試。 – Jeffrey 2012-07-23 00:12:05

什麼用image of a remote control，然後在點擊事件HTML map tag的工作觸發您的代碼隱藏？雖然我強烈建議你至少看看basics of CSS。

來源

2012-07-22 15:52:52 Sam

我知道CSS的基本語法。我可以閱讀CCS代碼。如果我使用圖像來顯示控件，我可以獲取整個圖像的點擊事件。我怎樣才能區分點擊哪個按鈕？ – Jeffrey 2012-07-23 00:08:33

HTML地圖標籤允許您拍攝圖像（例如遙控器）並將其分成多個可點擊的區域（例如電源按鈕，數字1等）。如果你看一下上面的HTML地圖標記鏈接，你可以看到一個實例。 '地區'標籤有一個[onclick事件]（http://www.codingforums.com/archive/index.php/t-20057.html），可以觸發它來辨別圖像上哪個區域被點擊。 – Sam 2012-07-23 02:08:19

謝謝薩姆。我知道它現在如何運作。 – Jeffrey 2012-07-23 02:32:16

任何想法讓我的html頁面看起來更好？

回答

相關問題