🚀 个人主页 极客小俊
✍🏻 作者简介: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;
}
此时此刻,不管我们加多少文字在span标签
中,都会自适应了
如图
素材图获取
"👍点赞" "✍️评论" "收藏❤️"
欢迎一起交流学习❤️❤️💛💛💚💚
好玩 好用 好看
的干货教程可以
点击下方关注❤️
微信公众号❤️
说不定有意料之外的收获哦..🤗嘿嘿嘿、嘻嘻嘻🤗!
🌽🍓🍎🍍🍉🍇