zoukankan      html  css  js  c++  java
  • 使用div+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=gb2312" />
     5 
     6 <style type="text/css">
     7 
     8 
     9 #headNav {
    10     width:960px;
    11     height:30px;
    12     line-height:30px;
    13     background-color: lightblue;
    14     margin:0 auto;
    15 }
    16 
    17 #headNav ul {
    18     list-style:none;
    19 }
    20 
    21 #headNav ul li {
    22     float:left;
    23     height: 30px;
    24     line-height: 30px; 
    25     padding:0 10px;
    26 }
    27 
    28 #headNav ul li:hover {
    29     background-color: white;
    30 }
    31 
    32 a {
    33     color:red;
    34     text-decoration:none;
    35 }
    36 
    37 a:hover {
    38     
    39 }
    40 </style>
    41 
    42 </head>
    43 <body>
    44 <div id="headNav">
    45     <ul>
    46         <li><a href="#">首页</a></li>
    47         <li><a href="#">网页版式布局</a></li>
    48         <li><a href="#">div+css教程</a></li>
    49         <li><a href="#">div+css实例</a></li>
    50         <li><a href="#">常用代码</a></li>
    51     </ul>
    52 </div>
    53 </body>
    54 </html>

     注意:

    ①第12行即导航的div要设置其高度

  • 相关阅读:
    对 getaddrinfo Android 返回错误 EAI_BADFLAGS
    getaddrinfo详解
    使用moment.js管理时间
    ejs循环实例
    Express优化-合并路由
    Express重定向
    Express中间件
    express.Router创建模块化路由
    Express路由
    nodejs + express访问静态资源
  • 原文地址:https://www.cnblogs.com/wuyou/p/3374754.html
Copyright © 2011-2022 走看看