实践（1）--有关居中和定位

最新推荐文章于 2024-07-08 14:31:45 发布

srchange

最新推荐文章于 2024-07-08 14:31:45 发布

阅读量200

点赞数

文章标签：导航布局 background-position

本文链接：https://blog.csdn.net/srchange/article/details/45165597

版权

要想理解刚学到的知识，还得靠实践，于是找了个简单的企业首页PSD文件模仿了下。看着简单，但对于新手的我来说，还是遇到了不少问题。

1.简单好用的一列式排版布局

水平居中：先定义容器宽度，再使用margin:auto，比如：

html为：

</div>

</div>

css样式为：

#id {

width:1500px;

height:156px;

margin:auto;

}

这样整个header部分就居中了，再微调logo和导航就比较方便了。

2.background-position

作为一个新手，对导航条的样式做不到很好的控制，便偷懒直接切图，以插入背景图片的方式制作导航。一开始我是一个链接插入一张，最后发现每个hover都要改变背景颜色再切图太麻烦了，就想到用整张导航切图做背景，然后用background-position定位，这样只需插入两张图片。

还是以刚才的html为例：

所有的导航链接都放在一个名为header_nav的容器里，首先把导航图作为容器背景图，注意容器的大小要和导航图大小一致，这样每个链接才会出现在正确的位置。

#logo {
position:absolute;
top:48px;
left:0;
}
#header_nav {
float:right;
background-image:url(../images/nav.gif) ;
}
#header_nav a {
display:block;
width:140px;
height:156px;
float:left;
}

接下来就是改变点击时的背景，注意每次填充的背景图片的左上角会和填充元素的左上角重合，就像这样：

黑色是链接的地方，红色是点击时的背景图，点击a1~a6不同位置时，插入的背景图片都是从点击的当前位置开始，所以要想确保点击时背景图位置正确，需要使用background-position: x y （本例中需要背景图向左平移，因此x为负数）

#header_nav a:hover {
background-image:url(../images/nav_hover.gif);
}
#a1 {background-position:0 0;}
#a2{background-position:-140px 0;}
#a3{background-position:-280px 0;}
#a4{background-position:-420px 0;}
#a5{background-position:-560px 0;}
#a6{background-position:-700px 0;}

3.background: url()路径问题

一开始我用的路径都是“images/ ”，导致背景图一直显示不了，后来查看发现是路径设置问题。

<img src="images/logo.jpg"> 表示当前路径下的images文件下的图片，

background-image:url(../images/nav.gif) 表示当前路径的上级的images子文件夹下的图片，也就是和当前脚本所在文件夹同级的images文件夹下的图片