十多天前北上帝都，開始自己的實習生生涯。
很幸運，找到了前端相關的工作，加上公司剛好有個項目打算上，就趕上了，跟着PM開始了自己的前端之路。
但幾天下來，確實發現，無壓環境下學下產生的能力是很薄弱的。打算從頭開始構建自己的知識結構，從最簡單的東西開始。從最基礎的東西看起，這個文章分類也用來記錄自己在初學前端的過程中遇到的問題和自己的收獲，准前端工程師修煉。
下午花了一個下午的時間，看了Div的內容，自己用Div和Table布局了一個相似的東西。
代碼如下：
CSS部分
1 body { background: url(http://www.w3school.com.cn/i/eg_background.jpg); } 2 table { border: 10px solid blue; } 3 th {width: 100; } 4 td {width: 50; height: 50;} 5 td { border: 2px solid blue; } 6 #container {width: 500px;} 7 #head { background-color: #99bbbb;} 8 #menu { background-color: #ffff99;height: 200px;width: 100px;float: left;} 9 #content { background-color: #eeeeee;height: 200px;width: 400px;float: left;} 10 #footer { background-color: #99bbbb;clear: both;text-align: center;} 11 h1 { margin-bottom: 0;} 12 h2 { margin-bottom: 0;font-size: 18px;} 13 ul { margin: 0;} 14 li { list-style: none;} 15 #content li { color: blue;} 16 #content h2 { color: blue; background: url(http://www.w3school.com.cn/i/eg_background.jpg);}
HTML部分：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>這是一個Div和Table布局的頁面</title> 6 <link rel="stylesheet" type="text/css" href="./css/mystyle.css"> 7 </head> 8 <body> 9 <!-- 用Div布局 --> 10 <div id="container"> 11 <div id="head"> 12 <h1>This is a head!</h1> 13 </div> 14 <div id="menu"> 15 <h2>Menu</h2> 16 <ul> 17 <li>HTML</li> 18 <li>CSS</li> 19 <li>JavaScript</li> 20 </ul> 21 </div> 22 <div id="content"> 23 <h2>This is a content</h2> 24 <ul> 25 <li>HTML</li> 26 <li>CSS</li> 27 <li>JavaScript</li> 28 </ul> 29 </div> 30 <div id="footer">This is a footer</div> 31 </div> 32 <!-- 用table布局 --> 33 <table width="500" border="0"> 34 <tr> 35 <td colspan="2" style="background-color:#99bbbb"> 36 <h1>This is a head!</h1> 37 </td> 38 </tr> 39 <tr valign="top"> 40 <td style="background-color:#ffff99;width:100px;text-align:top"> 41 <h2>Menu</h2> 42 HTML<br /> 43 CSS<br /> 44 JavaSript<br /> 45 </td> 46 <td style="background-color:#EEEEEE;height:200px;width:400px;text-align:top;"> 47 <h2>This is a conter</h2> 48 HTML<br /> 49 CSS<br /> 50 JavaSript 51 </td> 52 </tr> 53 54 <tr> 55 <td colspan="2" style="background-color:#99bbbb;text-align:center;"> 56 This is a footer 57 </td> 58 </tr> 59 </table> 60 </body> 61 </html>