如何适应基于屏幕大小的容器html

我已经开始使用html和第一次为我的网页设计模板。我在身体标签内使用了div。当屏幕最大化时，一切看起来都很好。但是，如果我最小化屏幕，对齐看起来很奇怪。我可以如何设计网页，使它适合屏幕所有time.Here是我的示例代码。如何适应基于屏幕大小的容器html

<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>

来源

2014-02-07 Java Learner

伙计，沟表... –

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

首先，只能用于真正的表格，比如时间表，或者你会用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（即风格=“COLOR：红色;”东西），但我有一个额外的文件中的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年拿起书或教程，你会学到错误的东西，你会学习坏习惯和行为。它可能会工作（表格布局），但你不会有任何乐趣，也无法用这些知识创建好的网站。

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

你的问题有点像“我怎么建一辆车？我不知道！”。对这类问题没有很好的答案。

我希望我能帮忙。 :)

来源

2014-02-07 17:02:30 user692

多数民众赞成在很好的解释和example.thankyou :)现在我会建立一个汽车后想法:) –