编写可重用样式

网站的两个页面(index.html和detail.html )都拥有头部和商品推荐部分。因此头部和商品推荐部分的两个样式表是可以重用的。

【操作步骤】

第1步，首先观察一下头部的HTML结构，代码如下：

<div id="header">
	    <div class="contWidth">
	        <div class="search"></div>
		    <ul id="skin"></ul>
		    <a class="logo" href="#nogo"></a>
		    <div id="nav" class="mainNav"></div>
	    </div>
</div>

头部主要有四块内容：搜索框、皮肤切换、Logo和导航菜单。

第2步，为最外面的结构定义样式，CSS代码如下：

#header{
	    background: url("../images/headerbg.png") repeat-x scroll 0 0 #FFFFFF;
    height: 105px;
}
#header .contWidth {
    position: relative;
    height: 105px;
    margin: 0 auto;
    width: 990px;
    z-index: 100;
}

上面代码把头部宽度定义为990px，然后用margin :0 auto;使其能够居中显示。接下来为Logo、搜索框、皮肤切换和导肮菜单定义样式。

第3步，定义Logo部分样式。

Logo部分的HTM L代码如下：

<a class="logo" href="#nogo">

通过设计图，可知要将Logo放在最左边，即左浮动，CSS代码如下：

#header .logo {
    float: left;
    color: #FFF;
    line-height: 80px;
    margin-top: 50;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 10px;
}

第4步，定义搜索框样式。

搜索框的HTML代码如下：

<div class="search"> 
	    <input type="text" id="inputSearch" class="" value="请输入商品名称" />
</div>

在前面定义头部样式时，为#header .contWidth定义了position: relative;，相当于在<div class="contWidth">定义了一个定位包含框，那么在它里面的元素，可以使用position: absolute;将它定义在头部的任何位置，CSS代码如下：

#header .search {
    left: 281px;
    position: absolute;
    top: 23px;
}

第5步，定义皮肤样式。

与Logo部分一样，本部分采用float浮动方式使它显示在规定的位置，不过此时，使用的是右浮动，CSS代码如下所示：

/* 切换皮肤控件样式 */
#skin { 
	    float:right; 
	    margin:10px; 
	    padding:4px; 
	    width:120px; 
}

然后为ul元素内部的li元素添加样式，使之符合设计图的效果，代码如下：

#skin li { 
	    float:left; 
	    margin-right:4px; 
	    width:15px; 
	    height:15px; 
	    text-indent:-9999px; 
	    overflow:hidden; 
	    display:block; 
	    cursor:pointer; 
	    background-image:url("../images/theme.gif"); 
}

在上面CSS代码中，首先用float:left;语句使li元素横向排列，然后利用text-indent:-9999px;语句使文字显示到看不到的区城，最后给li元素添加背景图片。背景图片是预先合并好的，这样能节省网站的HTTP请求。

为了使不同的li元素显示不同的背景图，可以使background-position属性来定位背景图，代码如下：

#skin_0 { background-position:0px 0px; }
#skin_1 { background-position:15px 0px; }
#skin_2 { background-position:35px 0px; }
#skin_3 { background-position:55px 0px; }
#skin_4 { background-position:75px 0px; }
#skin_5 { background-position:95px 0px; }
#skin_0.selected { background-position:0px 15px; }
#skin_1.selected { background-position:15px 15px; }
#skin_2.selected { background-position:35px 15px; }
#skin_3.selected { background-position:55px 15px; }
#skin_4.selected { background-position:75px 15px; }
#skin_5.selected { background-position:95px 15px; }

第6步，定义导航菜单。

模仿搜索框样式，采用绝对定位方式使它显示在规定的位置。CSS代码如下：

.mainNav {
    position: absolute;
    top: 68px;
    left: 0;
    height: 37px;
    line-height: 37px;
    width: 990px;
    z-index: 100;
    background-color: #4A4A4A;
}
.mainNav .nav {
    display: inline;
    float: left;
    margin-left: 25px;
}
.mainNav ul li {
    float: left;
    display: inline;
    margin-right: 14px;
    position: relative;
    z-index: 100;
}
.mainNav ul li a {
    display: block;
    padding: 0 8px;
    font-weight: 700;
    color: #fff;
    font-size: 14px;
}

上面只是为一级菜单定义了样式，由于有的菜单有二级菜单，所以还需要做一些工作。为了便于设计，先观察菜单的HTML结构，代码如下：

<div id="nav" class="mainNav">
	    <ul class="nav">
		 <li><a href="#">首 页</a></li>
		 <li><a href="#">品 牌</a>
			<div class="jnNav">
				<div class="subitem">
					<dl class="fore">
						<dt>
							<a href="#nogo">品牌：</a>
						</dt>
						<dd>
							<em ><a href="#nogo">耐克</a></em>
							……
						</dd>
					</dl>
……

后面重复部分代码省略。在上面代码中，可以看到，二级菜单通过<div class="jnNav">包含框包含，在默认状态下隐藏显示，然后使用CSS设计二级菜单样式，详细代码如下所示：

.jnNav {
    background: #FFFFFF;
    border: 1px solid #B1B1B1;
    border-top: 0;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 37px;
    width: 474px;
    z-index: 1000;
    display: none;
}
.jnNav .subitem {
    float: left;
    height: auto !important;
    min-height: 100px;
    padding: 10px 12px;
    width: 450px;
}
.jnNav .subitem dl {
    border-top: 1px dashed #C4C4C4;
    overflow: hidden;
    padding: 8px 0;
    float: left;
}

与之前的设计原理类似，在二级菜单中，继续使用position、float等传统方式。现在，就可以看出网站头部的效果，如图1所示。

图1 头部设计效果