根据CSS制做天蓝色导航栏菜单

日期:2021-03-04 类型:科技新闻 

关键词:自助建站免费建站平台,网站的建设服务,自助建站平台,如何自己建网站,怎么建设网站

1款亮丽的导航栏,能给网站1个画龙点晴的功效。导航栏在指引入户寻找內容时,还能更改客户访问网站的情绪,访问网站也像1场旅游,有艺术创意的导航栏栏让客户赏析起来也会更为愉悦,提升对网站的兴趣爱好。

自己不善于美工制做,但是能够从一些好看的网站中提取非常好的一部分为自身所用,也为别人共享。今日这里为大伙儿提前准备了1款天蓝色导航栏1起学习培训。

大家先看最后实际效果:

第1步:置放1个div做为导航栏行为主体一部分

XML/HTML Code拷贝內容到剪贴板
  1. <div class="userPlaceMain"></div>  

为其撰写款式:

CSS Code拷贝內容到剪贴板
  1. .userPlaceMain    
  2. {   
  3.     clearboth;   
  4.     width:1200px  
  5.     height50px;   
  6.     line-height50px;   
  7.     background#0090CE;   
  8.     padding: 0 20px;   
  9.     color: White;   
  10.     -moz-box-shadow: 5px 5px 10px #B7B7B7;   
  11.     box-shadow: 5px 5px 10px #B7B7B7;   
  12. }   

留意:此处-moz-box-shadow: 5px 5px 10px #B7B7B7;box-shadow: 5px 5px 10px #B7B7B7;为导航栏黑影一部分

此时导航栏实际效果以下:

第2步:置放导航栏连接內容

这里应用ul li无编码序列表

XML/HTML Code拷贝內容到剪贴板
  1. <ul>  
  2.      <li><a id="userPlaceId_1" href="#" class="userPlaceMainUlLiHover">首页</a>|</li>  
  3.      <li><a id="userPlaceId_2" href="#">形象展现</a>|</li>  
  4.      <li><a id="userPlaceId_3" href="#">商品展现</a></li>  
  5. </ul>  

如今必须将ul li向左波动,应用:float:left

CSS Code拷贝內容到剪贴板
  1. .userPlaceMain ul li {   
  2.    floatleft;   
  3.    margin-right10px;   
  4.   

此时导航栏实际效果以下:

离大家最终的实际效果不远了,还差设定连接文本宽度、情况、间距

第2步:设定连接文本宽度、情况、间距

因为a标识为内联标识,若需设定宽度必须应用别的解决方法,这里应用display:inline-block便可设定宽度

CSS Code拷贝內容到剪贴板
  1. .userPlaceMain ul li a    
  2. {   
  3.     text-shadow: 0 1px 0 rgba(0,0,0,0.3);   
  4.     color: White;   
  5.     displayinline-block;   
  6.     width100px;   
  7.     height: 100%;   
  8.     font-size15px;   
  9.     text-aligncenter;   
  10.     margin-right10px;   
  11. }   

留意:text-shadow: 0 1px 0 rgba(0,0,0,0.3);是为文本提升黑影,此项可不设定

此时导航栏实际效果以下:

如今实际效果许多了吧,还差最终1点解决,便是导航栏电脑鼠标拖动款式

第3步:设定导航栏电脑鼠标拖动款式

这里有两种方法,1.立即应用css伪类挑选器:hover;2.javascript或juqery操纵连接文本css款式,这里应用第1种,更为简单

CSS Code拷贝內容到剪贴板
  1. .userPlaceMain ul li a:hover{background#0074A6;color:White; }   

最后实际效果以下:

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助。