创建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网站移动使用

回答

相关问题