我正在为一个今天到期的学校项目工作，我尝试了所有的东西，以使其正确响应，无论它没有正确调整大小。我不熟悉编码开头，并担心因为这很快就会到期。任何人都可以帮助或指出我正确的方向，如何使这适用于移动设备和东西？提前谢谢。
以下是CSS
body {
font-family: arial;
font-size: 12px;
cursor: default;
color: #AAAAAA;
}
td {
font-family: arial;
font-size: 12px;
cursor: default;
color: #242121
}
a {
color: #000000;
text-decoration: none;
font-size: 16px
}
a:hover {
color: #000000;
text-decoration: underline
}
input {
border-width: 1;
font-family: arial;
font-size: 12px;
padding: 2px;
height: 21px;
border-color: #000000;
border-style: solid;
background-color: #ffffff;
color: #000000
}
.slogan {
font-size: 14px;
color: #ffffff;
padding: 0 0 0 10;
}
.class1 {
font-size: 18px;
color: #ffffff;
font-family: Times;
}
以下是其中一个网页：index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Litter of Love</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="style-2.css" />
<script>
Alert("Welcome to my web page!") ;
</script>
</head>
<body bgcolor="FFFFFF">
<div align="center">
<table width="750" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" width="750" height="200" background="header.jpg" valign="top" style="padding:0 0 0 10">
<table width="700" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="330" class="slogan">
Build a Stylish Cat-Friendly Home
</td>
<td width="400" align="right">
<table width="400" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="right" height="20">
</td>
</tr>
</table>
</td>
<td width="20"></td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="3" height="15" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td colspan="3" height="1" bgcolor="CCCCCC"></td>
</tr>
<tr>
<td colspan="3" height="10" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="170" bgcolor="FFFFFF" valign="top">
<span style="font-size:6px"><br></span>
<div align="center">
<table width="140" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html">Home</a></td>
</tr>
<tr>
<td height="5" bgcolor="#FFFFFF"></td>
</tr>
<tr>
<td><a href="contact.html">Contact us</a></td>
</tr>
<tr>
<td height="5" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td><a href="about.html">About us</a></td>
</tr>
<tr>
<td height="5" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td><a href="shop.html">Products</a></td>
</tr>
<tr>
<td height="5" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td><a href="media.html">Media</a></td>
</tr>
</table>
<br><span style="font-size:6px"><br></span>
<span style="font-size:6px"><br></span>
</div>
</td>
<td width="1" bgcolor="CCCCCC"></td>
<td width="579" valign="top">
<span style="font-size:6px"><br></span>
<div align="center">
<table width="549" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" height="1" bgcolor="AAAAAA"></td>
<td width="5" height="1" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td rowspan="2" colspan="2" width="542" height="27" bgcolor="#334a10" class="class1"> HEALTHY</td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" height="4" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0" height="23"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" height="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="FFFFFF">
<table width="542" border="0" cellpadding="17" cellspacing="0">
<tr>
<td style="color:999999;line-height:1.6em">
<div align="justify">
<img src="healthy.jpg" width="350" height="200" align="left">
Put together an engaging jungle gym for your cat friend and provide the gift of satisfaction and longevity.
<br><br>
Made by eco friendly materials and production recycled packaging.
</div>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" height="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" height="5" bgcolor="FFFFFF"></td>
<td width="4" height="5" bgcolor="FFFFFF"></td>
<td width="538" height="5" bgcolor="F0F0F0"></td>
<td width="1" height="5" bgcolor="F0F0F0"></td>
<td width="5" height="5" bgcolor="F0F0F0"></td>
</tr>
</table>
<br>
<table width="549" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" height="1" bgcolor="AAAAAA"></td>
<td width="5" height="1" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td rowspan="2" colspan="2" width="542" height="27" bgcolor="#334a10" class="class1"> FUNCTIONAL
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" height="4" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0" height="23"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" height="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="FFFFFF">
<table width="542" border="0" cellpadding="17" cellspacing="0">
<tr>
<td style="color:999999;line-height:1.6em">
<div align="justify">
<img src="functional.jpg" width="350" height="200" align="right">
Captivating, durable and easy to relocate. Our cat furniture designs are a space conscious alternative to the traditional commercial cat tree.
</div>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" height="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" height="5" bgcolor="FFFFFF"></td>
<td width="4" height="5" bgcolor="FFFFFF"></td>
<td width="538" height="5" bgcolor="F0F0F0"></td>
<td width="1" height="5" bgcolor="F0F0F0"></td>
<td width="5" height="5" bgcolor="F0F0F0"></td>
</tr>
</table>
<br>
<table width="549" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" height="1" bgcolor="AAAAAA"></td>
<td width="5" height="1" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td rowspan="2" colspan="2" width="542" height="27" bgcolor="#334a10" class="class1"> MODERN</td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" height="4" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0" height="23"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" height="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" bgcolor="FFFFFF">
<table width="542" border="0" cellpadding="17" cellspacing="0">
<tr>
<td style="color:999999;line-height:1.6em">
<div align="justify">
<img src="beautiful.jpg" width="350" height="200" align="left">
We believe furniture should be noticed, but not draw too much attention. We design conceps which spark conversation in any home, and yet stand the test of time. We are thrilled to see cats coming out of the unnoticed rooms and into your modern living room.
</div>
</td>
</tr>
</table>
</td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" bgcolor="AAAAAA"></td>
<td colspan="2" height="1" bgcolor="AAAAAA"></td>
<td width="1" bgcolor="AAAAAA"></td>
<td width="5" bgcolor="F0F0F0"></td>
</tr>
<tr>
<td width="1" height="5" bgcolor="FFFFFF"></td>
<td width="4" height="5" bgcolor="FFFFFF"></td>
<td width="538" height="5" bgcolor="F0F0F0"></td>
<td width="1" height="5" bgcolor="F0F0F0"></td>
<td width="5" height="5" bgcolor="F0F0F0"></td>
</tr>
</table>
<span style="font-size:6px"><br></span>
</div>
</td>
</tr>
<tr>
<td colspan="3" height="10" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td colspan="3" height="1" bgcolor="CCCCCC"></td>
</tr>
<tr>
<td colspan="3" height="5" bgcolor="FFFFFF"></td>
</tr>
<tr>
<td colspan="3" bgcolor="FFFFFF" align="right">
Valco Copyright © 2017 All Rights Reserved
</td>
</tr>
</table>
</div>
</body>
</html>
答案 0 :(得分：0)
最快的方法是使用响应式css框架，并使用现有组件，如果需要，可根据需要配置/设置它们。
对于侧面导航，您可以使用Navs > Pills (stacked)，每个右侧部分可以使用Panels > Panel with heading，在每个面板中您可以使用Media Object
这比使用<table>布局要好得多，因为你现在似乎在做。
答案 1 :(得分：0)
如果你只想要一个＆＃34;快速＆＃34;使您的网站响应的方式。您应该查看媒体查询。
他们非常聪明，您可以直接在CSS中使用它们。
为桌面设备，平板电脑和移动设备制作一个，你应该好好去:)