zoukankan      html  css  js  c++  java
  • 《精通CSS》一个下拉菜单的例子

          这个例子是下拉菜单的,我进行了一点点改动,原理的确很简单,但是作者的代码层次感很清楚,值得学习;另外一点,作者在交互过程中的颜色变化,甚至精确到边框线之间的变化,虽然从旁观者的角度看基本上看不出来这个有什么变化,但是这种细致入微的思考和设计是值得学习和思考的,所谓细微之处方见技艺是否成熟,我觉得这是有道理的!不说了,上代码:

      1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      2 <html xmlns="http://www.w3.org/1999/xhtml">
      3 <head>
      4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      5 <title>滑动门航条</title>
      6 <style type="text/css">
      7     *{margin:30 0;padding: 0;list-style: none;}
      8     ul.main,ul.main ul{
      9         float:left;
     10         border:1px solid #486B02;
     11         background-color:#8BD400;
     12         }
     13     ul.main li{
     14         float:left;
     15         width:120px;
     16         height:30px;
     17         line-height:30px;
     18         text-align:center;
     19         }
     20     ul.main li ul{
     21         width:120px;
     22         position:absolute;left:-999em;
     23         }
     24     ul.main li:hover ul{
     25         left:auto;//AUTO时它会自动悬浮在下方
     26         }
     27     ul.main a{
     28         display:block;
     29         color:#2B3F00;
     30         border-left:1px solid #E4FFD3;
     31         border-right:1px solid #486B02;
     32         text-decoration:none;
     33         }
     34     ul.main li li a{
     35         border-top:1px solid #E4FFD3;
     36         border-bottom:1px solid #486B02;
     37         border-left:0;
     38         border-right:0;
     39         }
     40     ul.main li:last-child a{
     41         border-bottom:0;
     42         border-right:0;
     43         }
     44     ul a:hover,ul a:focus{
     45         color:#E4FFD3;
     46         background-color:#6DA203;
     47         }
     48 </style>
     49 </head>
     50 <body>
     51     <ul class="main">
     52         <li><a href="#" class="selected">首页</a></li>
     53         <li><a href="#">教学</a>
     54             <ul>
     55                 <li><a href="#">本科生教学</a></li>
     56                 <li><a href="#">研究生教学</a></li>
     57                 <li><a href="#">中小学教学</a></li>
     58                 <li><a href="#">远程教育</a></li>
     59             </ul>
     60         </li>
     61         <li><a href="#">科研</a>
     62             <ul>
     63                 <li><a href="#">论文发表</a></li>
     64                 <li><a href="#">实验室</a></li>
     65                 <li><a href="#">产品展示</a></li>
     66             </ul>
     67         </li>
     68         <li><a href="#">后勤</a>
     69             <ul>
     70                 <li><a href="#">规章制度</a></li>
     71                 <li><a href="#">资料下载</a></li>
     72                 <li><a href="#">设施开放时间</a></li>
     73                 <li><a href="#">通知公告</a></li>
     74             </ul>
     75         </li>
     76         <li><a href="#">安全保障</a>
     77                <ul>
     78                 <li><a href="#">保卫处</a></li>
     79                 <li><a href="#">网上报警</a></li>
     80                 <li><a href="#">案件公示</a></li>
     81             </ul>
     82         </li>
     83         <li><a href="#">关于我们</a>
     84                <ul>
     85                 <li><a href="#">学校简介</a></li>
     86                 <li><a href="#">校歌校徽</a></li>
     87                 <li><a href="#">校内导航</a></li>
     88                 <li><a href="#">学校历史</a></li>
     89                 <li><a href="#">学校荣誉</a></li>
     90             </ul>
     91         </li>
     92         <li><a href="#">联系我们</a>
     93             <ul>
     94                 <li><a href="#">写邮件</a></li>
     95                 <li><a href="#">联系电话</a></li>
     96                 <li><a href="#">校区地址</a></li>
     97             </ul>
     98         </li>
     99     </ul>
    100 </body>
    101 </html>
  • 相关阅读:
    Microsoft NLayerApp“.NET研究”案例理论与实践 项目简介与环境搭建 狼人:
    .NET中的“.NET研究”异步编程:使用F#简化异步编程 狼人:
    ASP.NET MV“.NET研究”C3 基础教程 – Web Pages 1.0 狼人:
    引用“.NET研究”类型赋值为null与加速垃圾回收 狼人:
    使用WCF实现SOA面向服务编程“.NET研究”—— 架构设计 狼人:
    MEF——.NET中值“.NET研究”得体验的精妙设计 狼人:
    Silverlight“.NET研究” 2.5D RPG游戏技巧与特效处理:(十)空间分层战斗系统 狼人:
    再次分享一个多选文件上传方案“.NET研究” 狼人:
    C#中标准Dis“.NET研究”pose模式的实现 狼人:
    .NET中的异步编程 IO完成端口以及FileStream.“.NET研究”BeginRead 狼人:
  • 原文地址:https://www.cnblogs.com/fanyj/p/4122382.html
Copyright © 2011-2022 走看看