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

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

2024-01-27 00:01:02 前端知识 前端哥 431 454 我要收藏

🚀 个人主页 极客小俊
✍🏻 作者简介: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

首先,我们要借助PShover.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;
}

此时此刻,不管我们加多少文字在span标签中,都会自适应了

如图

素材图获取

"👍点赞" "✍️评论" "收藏❤️"

大家的支持就是我坚持下去的动力!

如果以上内容有任何错误或者不准确的地方,🤗🤗🤗欢迎在下面 👇👇👇 留个言指出、或者你有更好的想法,
欢迎一起交流学习❤️❤️💛💛💚💚

更多 好玩 好用 好看的干货教程可以 点击下方关注❤️ 微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇

转载请注明出处或者链接地址:https://www.qianduange.cn//article/506.html
评论
发布的文章

06-jquery函数

2024-02-06 15:02:47

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!