html - 如何使以下 html 代码适合所有分辨率？-6ren

html - 如何使以下 html 代码适合所有分辨率？

转载作者：行者123 更新时间：2023-11-28 14:33:15

由于html代码太长，我不能在这里发布。很抱歉让您花几秒钟时间查看页面:http://foodil.zxq.net/

<head>
<meta http-equiv=Content-Type content="text/html; charset=big5">
<link rel=File-List href="index_files/filelist.xml">
<!--[if !mso]>
<style>
v\:* {behavior:url(#default#VML);}
o\:* {behavior:url(#default#VML);}
b\:* {behavior:url(#default#VML);}
.shape {behavior:url(#default#VML);}
</style>
<![endif]-->
<title>Page Title</title>
<style>
<!--
 /* Font Definitions */
@font-face
    {font-family:"Gill Sans MT";
    panose-1:2 11 5 2 2 1 4 2 2 3;}
@font-face
    {font-family:Garamond;
    panose-1:2 2 4 4 3 3 1 1 8 3;}
@font-face
    {font-family:"Lucida Sans Typewriter";
    panose-1:2 11 5 9 3 5 4 3 2 4;}
@font-face
    {font-family:新細明體;
    panose-1:2 2 5 0 0 0 0 0 0 0;}
 /* Style Definitions */
p.MsoNormal, li.MsoNormal, div.MsoNormal
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:.075pt;
    line-height:110%;
    text-align:left;
    font-family:Garamond;
    font-size:10.5pt;
    color:black;}
h4
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:6.0pt;
    text-align:left;
    font-family:Garamond;
    font-size:12.0pt;
    color:black;
    font-style:italic;
    font-weight:normal;}
p.MsoListBullet2, li.MsoListBullet2, div.MsoListBullet2
    {margin-left:8.6pt;
    margin-right:0pt;
    text-indent:-8.6pt;
    margin-top:0pt;
    margin-bottom:6.0pt;
    line-height:84%;
    text-align:left;
    font-family:"Gill Sans MT";
    font-size:10.0pt;
    color:black;}
p.MsoTitle3, li.MsoTitle3, div.MsoTitle3
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:center;
    font-family:"Lucida Sans Typewriter";
    font-size:36.0pt;
    color:white;
    font-weight:bold;}
p.MsoAccentText, li.MsoAccentText, div.MsoAccentText
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:left;
    font-family:"Gill Sans MT";
    font-size:10.0pt;
    color:black;}
p.MsoAccentText4, li.MsoAccentText4, div.MsoAccentText4
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:left;
    font-family:"Gill Sans MT";
    font-size:9.0pt;
    color:white;
    font-weight:bold;}
p.MsoAccentText7, li.MsoAccentText7, div.MsoAccentText7
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:left;
    font-family:"Lucida Sans Typewriter";
    font-size:9.0pt;
    color:black;
    font-weight:bold;}
p.MsoAccentText8, li.MsoAccentText8, div.MsoAccentText8
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:right;
    font-family:"Gill Sans MT";
    font-size:9.0pt;
    color:white;
    font-weight:bold;}
p.MsoOrganizationName, li.MsoOrganizationName, div.MsoOrganizationName
    {margin-right:0pt;
    text-indent:0pt;
    margin-top:0pt;
    margin-bottom:0pt;
    text-align:center;
    font-family:"Lucida Sans Typewriter";
    font-size:12.5pt;
    color:black;
    font-weight:bold;}
p.MsoBodyTextIndent3, li.MsoBodyTextIndent3, div.MsoBodyTextIndent3
    {margin-right:0pt;
    text-indent:13.5pt;
    margin-top:0pt;
    margin-bottom:0pt;
    line-height:114%;
    text-align:justify;
    text-justify:inter-ideograph;
    font-family:"Times New Roman";
    font-size:10.0pt;
    color:black;}
ol
    {margin-top:0in;
    margin-bottom:0in;
    margin-left:-2197in;}
ul
    {margin-top:0in;
    margin-bottom:0in;
    margin-left:-2197in;}
@page
    {size:8.-2019in 11.2232in;}
-->
</style>
<!--[if gte mso 9]><xml>
 <o:shapedefaults v:ext="edit" spidmax="14342" fill="f" fillcolor="white [7]"
  strokecolor="black [0]">
  <v:fill color="white [7]" color2="white [7]" on="f"/>
  <v:stroke color="black [0]" color2="white [7]">
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#ccc [4]"/>
  <v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
  <o:colormru v:ext="edit" colors="#777,#db1101,#b2b2b2,red,blue,#e5e5e5,#5f5f5f,#111"/>
 </o:shapedefaults><o:shapelayout v:ext="edit">
  <o:idmap v:ext="edit" data="1"/>
 </o:shapelayout></xml><![endif]-->
</head>

<body link=maroon vlink="#996600" bgcolor="#777777"
background="index_files/image568.jpg" style='margin:0' width=100%>
<!--[if gte vml 1]><v:background id="_x0000_s3073" o:bwmode="white"
 fillcolor="#777" o:targetscreensize="1366,768">
 <v:fill angle="-90" focus="100%" type="gradient"/>
</v:background><![endif]-->

<div style='position:absolute;width:8.-1863in;height:11.0484in'>
<!--[if gte vml 1]><v:shapetype id="_x0000_t202" coordsize="21600,21600" o:spt="202"
 path="m,l,21600r21600,l21600,xe">
 <v:stroke joinstyle="miter"/>
 <v:path gradientshapeok="t" o:connecttype="rect"/>
</v:shapetype><v:shape id="_x0000_s1028" type="#_x0000_t202" style='position:absolute;
 left:144.56pt;top:195.59pt;width:130.4pt;height:527.24pt;z-index:4;
 visibility:visible;mso-wrap-edited:f;mso-wrap-distance-left:2.88pt;
 mso-wrap-distance-top:2.88pt;mso-wrap-distance-right:2.88pt;
 mso-wrap-distance-bottom:2.88pt' fillcolor="#f5e0d6 [3]" strokecolor="#db1101"
 strokeweight=".5pt" insetpen="t" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke>
  <o:left v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:top v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:right v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:bottom v:ext="view" color="#db1101" weight=".5pt" joinstyle="miter"
   insetpen="t"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#ccc [4]"/>
 <o:lock v:ext="edit" shapetype="t"/>
 <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
  <div dir=ltr>
  <p class=MsoBodyTextIndent3 style='text-indent:0pt'><span lang=en-US
  style='font-size:9.0pt;font-family:"Gill Sans MT";language:en-US'>In spite of the significant improvements in face recognition technology over the past two decades, </span><span
  lang=en-US style='font-size:9.0pt;font-family:"Gill Sans MT";font-style:italic;
  language:en-US'>unconstrained</span><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";language:en-US'> face recognition remains a challenging problem due to the large intra-subject variations and small inter-subject variations (see </span><a
  href="index_files/Page512.htm"><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";color:blue;text-decoration:underline;language:
  en-US'>Fig. 1</span></a><span lang=en-US style='font-size:9.0pt;font-family:
  "Gill Sans MT";language:en-US'>). Even though some of the major sources of intra-subject variations (</span><span
  lang=en-US style='font-size:9.0pt;font-family:"Gill Sans MT";font-style:italic;
  language:en-US'>e.g.</span><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";language:en-US'>, pose, expression and illumination) can be controlled in constrained imaging environments (</span><span
  lang=en-US style='font-size:9.0pt;font-family:"Gill Sans MT";font-style:italic;
  language:en-US'>e.g.</span><span lang=en-US style='font-size:9.0pt;
  font-family:"Gill Sans MT";language:en-US'>, driver license and passport), age variation is still a challenge in face recognition applications.</span></p>
  <p class=MsoBodyTextIndent3 style='text-indent:0pt'><span lang=en-US
  style='font-size:9.0pt;font-family:"Gill Sans MT";language:en-US'>&nbsp;</span></p>
  <p class=MsoBodyTextIndent3 style='text-indent:0pt'><span lang=en-US
  style='font-size:9.0pt;font-family:"Gill Sans MT";language:en-US'>Most of the age invariant face recognition methods proposed in the literature can be categorized into two major classes </span></p>
  </div>
 </v:textbox>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:4;
left:192px;top:260px;width:176px;height:705px'><img width=176 height=705
src="index_files/image299.gif"
alt="Text Box: In spite of the significant improvements in face recognition technology over the past two decades, unconstrained face recognition remains a challenging problem due to the large intra-subject variations and small inter-subject variations (see Fig. 1). component based approach uses combinations of segmented facial components to generate  aging simulated image. After the aging simulation, the appearance difference between probe and gallery images becomes smaller, resulting in an improved recognition accuracy. Discriminative approaches do not attempt to explicitly learn the appearance changes across ages, but they learn robust feature sets that are invariant to aging variations. As in the generative approaches, &#13;"
v:shapes="_x0000_s1028"></span><![endif]><!--[if gte vml 1]><v:shape id="_x0000_s1029"
 type="#_x0000_t202" style='position:absolute;left:144.56pt;top:144.56pt;
 width:408.19pt;height:45.36pt;z-index:5;visibility:visible;mso-wrap-edited:f;
 mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
 mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="#ccc [4]"
 strokecolor="#db1101" strokeweight=".5pt" insetpen="t" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke>
  <o:left v:ext="view" color="#db1101" weight="0" joinstyle="miter" insetpen="t"/>
  <o:top v:ext="view" color="#db1101" weight="0" joinstyle="miter" insetpen="t"/>
  <o:right v:ext="view" color="#db1101" weight="0" joinstyle="miter"
   insetpen="t"/>
  <o:bottom v:ext="view" color="#db1101" weight="0" joinstyle="miter"
   insetpen="t"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#ccc [4]"/>
 <o:lock v:ext="edit" shapetype="t"/>
 <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
  <div dir=ltr>
  <p class=MsoNormal style='text-align:center;margin-bottom:0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:19.6pt;line-height:
  114%;font-family:"Gill Sans MT";font-weight:bold;language:en-US'>Age-Invariant Face Recognition</span></p>
  <p class=MsoNormal style='text-align:center;margin-bottom:0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:10.0pt;line-height:
  114%;font-family:"Gill Sans MT";language:en-US'>Unsang Park and Anil K. Jain</span></p>
  <p class=MsoNormal style='text-align:center;margin-bottom:10.0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:19.6pt;line-height:
  114%;font-family:"Gill Sans MT";font-weight:bold;language:en-US'>asd</span></p>
  <p class=MsoNormal style='text-align:center;margin-bottom:10.0pt;line-height:
  114%;text-align:center'><span lang=en-US style='font-size:8.0pt;line-height:
  114%;font-family:"Gill Sans MT";font-weight:bold;language:en-US'>&nbsp;</span></p>
  </div>
 </v:textbox>
</v:shape><![endif]--><![if !vml]><span style='position:absolute;z-index:5;
left:192px;top:192px;width:546px;height:62px'><img width=546 height=62
src="index_files/image305.gif"
alt="Text Box: Age-Invariant Face Recognition&#13;Unsang Park and Anil K. Jain&#13;"
v:shapes="_x0000_s1029"></span><![endif]><!--[if gte vml 1]><v:group id="_x0000_s1030"
 style='position:absolute;left:144.56pt;top:93.54pt;width:408.19pt;height:49.71pt;
 z-index:6' coordorigin="1108901,1056767" coordsize="61471,11623">
 <v:oval id="_x0000_s1031" style='position:absolute;left:1108901;top:1056767;
  width:61472;height:11624;visibility:visible;mso-wrap-edited:f;
  mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
  mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="black [0]"
  stroked="f" strokecolor="black [0]" strokeweight="0" insetpen="t"
  o:cliptowrap="t">
  <v:fill opacity="58982f" color2="white [7]"/>
  <v:stroke>
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#ccc [4]"/>
  <o:lock v:ext="edit" shapetype="t"/>
  <v:textbox inset="2.88pt,2.88pt,2.88pt,2.88pt"/>
 </v:oval><v:shape id="_x0000_s1032" type="#_x0000_t202" style='position:absolute;
  left:1115344;top:1058870;width:48586;height:7418;visibility:visible;
  mso-wrap-edited:f;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
  mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' filled="f"
  fillcolor="white [7]" stroked="f" strokecolor="black [0]" strokeweight="0"
  insetpen="t" o:cliptowrap="t">
  <v:fill opacity="58982f" color2="white [7]"/>
  <v:stroke>
   <o:left v:ext="view" color="black [0]" color2="white [7]"/>
   <o:top v:ext="view" color="black [0]" color2="white [7]"/>
   <o:right v:ext="view" color="black [0]" color2="white [7]"/>
   <o:bottom v:ext="view" color="black [0]" color2="white [7]"/>
   <o:column v:ext="view" color="black [0]" color2="white [7]"/>
  </v:stroke>
  <v:shadow color="#ccc [4]"/>
  <o:lock v:ext="edit" shapetype="t"/>
  <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
   <div dir=ltr>
   <p class=MsoTitle3><span lang=en-US style='font-size:24.0pt;font-family:
   "Gill Sans MT";language:en-US'>Newsletter</span></p>
   </div>
  </v:textbox>
 </v:shape></v:group><![endif]--><![if !vml]><span style='position:absolute;
z-index:6;left:192px;top:124px;width:546px;height:68px'><img width=546
height=68 src="index_files/image313.gif" v:shapes="_x0000_s1030 _x0000_s1031 _x0000_s1032"></span><![endif]><!--[if gte vml 1]><v:shape
 id="_x0000_s1033" type="#_x0000_t202" style='position:absolute;left:42.51pt;
 top:238.11pt;width:98.26pt;height:204.42pt;z-index:7;visibility:visible;
 mso-wrap-edited:f;mso-wrap-distance-left:2.88pt;mso-wrap-distance-top:2.88pt;
 mso-wrap-distance-right:2.88pt;mso-wrap-distance-bottom:2.88pt' fillcolor="#e5e5e5"
 strokecolor="#db1101" strokeweight="0" insetpen="t" o:cliptowrap="t">
 <v:fill color2="white [7]"/>
 <v:stroke dashstyle="longDash">
  <o:left v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:top v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:right v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:bottom v:ext="view" dashstyle="longDashDot" color="#db1101" weight="0"
   joinstyle="miter" insetpen="t"/>
  <o:column v:ext="view" color="black [0]" color2="white [7]"/>
 </v:stroke>
 <v:shadow color="#ccc [4]"/>
 <o:lock v:ext="edit" shapetype="t"/>
 <v:textbox style='mso-column-margin:5.7pt' inset="2.85pt,2.85pt,2.85pt,2.85pt">
  <div dir=ltr>

</div>

</body>

</html>

据我所知，要适应分辨率需要以百分比定义元素，但是，由于这些代码已经定义了固定大小，是否有更简单的方法/任何方法可以使 html 代码适合所有大小的分辨率？谢谢，

最佳答案

好吧，结果确实坏了(如上所述)，而且我不知道 Microsoft 的 VML，但是您应该能够通过使用固定宽度的布局来适应每个分辨率。你问这是怎么做到的？好吧，只需在您想要支持的最小分辨率附近使用固定宽度的包装器(例如，600px 应该提供有趣的覆盖范围，尽管在这种情况下您通常会制作特定的样式，因为唯一具有 600px 宽度的屏幕往往是平板电脑/手机/等。

像这样:

<!DOCTYPE HTML>
<html>
<head>

<title>Test</title>

<style>
    * {
        margin: 0;
        padding: 0;
    }    

    body,html {
        width: 100%;
        height: 100%;
    }

    div#site-wrapper {
        width: 600px;
        margin: 0 auto;
    }
</style>

</head>

<body>
    <!-- This area should be a 600px container centered in your page -->
    <div id="site-wrapper">
        <header>
            <h1>My site</h1>
        </header>

        <section>
            <header>
                <h2>This is h2</h2>
            </header>

            <p>This is my section's content</p>
        </section>
    </div>
</body>
</html>

关于html - 如何使以下 html 代码适合所有分辨率？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7087492/

文章推荐： javascript - 如何在某些边界之外隐藏 javascript 动画？

文章推荐： javascript - 如何定义具有可变数量的键的 typescript 类型？

JavaScript () 以下 }
这个问题在这里已经有了答案: standalone parentheses in javascript [duplicate] (5 个答案) 关闭 8 年前。我在学习JavaScript，有时会
mysql - 优化MySQL查询:以下
我是mysql新手，我必须减少以下更新查询的执行时间 UPDATE temp_countcalculations, ( SELECT count(*) as insuffcounts,CRP_
python - 以下 for 循环如何工作？
def escape_html(s): for (i, o) in (("&","&"),(">", ">"),(" "变成 ">"等。关于python - 以下 for 循环
c++ - 以下 if 语句中的条件是做什么的？
if (read(read(cin, data1), data2)) 问题是C++ Primer 5th Edition 的练习。 read 函数定义如下: std::istream &read(st
以下 C 宏会导致问题吗？
我想创建两个宏。其中一个将扩展到函数原型(prototype)和函数内容，另一个将扩展到仅函数原型(prototype)。我正在考虑创建以下内容: #ifdef SOME_CONDITION #def
java - 以下 $in 查询中出现太多参数错误
我正在使用 jongo API - org.jongo.MongoCollection 是类。我有对象 ID 列表并转换为与 ObjectId[] 相同并尝试按如下方式查询 collection.f
java - 以下 ^.*$ 正则表达式匹配什么？
有人可以解释以下正则表达式匹配什么吗？ ^.*$ 谢谢! 最佳答案或者整个字符串或者整行，取决于是否multiline mode被使用。关于java - 以下 ^.*$ 正则表达式匹配什么？，我们
c - 以下 for 循环的功能有何不同
#include void main() { int a,b,c; for(b = c = 10; a = "- FIGURE?, UMKC,XYZHello Folks,TFy!QJ
java - 以下 Sonar 问题的解决方案？
我的代码段中的以下代码行被 Sonar 检测为问题。代码段: final int Pending=1; Sonar 问题: Name 'Pending' must matc
mysql - 以下 SQL 查询的正确解决方案是什么？
Print name of all activities with neither maximum nor minimum number of participants 我尝试了以下查询，但出现错误:
javascript - 以下 JavaScript 构造是否称为闭包？
这个问题在这里已经有了答案: What is this practice called in JavaScript? (7 个回答) 关闭8年前。 (function() { //do stuff
haskell - 以下 foldl 实现有什么问题？
根据任务，我们必须通过 foldr 实现 foldl。通过比较函数签名和 foldl 实现，我得到了以下解决方案: myFoldl :: (a -> b -> a) -> a -> [b] -> a
javascript - 以下 React 组件之间有什么区别？
这个问题在这里已经有了答案: Export an es6 default class inline with definition or at end of file? (1 个回答) 关闭 2 年
c++ - 以下 3 种定义对象的方法是否相同？
据我了解，以下是相同的: Person p{}; // Case 1 Person p = {}; // Case 1.5 我注意到 Person p = Person{}; // Case 2 产生
javascript - 以下 javascript 函数发生了什么
below i have given a javascript code picture `` can any one help me in this code. what do this code.
elasticsearch - 以下 Elasticsearch 查询有什么问题？
我想在标题和正文上搜索全文，并在答案计数上进行过滤。我阅读了elasticsearch documentation for combining filters并构建了此查询。 "query": {
c - 以下 C 代码中是否存在内存泄漏？
它是流动的 C 代码中的内存泄漏吗？ #include int *a; int main() { a = malloc(sizeof(int)*10); return
c - 以下 C 中的声明之间有什么区别？
这两个声明有什么区别: char (*ptr)[N]; 对比 char ptr[][N]; 谢谢。最佳答案 (1)声明 char (*ptr)[N]; ptr 是指向大小为 N 的字符数组的指针下
haskell - 以下 haskell 类型类实例有什么问题？
data II = I Int Int deriving (Show) instance II Show where show I a b = show (a+b) showt.hs:3:2: s
clojure - 以下 clojure 代码如何运行？
我从 clojuredoc 中阅读了关于 condp 的文档。在文档中我找到了以下代码: (condp 一些 [1 2 3 4] #{0 6 7} :>> 公司 #{4 5 9} :>> 十二月 #{

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 如何使以下 html 代码适合所有分辨率？