zoukankan      html  css  js  c++  java
  • CSS网页菜单

      1 <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
      2     Inherits="WebUserControl" %>
      3 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      4 <html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
      5 <head>
      6     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
      7     <title>昆明**家政服务公司</title>
      8     <style type="text/css">
      9         *
     10         {
     11             border-style: none;
     12             border-color: inherit;
     13             border- 0;
     14             margin: 0;
     15             padding: 0;
     16             height: 51px;
     17         }
     18         body
     19         {
     20             font-family: arial, 宋体, serif;
     21             font-size: 12px;
     22         }
     23         #nav
     24         {
     25             line-height: 24px;
     26             list-style-type: none;
     27             background: #666;
     28         }
     29         #nav a
     30         {
     31             display: block;
     32              80px;
     33             text-align: center;
     34         }
     35         #nav a:link
     36         {
     37             color: #666;
     38             text-decoration: none;
     39         }
     40         #nav a:visited
     41         {
     42             color: #666;
     43             text-decoration: none;
     44         }
     45         #nav a:hover
     46         {
     47             color: #FFF;
     48             text-decoration: none;
     49             font-weight: bold;
     50         }
     51         #nav li
     52         {
     53             float: left;
     54              80px;
     55             background: #CCC;
     56         }
     57         #nav li a:hover
     58         {
     59             background: #999;
     60         }
     61         #nav li ul
     62         {
     63             line-height: 27px;
     64             list-style-type: none;
     65             text-align: left;
     66             left: -999em;
     67              180px;
     68             position: absolute;
     69         }
     70         #nav li ul li
     71         {
     72             float: left;
     73              180px;
     74             background: #F6F6F6;
     75         }
     76         #nav li ul a
     77         {
     78             wedisplay: block;
     79              156px;
     80             text-align: left;
     81             padding-left: 24px;
     82         }
     83         #nav li ul a:link
     84         {
     85             color: #666;
     86             text-decoration: none;
     87         }
     88         #nav li ul a:visited
     89         {
     90             color: #666;
     91             text-decoration: none;
     92         }
     93         #nav li ul a:hover
     94         {
     95             color: #F3F3F3;
     96             text-decoration: none;
     97             font-weight: normal;
     98             background: #C00;
     99         }
    100         #nav li:hover ul
    101         {
    102             left: auto;
    103         }
    104         #nav li.sfhover ul
    105         {
    106             left: auto;
    107         }
    108         #content
    109         {
    110             clear: left;
    111         }
    112          #topinfo li{float:right;list-style-type:none;
    113         }
    114         #topinfo  li a{text-decoration:none;
    115                       display:block;padding:5px;
    116 
    117         }
    118      
    119     </style>
    120     <script type="text/javascript"> 
    121 <!--        //--><![CDATA[//><!-- 
    122         function menuFix() {
    123             var sfEls = document.getElementById("nav").getElementsByTagName("li");
    124             for (var i = 0; i < sfEls.length; i++) {
    125                 sfEls[i].onmouseover = function () {
    126                     this.className += (this.className.length > 0 ? " " : "") + "sfhover";
    127                 }
    128                 sfEls[i].onMouseDown = function () {
    129                     this.className += (this.className.length > 0 ? " " : "") + "sfhover";
    130                 }
    131                 sfEls[i].onMouseUp = function () {
    132                     this.className += (this.className.length > 0 ? " " : "") + "sfhover";
    133                 }
    134                 sfEls[i].onmouseout = function () {
    135                     this.className = this.className.replace(new RegExp("( ?|^)sfhover\b"),
    136 "");
    137                 }
    138             }
    139         }
    140         window.onload = menuFix;
    141         //--><!]]> 
    142     </script>
    143 </head>
    144 <body>
    145     <table width="100%" >
    146     <tr><td width="85%"  class="style1"><h1 align="center">昆明**家政服务公司</h1></td>
    147         <td class="style1"><ul id="topinfo" ><li><a href="#">联系我们</a></li><li><a href="#">加入收藏</a></li><li><a href="#">设为首页</a></li></ul></td></tr>
    148         <tr>
    149             <td>
    150                 <ul id="nav">
    151                     <li><a href="#">产品介绍</a>
    152                         <ul>
    153                             <li><a href="#">产品一</a></li>
    154                             <li><a href="#">产品一</a></li>
    155                             <li><a href="#">产品一</a></li>
    156                             <li><a href="#">产品一</a></li>
    157                             <li><a href="#">产品一</a></li>
    158                             <li><a href="#">产品一</a></li>
    159                         </ul>
    160                     </li>
    161                     <li><a href="#">服务介绍</a>
    162                         <ul>
    163                             <li><a href="#">服务二</a></li>
    164                             <li><a href="#">服务二</a></li>
    165                             <li><a href="#">服务二</a></li>
    166                             <li><a href="#">服务二服务二</a></li>
    167                             <li><a href="#">服务二服务二服务二</a></li>
    168                             <li><a href="#">服务二</a></li>
    169                         </ul>
    170                     </li>
    171                     <li><a href="#">成功案例</a>
    172                         <ul>
    173                             <li><a href="#">案例三</a></li>
    174                             <li><a href="#">案例</a></li>
    175                             <li><a href="#">案例三案例三</a></li>
    176                             <li><a href="#">案例三案例三案例三</a></li>
    177                         </ul>
    178                     </li>
    179                     <li><a href="#">关于我们</a>
    180                         <ul>
    181                             <li><a href="#">我们四</a></li>
    182                             <li><a href="#">我们四</a></li>
    183                             <li><a href="#">我们四</a></li>
    184                             <li><a href="#">我们四111</a></li>
    185                         </ul>
    186                     </li>
    187                     <li><a href="#">在线演示</a>
    188                         <ul>
    189                             <li><a href="#">演示</a></li>
    190                             <li><a href="#">演示</a></li>
    191                             <li><a href="#">演示</a></li>
    192                             <li><a href="#">演示演示演示</a></li>
    193                             <li><a href="#">演示演示演示</a></li>
    194                             <li><a href="#">演示演示</a></li>
    195                             <li><a href="#">演示演示演示</a></li>
    196                             <li><a href="#">演示演示演示演示演示</a></li>
    197                         </ul>
    198                     </li>
    199                     <li><a href="#">联系我们</a>
    200                         <ul>
    201                             <li><a href="#">联系联系联系联系联系</a></li>
    202                             <li><a href="#">联系联系联系</a></li>
    203                             <li><a href="#">联系</a></li>
    204                             <li><a href="#">联系联系</a></li>
    205                             <li><a href="#">联系联系</a></li>
    206                             <li><a href="#">联系联系联系</a></li>
    207                             <li><a href="#">联系联系联系</a></li>
    208                         </ul>
    209                     </li>
    210                 </ul>
    211             </td>
    212         </tr>
    213     </table>
    214 </body>
    215 </html>
    View Code
  • 相关阅读:
    初识Qt基于http协议网页浏览
    初识Qt涂鸦板绘制
    初识Qt图片显示、平移及旋转
    初识Qt文字绘制
    初识Qt鼠标、键盘事件及定时器和随机数
    初识Qt窗口界面
    初识Qt布局管理器
    解决VC++6.0打开文件或添加文件到工程出错的问题
    asp.net动态添加GridView的模板列,并获取列值
    asp.net中下载文件的问题
  • 原文地址:https://www.cnblogs.com/tangchun/p/4497456.html
Copyright © 2011-2022 走看看