极客观点
项目管理
HarmonyOS
我在 photoshop 中设计了我的网站，然后使用切片工具并保存为网络，我试过了。 [编辑] 这里给大家多一点细节是我的代码。这是来自保存为 web 选项的自动格式化代码（我知道这不是理想的）但是我没有 Dreamweaver 所以我不知道如何做。
<html>
<head>
<title>Cocina On Market</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0"
marginheight="0">
<div>
<center>
<table id="Table_01" width="1001" height="1100" border="0"
cellpadding="0" cellspacing="0">
<tr>
<td colspan="20">
<img src="images/index_01.gif" width="1000" height="4" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td rowspan="10">
<img src="images/index_02.gif" width="39" height="1096" alt="">
</td>
<td rowspan="4">
<a href="index.html">
<img src="images/logohome.gif" width="142" height="41"
border="0" alt=""></a></td>
<td colspan="18">
<img src="images/index_04.gif" width="819" height="9" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="9" alt=""></td>
</tr>
<tr>
<td colspan="12" rowspan="4">
<img src="images/index_05.gif" width="584" height="965" alt="">
</td>
<td rowspan="2">
<a href="index.html">
<img src="images/home.gif" width="54" height="25" border="0"
alt=""></a></td>
<td rowspan="9">
<img src="images/index_07.gif" width="13" height="1087" alt="">
</td>
<td rowspan="2">
<a href="menu.html">
<img src="images/menu.gif" width="54" height="25" border="0"
alt=""></a></td>
<td rowspan="9">
<img src="images/index_09.gif" width="14" height="1087" alt="">
</td>
<td>
<a href="contact.html">
<img src="images/contact.gif" width="80" height="22"
border="0" alt=""></a></td>
<td rowspan="9">
<img src="images/index_11.gif" width="20" height="1087" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="22" alt=""></td>
</tr>
<tr>
<td rowspan="8">
<img src="images/index_12.gif" width="80" height="1065" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="3" alt=""></td>
</tr>
<tr>
<td rowspan="7">
<img src="images/index_13.gif" width="54" height="1062" alt="">
</td>
<td rowspan="7">
<img src="images/index_14.gif" width="54" height="1062" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="7" alt=""></td>
</tr>
<tr>
<td rowspan="6">
<img src="images/index_15.gif" width="142" height="1055" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="933" alt=""></td>
</tr>
<tr>
<td rowspan="5">
<img src="images/index_16.gif" width="178" height="122" alt="">
</td>
<td colspan="2" rowspan="2">
<a href="index.html">
<img src="images/footerhome.gif" width="81" height="23"
border="0" alt=""></a></td>
<td colspan="5">
<img src="images/index_18.gif" width="107" height="2" alt=""></td>
<td colspan="3" rowspan="2">
<a href="contact.html">
<img src="images/footercontact.gif" width="111" height="23"
border="0" alt=""></a></td>
<td rowspan="5">
<img src="images/index_20.gif" width="107" height="122" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="2" alt=""></td>
</tr>
<tr>
<td rowspan="4">
<img src="images/index_21.gif" width="16" height="120" alt="">
</td>
<td colspan="3">
<a href="menu.html">
<img src="images/footermenu.gif" width="72" height="21"
border="0" alt=""></a></td>
<td rowspan="4">
<img src="images/index_23.gif" width="19" height="120" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="21" alt=""></td>
</tr>
<tr>
<td colspan="2">
<img src="images/index_24.gif" width="81" height="25" alt=""></td>
<td colspan="3">
<img src="images/index_25.gif" width="72" height="25" alt=""></td>
<td colspan="3">
<img src="images/index_26.gif" width="111" height="25" alt="">
</td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td>
<a href="https://www.facebook.com/cocinaonmarket">
<img src="images/facebook.gif" width="34" height="25"
border="0" alt=""></a></td>
<td rowspan="2">
<img src="images/index_28.gif" width="47" height="74" alt=""></td>
<td rowspan="2">
<img src="images/index_29.gif" width="22" height="74" alt=""></td>
<td>
<a href="https://www.instagram.com/cocinaonmarket">
<img src="images/instagram.gif" width="25" height="25"
border="0" alt=""></a></td>
<td rowspan="2">
<img src="images/index_31.gif" width="25" height="74" alt=""></td>
<td rowspan="2">
<img src="images/index_32.gif" width="45" height="74" alt=""></td>
<td>
<a href="https://www.twitter.com/cocinaonmarket">
<img src="images/twitter.gif" width="38" height="25"
border="0" alt=""></a></td>
<td rowspan="2">
<img src="images/index_34.gif" width="28" height="74" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="25" alt=""></td>
</tr>
<tr>
<td>
<img src="images/index_35.gif" width="34" height="49" alt=""></td>
<td>
<img src="images/index_36.gif" width="25" height="49" alt=""></td>
<td>
<img src="images/index_37.gif" width="38" height="49" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="49" alt=""></td>
</tr>
</table>
</center>
</div>
</body>
</html>
`
body {
padding: 0;
margin: 0;
}
div{
width: 100%;
height: 100%;
min-width: 1000px;
min-height: 1000px;
margin: 0 auto;
}
` 在没有运气的 CSS 中。有任何想法吗？ 这是一个屏幕截图，因此您可以看到我在说什么
原文由 BustyGerman 发布，翻译遵循 CC BY-SA 4.0 许可协议
这应该适合你：
vw代表 viewport-width ，这意味着用户看到的内容（宽度）的 100% 。vh代表 viewport-height ，相同的东西但高度