html - 针对不同的分辨率优化网站-6ren

html - 针对不同的分辨率优化网站

转载作者：可可西里更新时间：2023-11-01 14:44:16

<分区>

过去几天我一直在努力解决这个问题。我已经学习 HTML 和 CSS 大约一个月了，所以我还是个新手。在 CSS 中，我将位置设置为绝对位置，所有位置都以百分比表示。我应该为不同的分辨率编写不同的 CSS 文档吗？目前，我的所有内容都基于 1920 X 1080。据我了解，我需要类似响应式布局的东西，但我似乎无法弄清楚如何到达那里。我确实在 Codecademy 上学习过我制作 airbnb 页面的地方，它似乎可以很好地适应不同的分辨率。我已经看过了，所以我认为这可能只是我遗漏的东西。谢谢!

如果您在 1080p 下运行下面的代码，它看起来会很好，而任何更低的分辨率都会乱七八糟。

html,
body {
  margin: 0;
  padding: 0;
}
.container {
  width: 640px;
  margin: 0 auto;
}
/*start of header*/

.header {
  background: #8A0808;
}
.nav {
  margin: 0;
  padding: 20px 0;
}
.nav li {
  display: inline;
}
.nav a {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 15px;
  display: inline;
  text-transform: uppercase;
  margin-left: 25px;
  text-decoration: none;
}
/*end of header*/

/*start of central box*/

.centralbox {
  width: 65%;
  height: 150%;
  position: absolute;
  top: 6%;
  left: 17.5%;
  background-color: #151515;
}
/*end of central box*/

/*start of logo*/

.logo {
  width: 22%;
  height: 16%;
  position: absolute;
  top: 7%;
  left: 21%;
}
/*end of logo*/

/*start of h1*/

.h1 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 20%;
  left: 42.5%;
  text-decoration: underline;
}
/*end of h1*/

/*start of introduction1*/

.introduction1 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 21%;
  top: 27%;
  width: 58%;
}
/*end of introduction1*/

/*start of main picture*/

.mainimage {
  background-color: #585858;
  position: absolute;
  top: 34%;
  left: 21%;
  width: 42%;
  height: 42%;
}
.boxextension {
  width: 16%;
  height: 42%;
  background-color: #585858;
  position: absolute;
  top: 34%;
  left: 63%;
}
/*end of main picture*/

/*start of h2*/

.h2 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 35%;
  left: 62%;
  text-decoration: underline;
}
/*end of h2*/

/*start of introduction2*/

.introduction2 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  width: 16%;
  position: absolute;
  top: 41%;
  left: 62%;
}
/*end of introduction2*/

/*start of table*/

.AG9S Table {
  width: 20%;
  border: 2px solid;
  border-color: #000000;
  position: absolute;
  top: 78%;
  left: 21%;
  border-radius: 10px;
  background-color: #000000;
  list-style-type: none;
}
.AG9S Table td {
  vertical-align: middle;
  border: 1px solid #000000;
  text-align: left;
  padding: 7px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  color: #E6E6E6;
}
.AG9S Table tr:nth-child(odd) {
  background-color: #8A0808;
}
.AG9S Table tr:nth-child(even) {
  background-color: #2E2E2E;
}
.AG9S Table tr:first-child td:first-child {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
}
.AG9S Table tr:first-child td:last-child {
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
}
.AG9S Table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
}
.AG9S Table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
}
/*end of table*/

/*start of infotable1*/

.infotable Table {
  width: 30%;
  border: 2px solid;
  border-color: #000000;
  position: absolute;
  top: 78%;
  left: 42%;
  border-radius: 10px;
  background-color: #000000;
}
.infotable Table td {
  vertical-align: middle;
  border: 1px solid #000000;
  text-align: left;
  padding: 7px;
  font-size: 12px;
  font-family: 'Montserrat', sans-serif;
  color: #E6E6E6;
}
.infotable Table tr:nth-child(odd) {
  background-color: #8A0808;
}
.infotable Table tr:nth-child(even) {
  background-color: #2E2E2E;
}
.infotable Table tr:first-child td:first-child {
  border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  -moz-border-top-left-radius: 10px;
}
.infotable Table tr:first-child td:last-child {
  border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  -moz-border-top-right-radius: 10px;
}
.infotable Table tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
  -webkit-border-bottom-right-radius: 10px;
  -moz-border-bottom-right-radius: 10px;
}
.infotable Table tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
  -webkit-border-bottom-left-radius: 10px;
  -moz-border-bottom-left-radius: 10px;
}
/*end of infotable1*/

/*start of h3*/

.h3 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 90%;
  left: 42%;
  text-decoration: underline;
}
/*end of h3*/

/*start of introduction 3*/

.introduction3 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 96%;
  left: 42%;
  width: 30%;
}
/*end of introduction 3*/

/*start of h4*/

.h4 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 102%;
  left: 42%;
  text-decoration: underline;
}
/*end of h4*/

/*start of introduction 4*/

.introduction4 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 108%;
  left: 42%;
  width: 30%;
}
/*end of introduction 4*/

/*start of h5*/

.h5 {
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  position: absolute;
  top: 117%;
  left: 42%;
  text-decoration: underline;
}
/*end of h5*/

/*start of introduction 5*/

.introduction5 {
  color: #E6E6E6;
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  top: 123%;
  left: 42%;
  width: 30%;
}
/*end of introduction 5*/

/* start of menu*/

.menu {
  position: absolute;
  top: 10%;
  left: 2%;
}
/*end of menu*/

/*start of footer*/

.footer {
  width: 100%;
  position: absolute;
  top: 150%;
  background-color: #333333;
  color: #ffffff;
  padding: 30px 0;
}
.footer p {
  font-family: 'Raleway', sans-serif;
  font-size: 11px;
  text-transform: uppercase;
}
/*end of footer*/

<!DOCTYPE html>
<html>

<head>
  <title>Lorem Ipsum Dolor</title>

  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
  <link rel='stylesheet' href='testcss.css' />
</head>

<body background="http://i.imgur.com/EUCIQ9x.png">
  <!--start of header-->
  <div class="header">
    <div class="container">
      <ul class="nav">
        <li><a href="#"> Lorem </a>
        </li>
        <li><a href="#"> Home </a>
        </li>
        <li><a href="#"> Stuff </a>
        </li>
        <li><a href="#"> This </a>
        </li>
        <li><a href="#"> That </a>
        </li>
      </ul>
    </div>
  </div>
  <!--end of header-->
  <!--start of central box-->
  <div class="centralbox">
  </div>
  <!--end of central box-->
  <!--start of h1-->
  <div class="h1">
    <h1> Overview </h1> 
  </div>
  <!--end of h1-->
  <!--start of spec table 1-->
  <div class="AG9S">
    <ul>
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>10</td>
        </tr>
        <tr>
          <td>11</td>
          <td>12</td>
        </tr>
        <tr>
          <td>13</td>
          <td>14</td>
        </tr>
        <tr>
          <td>15</td>
          <td>16</td>
        </tr>
        <tr>
          <td>17</td>
          <td>18</td>
        </tr>
        <tr>
          <td>19</td>
          <td>20</td>
        </tr>
        <tr>
          <td>21</td>
          <td>22</td>
        </tr>
        <tr>
          <td>23</td>
          <td>24</td>
        </tr>
        <tr>
          <td>25</td>
          <td>26</td>
        </tr>
        <tr>
          <td>27</td>
          <td>28</td>
        </tr>
        <tr>
          <td>29</td>
          <td>
            <li>30</li>
            <li>31</li>
            <li>32</li>
            <li>33</li>
          </td>
        </tr>
      </table>
    </ul>
  </div>
  <!--end of table 1-->
  <!--start of logo-->
  <div class="logo">
    <img src="https://git-scm.com/images/logos/downloads/Git-Logo-Black.png" width="100%" height="100%">
  </div>
  <!--end of logo-->
  <!--start of introduction1-->
  <div class="introduction1">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id.
    </p>
  </div>
  <!--end of introduction1-->
  <!--start of image-->
  <div class="mainimage">
    <img src="http://www.clker.com/cliparts/a/2/Y/Q/y/8/mustache-no-background.svg" height="100%" width="100%">
  </div>
  <div class="boxextension">
  </div>
  <!--end of image-->
  <!--start of introduction2-->
  <!--start of h2-->
  <div class="h2">
    <h2>Lorem</h2> 
  </div>
  <!--end of h2-->
  <div class="introduction2">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
    </p>
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula,
    </p>
  </div>
  <!--end of introduction2-->
  <!--start of infotable-->
  <div class="infotable">
    <ul>
      <table>
        <tr>
          <td>1</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>8</td>
        </tr>
      </table>
    </ul>
  </div>
  <!--end of infotable1-->
  <!--start of introduction 3-->
  <!--start of h3-->
  <div class="h3">
    <h2>Lorem</h2>
  </div>
  <!--end of h3-->
  <div class="introduction3">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure.
    </p>
  </div>
  <!--end of introduction 3-->
  <!--start of introduction 4-->
  <!--start of h4-->
  <div class="h4">
    <h2>Ipsum</h2>
  </div>
  <!--end of h4-->
  <div class="introduction4">
    <P>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
      sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
    </p>
  </div>
  <!--end of introduction 4-->
  <!--startof h5-->
  <div class="h5">
    <h2>Dolor</h2>
  </div>
  <!--end of h6-->
  <!--start of introduction 6-->
  <div class="introduction5">
    <p>
      Lorem ipsum dolor sit amet, facilisi similique ex duo. Id qui dico nostrud pericula, usu nemore tractatos mediocritatem id. Eum mazim utamur at, eu stet atqui eligendi nec. Ut vel cibo iriure. Illud delenit adipisci mea in. Quo et aperiam temporibus consequuntur,
      sit ne quem eirmod pertinax.Lorem ipsum dolor sit amet,
    </p>
  </div>
  <!--end of introduction 6-->
  <!--start of menu-->
  <div class="menu">
    <select onchange="window.location.href=this.value">
      <option value="#">Lorem</option>
      <option value="https://www.youtube.com/">Ipsum</option>
      <option value="#">Dolor</option>
    </select>
  </div>
  <!--end of menu-->
  <!--start of footer-->
  <div class="footer">
    <div class="container">
      <p>&copy; blahblah 2015</p>
    </div>
  </div>
  <!--end of footer-->
</body>

</html>

文章推荐： installation - 设置 Hadoop 时遇到问题

文章推荐： ruby-on-rails - Ruby 和 Cucumber - 这是什么意思？ "([^"]*)"$/

文章推荐： file-io - 为什么Hadoop文件系统不支持随机I/O？

c++ - 为什么 MSVC 不为 char 或 const char* 优化 cout 而为 int 优化？
比较代码: const char x = 'a'; std::cout > (0C310B0h) 00C3100B add esp,4 和 const i
Matlab 优化
您好，我正在使用 Matlab 优化求解器，但程序有问题。我收到此消息 fmincon 已停止，因为目标函数值小于目标函数限制的默认值，并且约束满足在约束容差的默认值范围内。我也收到以下消息。警告:矩
Eclipse 优化
处理Visual Studio optimizations的问题为我节省了大量启动和使用它的时间当我必须进行 J2EE 开发时，我很难回到 Eclipse。因此，我还想知道人们是否有任何提示或技巧可
Excel 优化
情况如下:在我的 Excel 工作表中，有一列包含 1-name 形式的条目。考虑到数字也可以是两位数，我想删除这些数字。这本身不是问题，我让它工作了，只是性能太糟糕了。现在我的程序每个单元格输入大约
jQuery 优化
这样做有什么区别吗: $(".topHorzNavLink").click(function() { var theHoverContainer = $("#hoverContainer");
jQuery $(this) 优化
这个问题已经有答案了: 已关闭11 年前。 Possible Duplicate: What is the cost of '$(this)'? 我经常在一些开发人员代码中看到$(this)引用同一个
jQuery 优化
我刚刚结束了一个大型开发项目。我们的时间紧迫，因此很多优化被“推迟”。既然我们已经达到了最后期限，我们将回去尝试优化事情。我的问题是:优化 jQuery 网站时您要寻找的最重要的东西是什么。或者，我
JavaScript 优化
所以我一直在用 JavaScript 编写游戏(不是网络游戏，而是使用 JavaScript 恰好是脚本语言的游戏引擎)。不幸的是，游戏引擎的 JavaScript 引擎是 SpiderMonkey
MYSQL查询、优化
这是我在正在构建的页面中使用的 SQL 查询。它目前运行大约 8 秒并返回 12000 条记录，这是正确的，但我想知道您是否可以就如何使其更快提出可能的建议？ SELECT DISTINCT Adve
SQL 优化
如何优化这个？ SELECT e.attr_id, e.sku, a.value FROM product_attr AS e, product_attr_text AS a WHERE e.attr
python - 优化 `in`
我正在使用这样的结构来测试是否按下了所需的键: def eventFilter(self, tableView, event): if event.type() == QtCore.QEven
JavaScript 优化
我正在使用 JavaScript 从给定的球员列表中计算出羽毛球 double 比赛的所有组合。每个玩家都与其他人组队。 EG。如果我有以下球员a、b、c、d。它们的组合可以是: a & b V c
Javascript 优化
我似乎无法弄清楚如何让这个 JS 工作。 scroll function 起作用但不能隐藏。还有没有办法用更少的代码行来做到这一点？我希望 .down-arrow 在 50px 之后 fade out
CSS高级最小化(优化)
我的问题是关于用于生产的高级优化级联样式表 (CSS) 文件。多么最新和最完整(准备在实时元素中使用)的 css 优化器/最小化器，它们不仅提供删除空格和换行符，还提供高级功能，如删除过多的属性、合
HTML 优化
我读过这个: 浏览器检索在中请求的所有资源开始呈现之前的 HTML 部分.如果您将请求放在中section 而不是，那么页面呈现和下载资源可以并行发生。您应该从移动尽可能多的资源请求。
C++ 优化
我正在处理一些现有的 C++ 代码，这些代码看起来写得不好，而且调用频率很高。我想知道我是否应该花时间更改它，或者编译器是否已经在优化问题。我正在使用 Visual Studio 2008。这是一
c++ - 优化
我正在尝试使用 OpenGL 渲染 3 个四边形(1 个背景图，2 个 Sprite )。我有以下代码: void GLRenderer::onDrawObjects(long p_dt) {
Java If 优化
我确实有以下声明: isEnabled = false; if(foo(arg) && isEnabled) { .... } public boolean foo(arg) { some re
SQL 优化
(一)深入浅出理解索引结构实际上，您可以把索引理解为一种特殊的目录。微软的SQL SERVER提供了两种索引：聚集索引(clustered index，也称聚类索引、簇集索引)和非聚集索引(no
CSS 优化、提高性能的方法有哪些？
一、写在前面 css的优化方案，之前没有提及，所以接下来进行总结一下。二、具体优化方案 2.1、加载性能 1、css压缩：将写好的css进行打包，可以减少很多的体积。 2、css单一样式：在需要下边

可可西里

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

html - 针对不同的分辨率优化网站