纯css制作浅绿风格导航菜单

稿源：互联网 2022-07-03 11:43:53 点击： 1348 撤稿纠错

css做的浅绿风格导航，您也可以自定义。

以下讨论的是和相关的纯css制作浅绿风格导航菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 <meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" />
<meta name="description" content="www.zzjs.net,站长特效网，站长必备js特效及广告代码。大量高质量js特效，提供高质量广告代码下载,尽在站长特效网" />
  <TITLE>css设计浅绿风格导航，sky整理收集。</TITLE>
  <style type="text/css">
 div#BeautifulList{width:300px;margin:20px;font-family: Verdana;}
 #BeautifulList a{display:block;color:#BBE1E7;padding:10px 15px;background-color:#3DA2B6;border-bottom:dotted 1px #A8D3DA;font-size:12px;text-decoration:none;}
 #BeautifulList a:hover{color:#fff;background-color:#58AFC0; font-weight:bold; }
 #BeautifulList h1{margin:0;font-weight:normal;color:#fff;padding:15px;font-size:14px;background-color:#238298}
 #BeautifulFoot h2{color:white;margin:0; font-size:14px;padding:20px 10px;}
 /*圆角*/
 div.RoundedCorner{background: #3DA2B6}
 b.rtop, b.rbottom{display:block;background: #FFF}
 b.rtop b, b.rbottom b{display:block;height: 1px;overflow: hidden; background: #3DA2B6}
 b.r1{margin: 0 5px}
 b.r2{margin: 0 3px}
 b.r3{margin: 0 2px}
 b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
  </style>
 </HEAD>
 <BODY>
<a href="<#ZC_BLOG_HOST#>">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

  <div id="BeautifulList">
 <h1>站长特效网频道列表</h1>
 <a href="http://zzjs.net/">网站首页</a>
 <a href="http://zzjs.net/?cat=1">站长特效</a>
 <a href="http://zzjs.net/?cat=2">网页特效</a>
 <a href="http://zzjs.net/?cat=3">广告代码</a>
 <a href="http://zzjs.net/">rss订阅</a>
 <div id="BeautifulFoot" class="RoundedCorner">
 
 <h2>欢迎来到站长特效网</h2>
 <b class="rbottom"><b class="r4"></b><b class="r3"></b><b class="r2"></b><b class="r1"></b></b>
 </div>
  </div>
 </BODY>
</HTML>

关于纯css制作浅绿风格导航菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2016345162823.shtml方便下次再访问哦。

·上一篇： 漂亮JS导航菜单
·下一篇： CSS制作漂亮导航菜单

纯css制作浅绿风格导航菜单

文章分类LIST >>返回首页

最新游戏

最新新闻