• 纯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">
    <head>
    <title>纯CSS打造漂亮的圆角边界导航_网页代码站(www.webdm.cn)</title>
    <style type="text/css">
    .outer ul {margin:3em; padding:0; list-style-type:none; background:transparent; height:3em;}
    .outer li {display:block; float:left;}
    .outer {display:block; position:relative; background:#eee; padding:2em; margin:20px 15px;}
    .xsnazzy {background:transparent;}
    .xsnazzy span {text-align:center; color:#fff; margin:0; font-weight:normal; padding-bottom:0.5em;}
    .xtop {display:block; background:transparent; font-size:1px;}
    .xb1, .xb2, .xb3, .xb4 {
    display:block; 
    overflow: hidden; 
    }
    .xb1, .xb2, .xb3 {height:1px;}
    .xb2, .xb3, .xb4 {background:#dd7; border-left:1px solid #fff; border-right:1px solid #fff;}
    .xb1 {margin:0 5px; background:#fff;}
    .xb2 {margin:0 3px; border-0 2px;}
    .xb3 {margin:0 2px;}
    .xb4 {height:2px; margin:0 1px;}
    .xboxcontent {display:block; background:#cc6; border:0 solid #fff; border-0 1px 1px 1px;}
    a.xmenu2, a.xmenu2:visited {display:block; text-decoration:none; 7em; font-size:0.9em;}
    a.xmenu2:hover {background:transparent; cursor:pointer;}
    a.xmenu2:hover span {color:#000;}
    a.xmenu2:hover .xboxcontent {background:#eee; border-color:#888; border-bottom:1px solid #eee;}
    a.xmenu2:hover .xb1 {background:#888;}
    a.xmenu2:hover .xb2, a.xmenu2:hover .xb3, a.xmenu2:hover .xb4 {background:#fff; border-color:#888;}
    .xboxcontentd {display:block; background:#cc6; border:0 solid #fff; border-1px 1px 0 1px; padding-top:5px;}
    a.xmenu2:hover .xboxcontentd {background:#eee; border-color:#888; border-top:1px solid #eee;}
    
    </style>
    </head>
    <body>
    
    <div class="outer">
    <ul>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b 
    
    class="xb4"></b></b><span class="xboxcontent">
    Paul<br />Cezanne</span>
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b 
    
    class="xb4"></b></b><span class="xboxcontent">
    Henri<br />WebDm.cn</span>
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b 
    
    class="xb4"></b></b><span class="xboxcontent">
    William<br />中文社区</span>
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b 
    
    class="xb4"></b></b><span class="xboxcontent">
    John<br />Constable</span>
    </b></a>
    </li>
    <li>
    <a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b 
    
    class="xb4"></b></b><span class="xboxcontent">
    Claude<br />网页代码站</span>
    </b></a>
    </li>
    </ul>
    </div>
    
    <div class="outer">
    <ul>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><span class="xboxcontentd">
    Paul<br />Cezanne</span>
    </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
    </li>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><span class="xboxcontentd">
    Henri<br />Matisse</span>
    </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
    </li>
    <li>
    <a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><span class="xboxcontentd">
    William<br />网页特效</span>
    </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
    </li>
    <li>
    <a class="xmenu2" href="/"><b class="xsnazzy"><span class="xboxcontentd">
    John<br />Constable</span>
    </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
    </li>
    <li>
    <a class="xmenu2" href="http://www.webdm.cn"><b class="xsnazzy"><span class="xboxcontentd">
    Claude<br />最新下载</span>
    </b><b class="xtop"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b></a>
    </li>
    </ul>
    </div>
    </body>
    </html>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/2d5964ae-4470-466f-b0ce-d7df47e16490.html

  • 相关阅读:
    【大数据面试之对线面试官】MapReduce/HDFS/YARN面试题70连击
    2021年最新版大数据面试题全面总结-持续更新
    Hbase性能优化百科全书
    【大数据面试题】Flink第一弹60连发
    DockerFile
    Docker容器数据卷
    Docker入门
    八、Sentinel服务保护框架
    七、Gateway高可用集群与动态网关
    五、Nacos集群部署实现原理
  • 原文地址:https://www.cnblogs.com/webdm/p/1958409.html
Copyright © 2020-2023  润新知