一款亮丽的导航,能给网站一个画龙点睛的作用。导航在指引用户搜寻内容时,还能改变用户浏览网站的心情,浏览网站也像一场旅行,有创意的导航栏让用户欣赏起来也会更加愉悦,增加对网站的兴趣。
本人不擅长美工制作,不过可以从某些漂亮的网站中提取不错的部分为自己所用,也为他人分享。今天这里为大家准备了一款天蓝色导航一起学习。
我们先看最终效果:
第一步:放置一个div作为导航主体部分
<div class="userPlaceMain"></div>
为其编写样式:
.userPlaceMain { clear: both; width:1200px height: 50px; line-height: 50px; background: #0090CE; padding: 0 20px; color: White; -moz-box-shadow: 5px 5px 10px #B7B7B7;