nav

最新推荐文章于 2024-09-08 18:37:15 发布

dxm809

最新推荐文章于 2024-09-08 18:37:15 发布

阅读量147

点赞数

分类专栏： HTML & CSS

本文链接：https://blog.csdn.net/dxm809/article/details/104865858

版权

HTML & CSS 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" href="./css/reset.css" />
       <style>
           #container{
               width: 1000px;
               height: 1000px;
               background-color: lightgray;

           }
           #header{
               width: 1000px;
               height: 100px;
               background-color: orange;
           }
           #main{
               width: 1000px;
               height: 800px;
           }
           #footer{
               width: 1000px;
               height: 100px;
               background-color: lightblue;
           }
           #nav li{
               list-style-type: none;
               float: left;
               margin: 1px;
               background-color: grey;

           }
           #nav li a{
               display: block;
               width: 80px;
               height: 30px;
               text-align: center;
               line-height: 30px;

           }
           #nav li a:hover{
               background-color: red;
           }




       </style>
   </head>
   <body>
       <div id=container>
           <div id="header">
               <ul id="nav">
                   <li><a>item1</a></li>
                   <li><a>item2</a></li>
                   <li><a>item3</a></li>
                   <li><a>item4</a></li>
               </ul>
           </div>
           <div id="main">

           </div>
           <div id=footer></div>
       </div>
   </body>
</html>