div+css完成蓝色vista设计风格css导航栏菜单实际效

日期:2021-01-20 类型:科技新闻 

关键词:小程序制作流程,抽奖小程序,微信小程序怎么开店,小程序码生成,小程序模版

本文案例讲述了div+css完成蓝色vista设计风格css导航栏菜单实际效果。共享给大伙儿供大伙儿参照。实际以下:

这是1款蓝色vista设计风格css导航栏菜单,第1眼看上去很空气的菜单,选用那种较为艳但不晃眼的蓝色做为菜单情况色,此外添加了1些电脑鼠标实际效果,在电脑鼠标滑上菜单的情况下,对应菜单项突显显示信息,情况产生转变,CSS编码还可有再提升的室内空间,期待大伙儿喜爱。

运作实际效果以下图所示:

线上演试详细地址以下:

http://demo.jb51.net/js/2015/div-css-vista-style-blue-nav-menu-codes/

实际编码以下:

拷贝编码
编码以下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>蓝色vista设计风格css导航栏菜单</title>
<style type="text/css">
<!--
body{font:12px Arial,Verdana,Tahoma,"宋体";}
*{padding:0px;margin:0px;}
* li{list-style:none;}
a{text-decoration:none;color:#20557A;}
a:hover{text-decoration:underline;}
.menu_navcc{width:970px; margin:0 auto;}
.menu_nav{width:970px;height:55px;background:url(images/nav_bg.gif) repeat-x top;float:left;}
.menu_nav .nav_content{padding-left:4px;background:url(images/nav_l_bg.gif) no-repeat left top;float:left;}
.menu_nav .nav_content li{width:114px;height:55px;padding-left:10px;padding-right:10px;background:url(images/nav_li_right.gif) no-repeat right top;float:left;line-height:55px;text-align:center;font-size:14px;font-weight:bold;}
.menu_nav .nav_content li a{color:#fff;width:114px;height:55px;display:block;}
.menu_nav .nav_content li.current{line-height:55px;}
.menu_nav .nav_content li.current a,.menu_nav .nav_content li a:hover{width:114px;height:55px;background:url(images/nav_li_current.gif) no-repeat bottom;display:block;color:#000;}
.menu_nav_right{padding-right:20px;background:url(images/nav_r_bg.gif) no-repeat right top;float:right;margin-left:50px;padding-top:13px;height:23px;padding-bottom:12px;}
p{
margin-bottom:15px}
-->
</style>
</head>
<body style="text-align:center">
<div style="height:100px;"></div>
<div style="clear:both"></div>
<!--nav,start-->
<div class="menu_navcc">
<div class="menu_nav">
<ul class="nav_content">
<li class="current"><a href="#"><span>主页</span></a></li>
<li><a href="#"><span>广告宣传编码</span></a></li>
<li><a href="#"><span>CSS实例教程</span></a></li>
<li><a href="#"><span>导航栏菜单</span></a></li>
<li><a href="#"><span>源代码免费下载</span></a></li>
<li><a href="#"><span>网页页面殊效</span></a></li>
</ul>
<div class="menu_nav_right"></div>
</div>
</div>
<!--nav,end-->
</body>
</html>

期待本文所述对大伙儿的div+css程序流程设计方案有一定的协助。