浮动和盒状模型、定位是CSS重点和难点。浮动，就是让div样式层块，向左或向右（靠）浮动。
Float:left 靠左浮动；Float:right 靠右浮动；clear:both清除浮动，简单举例如下：
CSS样式如下：
.box1{ float:left width:200px height:300px background:#f00}/* 设置div对象浮动靠左*/.box2{ float:rightwidth:200px height:300pxbackground:#0f0}/* 设置div对象浮动靠右 */
.clear{ clear:both}/*清除浮动*/
html代码如下：
<div class="divcss5"><div class="box1">布局靠左浮动</div>
<div class="box2">布局靠右浮动</div>
<div class="clear"></div><!-- html注释：清除float产生浮动 -->
</div>
效果如下：
浮动利用好了，再结合相对定位，绝对定位，CSS排版基本上就能搞定了，细节的东西在实践中去体验吧。
这个你需要用到伪类 :hover
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
例子1
<style>a:hover {color: #FF00FF}
</style>
<a href="#">延时文本</a>
当鼠标移动到a标签上的时候，改变a标签的文字颜色
深入用法，当移动到某标签的时候改变其它标签的样式：
例子：
<ul class="dingjicaidan"><li>
<a href="#">
菜单
</a>
<ul class="tanchucaidan">
<li>
弹出菜单1
</li>
<li>
弹出菜单2
</li>
</ul>
</li>
</ul>
<style>
.tanchucaidan{ display:none} /*设置弹出菜单默认隐藏*/
.dingjicaidan li:hover ul{ display:block}
/*当鼠标移动到dingjicaidan下的li标签时，改变li下的ul标签的display属性（显示出来）*/
</style>
其实就这么简单，自己琢磨下吧，纯手打，望采纳！
