1 *{
  2     margin:0px;
  3     padding:0px;
  4 }
  5 
  6 body{
  7     background:#e5e6d0;
  8 }
  9 
 10 #header,#menu,#banner,#main,#footer{
 11     margin:0px auto;
 12     width:1200px;
 13 }
 14 #header{
 15     height:100px;
 16     background:#F0FFFF;
 17 }
 18 #header h1{
 19     float:left;
 20     margin-top:20px;
 21 }
 22 #header h1 a{
 23     /*margin:0px auto;可以使元素居中显示*/
 24     width:600px;
 25     height:100px;
 26     display:block;
 27     color:#996600;
 28     text-align:center;
 29     text-decoration:none;
 30 }
 31 #header ul{
 32     float:left;
 33     padding:50px 0px 0px 300px;
 34     list-style:none;
 35 }
 36 #header ul li{
 37     float:left;
 38     padding:0px 20px;
 39 }
 40 #header ul li a{
 41     color:#ff6600;
 42     text-decoration:none;
 43     font-size:20px;
 44 }
 45 #header ul li a:hover{
 46     color:#000;
 47     text-decoration:underline;
 48 }
 49 /* 万能的清除*/
 50 .clear{
 51     clear:both;
 52 }
 53 #menu{
 54     padding-top:3px;
 55 }
 56 #menu ul{
 57     list-style:none;
 58 }
 59 #menu ul li{
 60     float:left;
 61 }
 62 #menu ul li a{
 63     color:#660066;
 64     text-decoration:none;
 65     text-align:center;
 66     display:block;/*这句使center起作用*/
 67     width:135px;
 68     height:56px;
 69     line-height:56px;
 70     font-size:25px;
 71 }
 72 #menu ul li a:hover{
 73     background:#177cb7;
 74 }
 75 #menu ul li ul{
 76     display:none;
 77     width:135px;
 78     position:absolute;
 79     background:#C0c0c0;
 80 }
 81 #menu ul li:hover ul{
 82     display:block;
 83 }
 84 #menu ul li ul li{
 85     width:135px;
 86 }
 87 #menu ul li ul li a{
 88     width:135px;
 89 }
 90 #menu ul li ul li a:hover{
 91     background:#BBFFFF;
 92 }
 93 
 94 #main{
 95     padding:10px 10px;
 96 }
 97 #main .container{
 98     width:900px;
 99     float:left;
100 }
101 #main .container dl{
102     width:430px;
103     float:left;
104 }
105 #main .container dl h5,#main .product h5{
106     border-bottom:1px solid #000;
107     margin-bottom:15px;
108     font-size:25px;
109 }
110 #main .container dl h5 a{
111     margin:0 auto;
112     text-decoration:none;
113 }
114 #main .container dl dt{
115     float:left;
116     width:150px;
117 }
118 #main .container dl dt img{
119     border:1px solid #ccc;
120     width:150px;
121     height:250px;
122 }
123 #main .container dl.xuexiao{
124     margin-right:40px;
125 }
126 #main .container dl.xuexiao dd{
127     font-size:16px;
128     margin-left:25px;
129     float:left;
130     width:240px;
131     text-indent:2em;/*首行缩进*/
132 }
133 #main .container  dl.xinwen dd{
134     height:22px;
135     line-height:22px;
136     background:none;
137 }
138 #main .container dl.xinwen dd a{
139     color:#000000;
140     text-decoration:none;
141     padding-left:10px;
142 }
143 #main .container dl.xinwen dd span{
144     padding-left:10px;
145 }
146 #main .product{
147     padding-top:20px;
148 }
149 #main .product h5 a{
150     margin:0px auto;
151     text-decoration:none;
152 }
153 #main .product ul li{
154     float:left;
155     padding-left:10px;
156     list-style:none;
157 }
158 #main .product ul li a{
159     text-decoration:none;
160 }
161 #main .subMenu{
162     width:300px;
163     float:left;
164     margin:10px 0px;
165 }
166 #main .subMenu h5{
167     background:#19577c;
168     height:39px;
169     text-align:center;
170     color:#fff;
171     line-height:39px;
172 }
173 #main .subMenu ul li{
174     border-bottom:1px solid #d4d4d4;
175     background:#f1f1f1;
176     list-style:none;
177 }
178 #main .subMenu ul li a{
179     display:block;
180     text-align:center;
181     color:#000;
182     text-decoration:none;
183     background:none;
184     height:50px;
185     line-height:50px;
186     font-size:28px;
187 }
188 #main .subMenu ul li a:hover{
189     color:#177cb7;
190     background:none;
191 }
192 #footer{
193     background:#d1dce3;
194     height:50px;
195     line-height:50px;
196     font-size:25px;
197     text-align:center;
198 }

以上是CSS文件，主要分为header+menu+main+footer，其中main部分，分为container部分和右侧的一个SubMenu。Container部分包含两列一行，使用的是DLDD。

以下是HTML文件。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=GBK">
 5 <title>博客首页</title>
 6 <link rel="stylesheet" type="text/css" href="mycss.css"> 
 7 </head>
 8 <body>
 9     <div id="header">
10         <h1><a href="#">Xingzhui-###的博客</a></h1>
11         <ul>
12             <li><a href="#">设为首页</a></li>
13             <li><a href="#">加入收藏</a></li>
14         </ul>
15     </div>
16     <div id="menu" class="clear">
17         <ul>
18         <li><a href="#">一级菜单</a></li>
19         <li><a href="#">一级菜单</a>
20             <ul>
21                 <li><a href="#">二级菜单1</a></li>
22                 <li><a href="#">二级菜单2</a></li>
23                 <li><a href="#">二级菜单3</a></li>
24                 <li><a href="#">二级菜单4</a></li>
25             </ul>
26         </li>
27         <li><a href="#">一级菜单</a>
28             <ul>
29                 <li><a href="#">二级菜单1</a></li>
30                 <li><a href="#">二级菜单2</a></li>
31                 <li><a href="#">二级菜单3</a></li>
32                 <li><a href="#">二级菜单4</a></li>
33             </ul>
34         </li>
35         <li><a href="#">一级菜单</a></li>
36     </ul>
37     </div>
38     <div id="main" class="clear">
39         <div class="container">
40             <div class="news">
41                 <dl class="xuexiao">
42                     <h5><a href="#">个人简介</a></h5>
43                     <dt><img src="mypic.jpg" alt="图片"></dt>
44                     <dd>各位领导同事好，我是来自###的###，
45                     十分荣幸来参加这次见面会。我毕业于###，
46                     获得硕士学位。我的家乡在###，一个具有悠久历史的城市
47                     我平时喜欢看看小说，浏览新闻，也喜欢四处去旅游，
48                     开阔自己的视野。运动方面，我喜欢打篮球，以前也擅长乒乓球，
49                     但是有段时间没有练习了。非常高兴能够和各位同事一起工作，
50                     请大家多多指教，更好的完成工作。</dd>
51                 </dl>
52                 <dl class="xinwen">
53                     <h5><a href="#">最新动态</a></h5>
54                     <dd>
55                         <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
56                     </dd>
57                     <dd>
58                         <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
59                     </dd>
60                     <dd>
61                         <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
62                     </dd>
63                     <dd>
64                         <a href="#">我也不知道在说什么你妹的！</a><span>2015-10-12</span>
65                     </dd>
66                 </dl>
67             </div>
68             <div class="product clear">
69                 <h5><a href="#">精彩教程</a></h5>
70                 <ul>
71                 <li><a href="#">这里要设置连接！</a></li>
72                 <li><a href="#">这里要设置连接！</a></li>
73                 <li><a href="#">这里要设置连接！</a></li>
74                 <li><a href="#">这里要设置连接！</a></li>
75                 </ul>
76             </div>
77         </div>
78         <div class="subMenu">
79             <h5>友情链接</h5>
80             <ul>
81                 <li><a href="http://www.baidu.com" target="_blank">百度首页</a></li>
82                 <li><a href="http://www.jd.com">京东首页</a></li>
83                 <li><a href="http://www.runoob.com/">菜鸟教程</a></li>
84                 <li><a href="http://mail.163.com">163邮箱</a></li>
85                 <li><a href="http://www.cnblogs.com/xingzhui/">我的cnblog</a></li>
86                 <li><a href="#">子菜单子菜单</a></li>
87                 <li><a href="#">子菜单子菜单</a></li>
88                 <li><a href="#">子菜单子菜单</a></li>
89             </ul>
90         </div>
91     </div>
92     <div id="footer" class="clear">
93         <p>联系我：<a href="#">mhzhang1989@163.com</a></p>
94     </div>
95 </body>
96 </html>

以下是效果图：