小学生居然都会用CSS2.0+PS切片开发自适应文字圆角滑动门导航栏【附完整代码】

原创于 2024-01-17 13:32:18 发布 · 990 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#HTML #CSS #静态页面布局 #前端开发 #background背景精灵 #开发技巧 #企业级应用开发

CSS应用场景开发与技巧专题专栏收录该内容

11 篇文章

订阅专栏

本文介绍了如何使用HTML和CSS实现导航栏的圆角布局，通过两种方法：方法1利用背景图片和hover效果，方法2则通过PS切片处理图片素材以实现文字自适应。作者还提供了详细的步骤和示例代码。

🚀 个人主页 极客小俊
✍🏻 作者简介：web开发者、设计师、技术分享博主
🐋 希望大家多多支持一下, 我们一起学习和进步！😄
🏅 如果文章对你有帮助的话，欢迎评论 💬点赞👍🏻 收藏 📂加关注

效果

我们先来看看效果吧!

布局技巧

其实也就是利用了html的层次结构来进行导航栏的布局，进而实现这种效果!

<li><a href=""><span>文字</span></a></li>

思路分析

其实这种布局，我们可以用很多种方式，来制作圆角,并且来达到文字的自适应,利用css背景定位显示,我也可以把左右圆角设置到a标签和span标签这两侧中间的背景则设置到li标签上,这样叠加显示呈现出圆角效果!

同时我们也可以利用PS切片来修改我们的素材,最后结合html层次关系结构来达到我们想要的效果也是可以的!

代码编写

方法1

html

<ul id="menu">
    <li><a href=""><span>Home</span></a></li>
    <li><a href=""><span>Browser Side</span></a></li>
    <li><a href=""><span>Server Side</span></a></li>
    <li><a href=""><span>Programming</span></a></li>
    <li><a href=""><span>XML</span></a></li>
    <li><a href=""><span>Web Building</span></a></li>
</ul>

css

#menu{
    list-style:none;
    width: 1000px;
    height: 35px;
    margin: 100px auto;
    padding: 0px;
    background: url("img/under.gif") repeat-x;
}

#menu>li{
    float: left;
    line-height: 35px;
    margin: 0px 30px;
}

#menu>li>a{
    text-decoration: none;
    display: block;
}


#menu>li>a>span{
    color: white;
    display: block;
    margin-left: 10px;
    padding-right: 10px;
}

#menu>li>a:hover{
    background: url("img/hover.gif");
}

#menu>li>a:hover>span{
    background: url("img/hover.gif") right top;
}

但是这个方法有一个缺点，就是如果文字过于很多，那么就会造成一个问题!

如图

分析

这是因为文字过多之后，超过了我们的hover.gif这个图片素材导致的结果!

所以如果要避免这个问题，我们其实也可以利用html的层次结构做成另外一种形式!

方法2

首先，我们要借助PS把hover.gif这张图片处理一下!

我们可以把这张图片的左边和右边的边缘切出来,宽度不要太大，合适就好，这里我切10像素出来, 然后中间再切1像素左右就OK了!

左边

右边

中间我们切1像素 ~ 2像素

最后我们统一通过PS把选中的切片导出!

如图

然后我们把这3个位置的图片分别命名为left、right、center

如图

这样我们就处理好布局所需要的图片素材了!

那么接下来就是写代码阶段了,其实重点就是修改css代码,而html中的代码基本不用动!

代码如下

#menu{
    list-style:none;
    width: 1000px;
    height: 35px;
    margin: 100px auto;
    padding: 0px;
    background: url("img/under.gif") repeat-x;
}

#menu>li{
    float: left;
    line-height: 35px;
    margin: 0px 30px;
}

#menu>li>a{
    text-decoration: none;
    display: block;
}


#menu>li>a>span{
    color: white;
    display: block;
    margin-left: 10px;
    padding-right: 10px;
}

/*当鼠标移入的时候，要干什么*/
#menu>li:hover{
    background: url("img/center.jpg");
}

#menu>li>a:hover{
    background: url("img/left.jpg") no-repeat;
}

#menu>li>a:hover>span{
    background: url("img/right.jpg") right top no-repeat;
}