Question

我已经开始使用html第一次为我的网页设计模板了。我在body标签内部使用了div。当屏幕最大化时，一切看起来都很好。但是，如果我最小化屏幕，对齐看起来很奇怪。我如何设计网页，使其始终适合屏幕。这是我的示例代码。

<body height="100%">
<table width="100%" style="border-spacing: 0;">
    <tr>
        <td></td>
    </tr>
</table>
<div>
  <div style="float: left; position:relative;width:700px;height:75px;border:2px solid black;">
  </div>
<div style="float: right; width:530px;height:260px;border:2px solid black;">
</div>
<div id="calendartable" style="float:right;position:relative;width:530px;height:30px;border:2px solid black;"></div>
</body>

Answer 1

您正在谈论名为responsive design Check this

的内容

Answer 2

您可以使用bootstrap开发响应式网页。

否则，您需要了解有关响应式设计的规则。尝试按照此示例之一了解如何使用MediaQueries;）

http://www.hongkiat.com/blog/responsive-web-tutorials/

Answer 3

很难理解你真正想要实现的目标。

首先，仅用于真实表格，例如时间表，或者您将使用Exel的东西。我们不再使用现代网页设计中的表格了。真。：）

其次，您应该尝试了解您的网站应该是什么样子。在你做任何代码之前。

一个非常简单的“响应式”设计网站：

<body>
<div id="main">
    <header>
        <nav>
            <ul>
                <li><a href="#">Item 1</a></li>
                <li><a href="#">Item 2</a></li>
                <li><a href="#">Item 3</a></li>
                <li><a href="#">Item 4</a></li>
                <li><a href="#">Item 5</a></li>
                <li><a href="#">Item 6</a></li>
                <li><a href="#">Item 7</a></li>
            </ul>
        </nav>
    </header>
    <div id="content" class="content">
        <h1>My page title</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit eligendi non quaerat tempora totam similique aliquid quas architecto rem ratione iure recusandae. Sit incidunt sint amet maxime necessitatibus expedita aspernatur?</p>
        <h2>Subtitle</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam cupiditate similique nostrum impedit nulla doloremque assumenda quis provident ducimus nihil iusto veniam voluptatibus distinctio aperiam et vel quae ex libero!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt corrupti repellendus quibusdam praesentium cum facilis laboriosam numquam dolor atque cupiditate ullam quasi optio? Ratione maxime quam dolores sint dicta rerum.</p>
    </div>
    <footer class="footer">
        <p>&copy; 2014 &ndash; <a href="#">My Fancy Pagename.</a></p>
        <p>Please do copysteal. You're free to use whatever you like from this page as long as you attribute me and link back.</p>
    </footer>
</div>

（http://jsfiddle.net/n3gn5/）

正如你在这里看到的，我没有使用任何内联CSS（那种style =“color：red;”的东西），但我在一个额外的文件中有CSS：

body {
 margin: 0;
 padding: 0;
 font-family: Helvetica, Arial, sans-serif;
}

nav ul li {
    list-style: none;
    display: inline;
}

nav ul li a {
    text-decoration: none;
    color: gray;
    margin-right: 10px;
}

h1 {
    font-size: 80px;
    font-weight: 100;
    color: orange;
}

footer {
    font-size: 12px;
    color: gray;
    font-weight: 100;
}

#main {
    width: 70%;
    margin: auto;
}

使用jsfiddle链接，如果你愿意，你可以乱七八糟地看看结果。

我真的建议您使用HTML，CSS和JavaScript获得一些帮助。 Codecademy做了一些非常好的免费课程。另一方面，那里有很多好书。只需确保在线阅读书籍或文章：选择一些不超过几年的书籍或文章。如果你从1997年开始学习书籍或教程，你就会学到错误的东西，你会学到不良的习惯和行为。它可能会起作用（表格布局），但你不会对它有任何乐趣，也不能用这些知识创建好的网站。

如果你在那里完成并有特殊问题，请回来问他们。

您的问题有点像“我如何制造汽车？我不知道！”。对这类问题没有好的答案。

我希望无论如何我都可以提供帮助。：）

如何根据屏幕大小html容纳容器

3 个答案: