【CSS】CSS前期回顾（1）

在前两天学习了“定位”、“浮动”、“背景”和“超链接”等设置，在此做一个页面以对前几天的知识进行总结回顾。

1、HTML的Header部分

   

品摄影工作室

   

         
• 品牌故事

         
• 我的鉴证

         
• 技术支持

   

   

         

             

                   
• 拍摄景点

                   
• 品质服务

                   
• 婚嫁论坛

                   
• 价格社区

                   
• 旗下品牌/a>

             

             

                   
                   搜索
             

         

   

2、链接CSS文件

3、CSS部分

（1）对body元素整体设置

body
{
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:12px;
   line-height:1.5; /*行高为文字大小的1.5倍*/
   background-color:#444;
   margin:0;
}

（2）设置header块的显示

#header
{
   width:756px;
   margin:0 auto;/*居中对齐*/
   color:#bbb;
   position:relative;/*设置相对定位的目的是为了孩子绝对定位*/
}

此时效果如下：

（3）设置标题

#header h1
{
   margin:10px 0;
height:63px;
background-p_w_picpath:url(p_w_picpaths/titlebg.jpg);
background-repeat:no-repeat;
}
#header h1 span
{
   display:none;/*把h1中的字隐藏掉*/
}

此时效果如下：

（4）设置顶部菜单

#topMenu
{
   margin:0;
   padding:0;
   position:absolute;/*相对于父header进行绝对定位*/
   right:0;
   top:50px;
   list-style-type:none;
}
#topMenu li
{
   float:left;
   border-left:1px white solid;
}
#topMenu li.firstChild
{
   border:none;/*去掉顶部菜单最左边的竖条*/
}
#topMenu li a
{
   padding:0 10px;
   color:white;
   text-decoration:none;
}
#topMenu li a:hover
{
   background-color:#000;
}

此时效果如下：

（5）设置主菜单

#mainMenu
{
   color:000;
   width:500px;
}
#mainMenu li
{
   float:left;
   list-style-type:none;
   border-left:1px #aaa solid;
   border-right:1px #eee solid;/*左边框颜色比右边框颜色浅的原因是使竖条产生立体感*/
   background-color:#ccc;
}
#mainMenu li.firstChild
{
   border-left:none;
}
#mainMenu li a
{
   display:block;
   padding:5px 10px;
   color:#333;
   text-decoration:none;
}
#mainMenu li a:hover
{
   background-color:#eee;
}

此时的效果如下：

可以看出主菜单的右边还有一个比较突出的竖条，现在去掉：

I、对

class="lastChild">旗下品牌/a>

增加类别选择器

II、增加CSS样式

#mainMenu li.lastChild
{
   border-right:none;
}

效果如下：

待续....