【CSS】CSS前期回顾（1）

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

1、HTML的Header部分

<div id="header">
<h1><span>品摄影工作室</span></h1>
<ul id="topMenu">
<li class="firstChild"><a href="#">品牌故事</a></li>
<li><a href="#">我的鉴证</a></li>
<li><a href="#">技术支持</a></li>
</ul>

<div id="mainMenuWrapper">
<div id="mainMenuWrapper2">
<ul id="mainMenu">
<li><a href="#">拍摄景点</a></li>
<li><a href="#">品质服务</a></li>
<li><a href="#">婚嫁论坛</a></li>
<li><a href="#">价格社区</a></li>
<li><a href="#">旗下品牌/a></li>
</ul>

<form id="searchBox" name="search" method="get" action="">
<input type="text" class="textfield" name="term" />
<button type="submit" id="submit" />搜索</button>
</form>
</div>
</div>
</div>

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-image:url(images/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、对<li class="lastChild"><a href="#">旗下品牌/a></li>增加类别选择器

II、增加CSS样式

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

效果如下：

待续....

本文转自qingkechina 51CTO博客，原文链接：http://blog.51cto.com/qingkechina/1261768，如需转载请自行联系原作者