a标签-导航练习

个人练习，各位大神勿笑。。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        
        ul{
            width: 810px;
            height: 50px;
            background-color:green;
            margin: 100px auto;
            list-style: none;
        }

        ul li{
            float: left;
            width: 90px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            margin-left: 10px;
        }

        ul li a{
            text-decoration: none;
            display: inline-block;
            width: 90px;
            height: 50px;
        }

        ul li a:visited{
            color:blue;
        }

        ul li a:hover{
            color: white;
            background-color:pink;
        }
        
    

    </style>
</head>
<body>
    <ul>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
        <li><a href="#">我是导航</a></li>
    </ul>
</body>
</html>

 
  <!DOCTYPE html 
  > 
 
 
  < 
  html 
  lang= 
  "en" 
  > 
 
 
  < 
  head 
  > 
 
 
  < 
  meta 
  charset= 
  "UTF-8" 
  > 
 
 
  < 
  meta 
  name= 
  "viewport" 
  content= 
  "width=device-width, initial-scale=1.0" 
  > 
 
 
  < 
  meta 
  http-equiv= 
  "X-UA-Compatible" 
  content= 
  "ie=edge" 
  > 
 
 
  < 
  title 
  >Document 
  </ 
  title 
  > 
 
 
  < 
  style 
  > 
 
 
  *{ 
 
 
  margin: 
  0; 
 
 
  padding: 
  0; 
 

   } 
 

     
 
 
  ul{ 
 
 
  width: 
  810px; 
 
 
  height: 
  50px; 
 
 
  background-color: 
  green; 
 
 
  margin: 
  100px 
  auto; 
 
 
  list-style: 
  none; 
 

   } 
 

 
  ul li{ 
 
 
  float: 
  left; 
 
 
  width: 
  90px; 
 
 
  height: 
  50px; 
 
 
  text-align: 
  center; 
 
 
  line-height: 
  50px; 
 
 
  margin-left: 
  10px; 
 

   } 
 

 
  ul li a{ 
 
 
  text-decoration: 
  none; 
 
 
  display: 
  inline-block; 
 
 
  width: 
  90px; 
 
 
  height: 
  50px; 
 

   } 
 

 
  ul li a:visited{ 
 
 
  color: 
  blue; 
 

   } 
 

 
  ul li a:hover{ 
 
 
  color: 
  white; 
 
 
  background-color: 
  pink; 
 

   } 
 

     
 

     
 

 
  < 
  / 
  style 
  > 
 
 
  </ 
  head 
  > 
 
 
  < 
  body 
  > 
 
 
  < 
  ul 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  < 
  li 
  >< 
  a 
  href= 
  "#" 
  >我是导航 
  </ 
  a 
  ></ 
  li 
  > 
 
 
  </ 
  ul 
  > 
 
 
  </ 
  body 
  > 
 
 
  </ 
  html 
  > 
 

猜你喜欢