通过这次任务的练习我学到了很多，现将所学到的以及遇到的问题总结如下。
源码地址：http://pan.baidu.com/s/1kVB2VZL
下面出现的代码，都是摘自这个上面的源码
1、终于明白了absolute，relative，float的用法了，这三者结合在一起真的很强大。当然要注意的就是清除浮动了。
清除浮动所用的代码：
.clearfix {
*zoom:;
}
.clearfix:before, .clearfix:after {
display: table;
line-height:;
content: "";
}
.clearfix:after {
clear: both;
}
2、input元素当你用鼠标点击后，外面可能会出现一个方框，你可以使用下面的清除：
outline: none;
3、对于button元素，你设置了背景后，点击的时候周围会出现方框，如果你想去掉方框的话：
border: none;
4、即使你设置了元素的大小，但是，当你添加内容或者设置padding，margin的时候，又会发生改变，从而你得再次修改。不过这时你可以使用box-sizing,css中有一篇就是专门讲这个的，要注意不同的浏览器。
-moz-box-sizing: border-box; /*Firefox3.5+*/
-webkit-box-sizing: border-box; /*Safari3.2+*/
-o-box-sizing: border-box; /*Opera9.6*/
-ms-box-sizing: border-box; /*IE8*/
box-sizing:border-box;
5、before, after这两种伪元素的使用。可以用在添加图标啊，或者hover的时候，出现下划线上划线。
.query-info-1 li:hover:before,.query-info-1 li.cur:before{
content:'';
position:absolute;
top:-1px;
left:-1px;
width:110px;
height:4px;
background:#4388c9;
}
6、最受启发的就是第一组项目中的table的实现了，这里面包含很多的技术思想，很受启发
1）不用js实现点击后的效果的切换：
部分html代码
<li>
<input type="radio" name='tabs' id='tab1' checked >
<label for="tab1">项目一</label>
<div id='tab_menu1'>
<table>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
<tr><td>购买材料一</td><td>购买材料一</td><td>购买材料一</td> <td>购买材料一</td> </tr>
</table>
</div>
</li>
css代码
.project_tab_menu [id^='tab']:checked ~ [id^='tab_menu']{
display: block;
position:absolute;
width:403px;
border-radius:0 5px 5px;
padding:28px 40px 35px 38px;
left:;
top:40px;
font-size: 14px;
border: 1px solid #DDDDDD;
}
.project_tab_menu [id^='tab']:checked~label{/*当选中tab开头的id,则为其后面的label元素添加下面这些样式*/
position: relative;
z-index:;
border:1px solid #DDDDDD;
border-bottom: none;
background: #fff;
height:28px;
font-size: 14px;
}
[title~=flower]
{
background-color:yellow;
}
[attribute~=value] 选择器用于选取属性值中包含指定词汇的元素。
选择 titile 属性包含单词 "flower" 的元素，并设置其样式：
这一段程序其实是参考别人的，他很聪明，采用radio来实现不同的项目的选择。并将<label>下的table设置为不可见，这样，所有的radio就可以排成一排。当其中一个按钮被选中后，再将其对应的table设置为display:block显示出来。
7、input元素与文本对齐
一般情况下会选用:
vertical-align:middle;
但是有时候效果并不是很好
可以直接将input元素定位住
input{
position:absolute;
top:5px;
left:5px;
}
8、有时候在一行中，文字中间会有空格，这时候可以添加<span> </span>元素，而不用添加空格的字符编码。
9、有时候你可能要添加好几个图标，这时候可以选用一些行内元素插进去比如<i>,<span>等
10、设置table的线框和边距，不推荐使用<table border="1" cellspacing="0" cellpadding="0">使用这种出来的边框会比设置要粗一些，可以这样设置
.project table tr td{
border:1px solid #D6D6D6;
}
.project table{
border-collapse:collapse;
color:#64656A;
}
11、后面再写页面的时候，可以先设置reset.css,这样比较省时省力。