創建HTML + CSS網站移動使用

-2

我想爲客戶開發一個網站，他想要一個簡單的飛濺/着陸頁。創建HTML + CSS網站移動使用

我有以下

http://www.colmanweb.co.nz/websites/turbos-splash/

在左側的四個圖像的網站鏈接是相當大的，因爲當你滾動網絡瀏覽器下來的（所以它的響應用於移動應用）或視圖實際移動的圖像變得更小，這是我想要的。

我所追求的是左側的圖像/圖標要小得多，以便在網絡瀏覽器中正常瀏覽網頁，並且所有的東西都可以縮小爲手機，但圖像/圖標可以在移動設備上查看和點擊。

我重視的編碼下方

<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/myteam-btn.png" align="left" width="20%"/></div></td> 
    <td rowspan="5"><div id="tnation"><img src="images/turbonation.png" align="left" width="35%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/results-btn.png" align="left" width="20%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%" height="400px">&nbsp;</td> 
    </tr> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/tickets-btn.png" align="left" width="20%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%"><div id="icons"><img src="images/shop-btn.png" align="left" width="20%"/></div></td> 
    </tr> 
    <tr> 
    <td width="25%">&nbsp;</td> 
    </tr> 
</table>

和繼承人的CSS

body { 
background:#009e60; 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
} 
div#container { 
margin:0 auto; 
width:1427px; 
height:500px; 
} 

*{ 
padding:auto; 
margin:auto; 
text-align:center; 
} 

div#tnation {min-width:200%; margin-top:-100px;} 

div#icons {min-width:350%}

任何幫助將是巨大的！

謝謝

來源

2013-11-15 Callum

您是否試圖使其響應？目前的網站不是。或者你在問使用它如何使其響應？ – agconti

我不會爲此使用表格。 –

哦，不，大聲笑。這裏有很多事情要做，你不會用聰明的方式來解決這個問題。

幾樣東西，你可以替換：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml">

與

<!DOCTYPE html> 
<html lang="en">

雖然這真的不是主要的問題在所有的，以爲我會提到它。另外，表格實際上並不推薦用於佈局/設計目的，它們更適合於數據，而應該使用DIV容器（或跨度）。

另一件事，你的CSS這裏

div#tnation {min-width:200%; margin-top:-100px;} 
div#icons {min-width:350%}

是即使什麼也不做，因爲你的頁面上沒有DIV容器。

要讓某些東西成爲「響應式」，您可能需要在CSS文件中的某處使用「媒體查詢」。

看起來好像您對HTML/CSS的理解已經過時了，所以很難爲您提供幫助，直到您不幸地熟悉基礎知識。

來源

2013-11-15 02:18:02 GSimon

感謝大家的幫助。 – Callum

只需爲您的移動網站創建另一個Web應用程序。您可以使用用戶代理來檢測用戶是否使用移動設備。 WURFL將會有用。請檢查您的代碼。你可以做很多改進。

來源

2013-11-15 14:13:50 rhandom

創建HTML + CSS網站移動使用

回答

相關問題