根据要求完成以下网页菜单： 1、使用无序列表和超链接完成菜单； 2、鼠标悬停菜单后，菜单样式发生变化。

<!DOCTYPE html>

<html lang="en">



<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
    <style>
     {
     
     
	/* 取消默认设置 */
      padding: 0;
      margin: 0;
      text-decoration: none;
	/* 设置字体 */
      font-size: 20px;
    }
    ul li {
     
     
    /* 块元素 */
      display: block;
 	/* 浮动 */
      float: left;
	/* 宽高 */
      width: 150px;
      height: 77px;
	/* 外边距 */
      margin: 28px;
 	/* 边框 */
      border: 1px #000000 solid;
	/* 字体居中 */
      text-align: center;
    }
	ul li a{
     
     
     /* 字体颜色 */
      color: black;
    }
    ul li a:hover {
     
     
	/* 移入字体颜色 */
      color: #018001;
    }

    ul li:hover {
     
     
	/* 移入边框设置 */
      border: 1px #ffffff solid;
    }
  </style>
</head>

<body>
  <ul>
    <li><a href="javascript:;">
                <p><br>首页<br>Home</p>
      </a></li>
    <li><a href="javascript:;">
                <p><br>社区<br>SNS</p>
      </a></li>
    <li><a href="javascript:;">
                <p><br>技能<br>Skill</p>
      </a></li>
    <li><a href="javascript:;">
                <p><br>科学<br>Science</p>
      </a></li>
  </ul>
</body>
</html>

还没解决的问题：
1.能不能不用浮动
2.字体能不能调整为自适应边框

根据要求完成以下网页菜单： 1、使用无序列表和超链接完成菜单； 2、鼠标悬停菜单后，菜单样式发生变化。

猜你喜欢