一个漂亮的导航,可以给站点起到关键的
作用。导航在引导
用户搜索内容的同时也可以改变用户
浏览网站的心情。浏览网站也像是一次旅行。创新的导航栏将让用户享受更多的乐趣,并增加对网站的兴趣。
我不擅长艺术制作,但是我可以从一些漂亮的网站中提取好的部分供自己使用,也可以供大家
分享。今天我们准备了一个天蓝色的导航,供大家一起
学习。
让我们先看看最终效果:
第一步:放置一个div作为导航的主要部分
xml代码将内容
复制到剪贴板。
为它写风格:
CSS代码将内容复制到剪贴板。
userplacemain。
{
清楚:两者;
宽度:1200px
身高:50px;
行高:50px;
背景:# 0090ce;
填充物:0 20px;
颜色:白色;
-moz盒阴影:5px 5px 10px # b7b7b7;
盒子的影子:5px 5px 10px # b7b7b7;
}
注意:这里-moz盒阴影:5px 5px 10px # b7b7b7;盒的影子:5px 5px 10px # b7b7b7;导航的阴影部分
此时,导航效果如下:
第二步:放置导航链接内容
这里使用UL Li无序列表。
xml代码将内容复制到剪贴板。
|主页
图像
显示|
产品展示
现在需要将UL Li浮动到左边,使用:浮动:向左
CSS代码将内容复制到剪贴板。
userplacemain UL Li {。
浮点数:左;
右边距:10px;
此时,导航效果如下:
它离我们的最终效果不远,链接
文本的宽度、背景和间隔没有
设置。
第二步:设置链接宽度、背景、间隔
因为标记是内联标记,如果需要设置宽度以使用其他
处理,则可以使用显示设置宽度:内联块。
CSS代码将内容复制到剪贴板。
userplacemain UL Li。
{
文字阴影:0 1px 0 RGBA(0,0,0,0.3);
颜色:白色;
显示:内联块;
宽度:100px;
身高:100%;
字体大小:15px;
文本对齐:中心;
右边距:10px;
}
注:文字阴影:0 1px 0 RGBA(0,0,0,0.3);添加阴影的文本,不设置此项
此时,导航效果如下:
现在效果更好了,最后要处理的是
鼠标的滑动样式。
第三步:设置导航鼠标滑动样式
有两种
方法。第一,直接使用CSS伪类选择器:悬停;2。Javascript或juqery
控制链接文本的CSS样式。这是第一条路,比较方便。
CSS代码将内容复制到剪贴板。
UL Li:悬停。userplacemain {背景:# 0074a6;颜色:白色;}
最终结果如下:
以上是本文的全部内容,希望能对大家有所帮助。