初识DIV

　　十多天前北上帝都，开始自己的实习生生涯。

　　很幸运，找到了前端相关的工作，加上公司刚好有个项目打算上，就赶上了，跟着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 { 100; }
 4 td { 50; height: 50;}
 5 td { border: 2px solid blue; }
 6 #container { 500px;}
 7 #head { background-color: #99bbbb;}
 8 #menu { background-color: #ffff99;height: 200px; 100px;float: left;}
 9 #content { background-color: #eeeeee;height: 200px; 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;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;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>