|
2、页面头部样式的修改
页面的头部区域是放置在一个id为header的div中，修改头部样式，需要修改CSS中对#header的定义。就header这个层，包括这个层以内的结构，我们需要清楚以下两点：
l 我们看到的空间名称、空间URL以及设为首页与复制URL的链接，统统都是放在一个id为spacename的div中的
l 页面导航条是一个无序列表，同时又放置在一个id为menu的div中
下面对照修改好的样式表逐条讲解一下：
#header {
background: url(headerimage_url) no-repeat left top;
/*重新定义header的背景图片，换为我们上一步得到的汽车图片*/
height: 310px;
/*重新定义header的高度，我们这个模板的头部比默认的要高一些*/
position: relative;
/*这句是为了使header内部的某些元素需要相对于header层绝对定位*/
}
/*标题*/
#spacename {
position: absolute;
left: 150px;
top: 80px;
/*将spacename层相对于header绝对定位，使之显示在汽车左侧的空旷的天空中*/
}
#spacename * {
color: #000;
/*spacename中所有文字显示为黑色，这样看起来醒目一些*/
}
/*导航*/
#menu {
background: #000;
/*导航条的颜色为黑色*/
height: 35px;
width: 750px;
/*重新定义导航条的宽度与高度*/
position: absolute;
left: 0;
top: 275px;
/*将导航条相对于header绝对定位，使之显示在header的底部*/
}
#menu ul {
margin: 0;
/*去除导航ul的边距，因为在默认模板中是有边距的*/
}
#menu li a {
padding: 0;
height: 35px;
line-height: 35px;
background-image: none !important;
/*以上这几句是对导航链接的重新定义，去处了原有的背景图片，重新定义了宽度和高度*/
}
#menu a:hover {
background: #EDF1D7;
color: #D0824C;
/*当鼠标滑过导航链接时的样式*/
}
现在，页面的头部样式已经完全改好了，与“黄色成熟”模板的CSS相结合，在细节上再修饰一下，一套新的汽车风格的模板便可以付诸使用了。当然，本文给出的只是一次简单的小修改，要充分体会到X-Space强大的模板定制功能，制作出更复杂精致的模板，还需要我们继续学习，不断探索。
| 
评论加载中…
