三好街做网站的,wordpress新闻列表如何制作,中国建设银行网站的主要功能,网站做投票一款亮丽的导航#xff0c;能给网站一个画龙点睛的作用。导航在指引用户搜寻内容时#xff0c;还能改变用户浏览网站的心情#xff0c;浏览网站也像一场旅行#xff0c;有创意的导航栏让用户欣赏起来也会更加愉悦#xff0c;增加对网站的兴趣。本人不擅长美工制作#xf… 一款亮丽的导航能给网站一个画龙点睛的作用。导航在指引用户搜寻内容时还能改变用户浏览网站的心情浏览网站也像一场旅行有创意的导航栏让用户欣赏起来也会更加愉悦增加对网站的兴趣。本人不擅长美工制作不过可以从某些漂亮的网站中提取不错的部分为自己所用也为他人分享。今天这里为大家准备了一款天蓝色导航一起学习。我们先看最终效果第一步放置一个div作为导航主体部分 div classuserPlaceMain/div 为其编写样式 .userPlaceMain
{clear: both;width:1200pxheight: 50px;line-height: 50px;background: #0090CE;padding: 0 20px;color: White;-moz-box-shadow: 5px 5px 10px #B7B7B7;box-shadow: 5px 5px 10px #B7B7B7;
} 注意此处-moz-box-shadow: 5px 5px 10px #B7B7B7; box-shadow: 5px 5px 10px #B7B7B7;为导航阴影部分此时导航效果如下第二步放置导航链接内容这里使用ul li无序列表 ullia iduserPlaceId_1 hrefhttp://xunwn.com/1010100 classuserPlaceMainUlLiHover主页/a|/lilia iduserPlaceId_2 hrefhttp://xunwn.com形象展示/a|/lilia iduserPlaceId_3 hrefhttp://xunwn.com/photo/1010100产品展示/a/li
/ul 现在需要将ul li向左浮动使用float:left .userPlaceMain ul li {float: left;margin-right: 10px;
} 此时导航效果如下离我们最后的效果不远了还差设置链接文字宽度、背景、间隔第二步设置链接文字宽度、背景、间隔 由于a标记为内联标记若需设置宽度需要使用其他处理方式这里使用display:inline-block即可设置宽度 .userPlaceMain ul li a
{text-shadow: 0 1px 0 rgba(0,0,0,0.3);color: White;display: inline-block;width: 100px;height: 100%;font-size: 15px;text-align: center;margin-right: 10px;
} 注意 text-shadow: 0 1px 0 rgba(0,0,0,0.3);是为文字增加阴影此项可不设置此时导航效果如下现在效果好多了吧还差最后一点处理就是导航鼠标滑动样式第三步设置导航鼠标滑动样式这里有两种方式一直接使用css伪类选择器:hover二javascript或者juqery控制链接文字css样式这里使用第一种更加简便 .userPlaceMain ul li a:hover{background: #0074A6;color:White; } 最终效果如下本人向来追求简单时尚的做法以后有空还会做更多的东西一起分享大家一起来学习吧OK今天告一段落thank you 原文地址http://xunwn.com/tgzp/1010100_6751 转载于:https://www.cnblogs.com/tangyifeng/p/4953018.html
