Html-DW（4）div & css 设计head底部横条内容

Html代码：

<div id="header_b">

              <div class="menu"><a href="#">首页</a></div>

              <div class="menu"><a href="#">新闻</a></div>

              <div class="menu"><a href="#">英超</a></div>

              <div class="menu"><a href="#">社会</a></div>

           </div>

CSS样式：

#header_b{width:968px;height:20px;background-color:#FF0;float:left;font-size:12px;line-height:20px} 

/*定义header_b - class定义的; float:left保证左对齐，没有跳行;text-align:center表示文字居中*/

class标记的，必须要点语法

.menu{width:200px;height:20;float:left;text-align:center}

/*定义menu的a标签,text-decoration表示设计下划线*/

.menu a{color:#FFF;text-decoration:none}

/*定义menu中a标签被鼠标滑过时的状态 加粗且背景变色*/

.menu a:hover{font-weight:bolder;background-color:#F00}

效果：

实际上现在的网页多数都是大div套小div的

http://edu.51cto.com    来自51cto的教学