如何適應基於屏幕大小的容器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 :)現在我會建立一個汽車後想法:) –