文件管理 · 2022年8月16日

css3仿windows网站导航菜单|用html5和css3做一个网页导航有高手吗我需要帮助😭

『壹』 Windows8 Metro菜单的这个显示效果用CSS3或js怎么实现

给li 标签加一个浮动属性和一个边界就可以了,代码如下:<html ><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><style type="text/css">.fa{ width:340px; }ol{ list-style:none; margin:0px; padding:0px;}li{ float:left; width:100px; height:50px; background:#0F0; margin:5px; }.fg{ width:45px; }</style></head><body><div class="fa"> <ol> <li>1</li> <li>2</li> <li class="fg">3</li> <li class="fg">4</li> <li>5</li> <li>6</li> <li class="fg">7</li> <li class="fg">8</li> <li>9</li> <li>10</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> </ol></div></body></html>

『贰』 网页css导航栏样式的问题

<!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=utf-8" /><script language="javascript" type="text/javascript">var $c=function(array){var nArray = [];for (var i=0;i<array.length;i++) nArray.push(array[i]);return nArray;}; Array.prototype.each=function(func){for(var i=0,l=this.length;i<l;i++) {func(this[i],i);};}; document .getElementsByClassName=function(cn){// var hasClass=function(w,Name){ var hasClass = false; w.className.split(' ').each(function(s){ if (s == Name) hasClass = true; }); return hasClass; }; var elems =document.getElementsByTagName("*")||document.all; var elemList = []; $c(elems).each(function(e){ if(hasClass(e,cn)){elemList.push(e);} }) return $c(elemList); }; window.onload=function(){var a=document.getElementsByClassName("nav")[0].getElementsByTagName("a");for(var i=0;i<a.length;i++){a[i].onfocus=function(){this.blur();}a[i].onclick=function(){for(var j=0;j<a.length;j++){a[j].className="";};this.className="current";}}}</script><title>菜单测试页面</title></head><body><style type="text/css"><!–.nav{ MARGIN: 1px 0; WIDTH: 100%; FONT-FAMILY: verdana; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B; font-family:Arial, Helvetica, sans-serif; font-size:12px;}.nav UL { PADDING: 0px; DISPLAY: block; MARGIN: 0px; LIST-STYLE-TYPE: none; HEIGHT: 21px; BACKGROUND-COLOR: #970B0B; COLOR: #ffffff; }.nav LI { BORDER-RIGHT: #ffffff 1px solid; DISPLAY: block; FLOAT: left; HEIGHT: 21px; font-family:Arial, Helvetica, sans-serif; font-size:12px;}.nav LI A { PADDING:1px 15px 0; DISPLAY: block; FONT-WEIGHT: none; COLOR: #ffffff; LINE-HEIGHT: 20px; TEXT-DECORATION: none;}.nav LI A:hover { COLOR:#562505; BACKGROUND-COLOR:#FF6600; TEXT-DECORATION: none;}.current{ color:#ffffff; background:#FF9900;}.nav li#date{ color:#ffffff; PADDING:2px 15px 0; }–></style><DIV class="nav"> <UL> <LI><A href="#">首页</A></LI> <LI><A href="#">对公签约</A> </LI> <LI><a href="#" class="current">个人签约</a> </LI> <LI><A href="#">支付项目</A> </LI> <LI><A href="#">数字证书</A> </LI> <LI><A href="#">My Web</A> </LI> <LI><A href="#">蓝色理想</A> </LI> <LI><A href="http://www.wxwdesign.cn">My Blog</A> </LI> </UL></DIV></body></html>

『叁』 用html5和css3做一个网页导航,有高手吗我需要帮助😭

最近在学这个,这几天做了几个网页导航。一般的话。就是几个div 加个logo 做个<ul><li>弄几个样式就可以了。

『肆』 css怎么实现导航菜单

你说的是不是浮动float?<style>li {float:left;width:150px;text-align:center;}</style><ul><li>导航一</li><li>导航二</li><li>导航三</li><li>导航4</li></ul>

『伍』 css3 menu 怎么使用

可以去下载网站下载安装,就可以使用。把产生的HTML和CSS打开,html复制到你网页中相应的位置。CSS复制到你的样式文件里就可以使用方法时里面有向导,很方便你做出多种导航栏样式,可以作为参考只要输入文字调整好颜色,很快就制作出好看的CSS网页导航菜单来来!然后软件有自动发布的功能导出标准的 html + css 文件

『陆』 CSS导航栏

先把这段去掉,这段对CSS的影响很大,会导致很多的样式和特效读取不出来.<!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"> <!– DW6 –>

『柒』 CSS3+Html5做一个导航栏的效果,如图

数字是动态变化的,所以肯定是浮动在上面的。

『捌』 如何利用CSS样式自定义导航菜单

首先你要什么样的导航菜单,然后再根据需要去调整,你这样一问,谁会明白是怎么回事

『玖』 用DIV+CSS制作企业网站导航条

<!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=utf-8" /><title>CSS3的简约导航菜单 | jsfoot脚本特效 演示</title></head> <body> <div id="main"> <ul id="navigationMenu"><li> <a class="home" href="#"> <span>Home</span> </a> </li> <li> <a class="about" href="#"> <span>About</span> </a> </li> <li> <a class="services" href="#"> <span>Services</span> </a> </li> <li> <a class="portfolio" href="#"> <span>Portfolio</span> </a> </li> <li> <a class="contact" href="#"> <span>Contact us</span> </a> </li> </ul> </div> <link rel="stylesheet" type="text/css" href="styles.css" /> </body></html>CSS#navigationMenu li{ list-style:none; height:39px; padding:2px; width:40px; } #navigationMenu span{/* Container properties */ width:0; left:38px; padding:0; position:absolute; overflow:hidden; /* Text properties */ font-family:'Myriad Pro',Arial, Helvetica, sans-serif; font-size:18px; font-weight:bold; letter-spacing:0.6px; white-space:nowrap; line-height:39px; /* CSS3 Transition: */ -webkit-transition: 0.25s; /* Future proofing (these do not work yet): */ -moz-transition: 0.25s; transition: 0.25s; } #navigationMenu a{background:url('img/navigation.jpg') no-repeat; height:39px; width:38px; display:block; position:relative; } /* General hover styles */ #navigationMenu a:hover span{ width:auto; padding:0 20px;overflow:visible; }#navigationMenu a:hover{text-decoration:none; /* CSS outer glow with the box-shadow property */ -moz-box-shadow:0 0 5px #9ddff5; -webkit-box-shadow:0 0 5px #9ddff5; box-shadow:0 0 5px #9ddff5; } /* Green Button */ #navigationMenu .home { background-position:0 0;}#navigationMenu .home:hover { background-position:0 -39px;}#navigationMenu .home span{background-color:#7da315; color:#3d4f0c; text-shadow:1px 1px 0 #99bf31; } /* Blue Button */ #navigationMenu .about { background-position:-38px 0;}#navigationMenu .about:hover { background-position:-38px -39px;}#navigationMenu .about span{background-color:#1e8bb4; color:#223a44; text-shadow:1px 1px 0 #44a8d0; } /* Orange Button */ #navigationMenu .services { background-position:-76px 0;}#navigationMenu .services:hover { background-position:-76px -39px;}#navigationMenu .services span{background-color:#c86c1f; color:#5a3517; text-shadow:1px 1px 0 #d28344; } /* Yellow Button */ #navigationMenu .portfolio { background-position:-114px 0;}#navigationMenu .portfolio:hover{ background-position:-114px -39px;}#navigationMenu .portfolio span{background-color:#d0a525; color:#604e18; text-shadow:1px 1px 0 #d8b54b; } /* Purple Button */ #navigationMenu .contact { background-position:-152px 0;}#navigationMenu .contact:hover { background-position:-152px -39px;}#navigationMenu .contact span{background-color:#af1e83; color:#460f35; text-shadow:1px 1px 0 #d244a6; } 希望采纳!

『拾』 网页导航制作一个上拉菜单,css实现

这种东西网上很多,想懒人图库,脚本之家等什么的,javascript实现挺好的,调下兼容性就可以了。你看这个链接合适吗 http://www.jb51.net/article/5959.htm