链接中的这节课不需要绝对定位貌似也可以实现??


http://www.imooc.com/code/276在这节课中不需要绝对定位貌似也可以实现??


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{margin:0px; padding:0px}


 #a{background-color: #CCCCCC; width:600px; height:40px; margin:0 auto;}

 ul{list-style:none;}

 ul li{float: left; line-height:40px; text-align:center; width:100px;}

 a{color: #FFFFFF; text-decoration:none;  background-color: #CCCCCC; width:100px;display:block;}

 a:hover{color: #000000; background-color: #00FFFF;}

 ul li ul{ display:none;}

  ul li ul li{ margin-top:2px;}

 ul li:hover ul{ display: block;}

  



</style></head>

<body>

<div id="a">

<ul>

  <li><a href="#">首页</a></li>

  <li><a href="#">课程大厅</a>

   <ul>

      <li><a href="#">视频学习</a></li>

      <li><a href="#">案例学习</a></li>

      <li><a href="#">交流平台</a></li>

    </ul>

  </li>

  <li><a href="#">学习中心</a>

  <ul>

      <li><a href="#">视频学习</a></li>

      <li><a href="#">案例学习</a></li>

      <li><a href="#">交流平台</a></li>

    </ul>

  </li>

  <li><a href="#">经典案例</a></li>

  <li><a href="#">关于我们</a></li>

</ul></div> 

</body>

</html>


夏不语冰
浏览 1023回答 1
1回答

刚毅87

布局方式有一下几种: 1.浮动布局; 2.定位布局; 3.固定布局; 4.响应式布局; 5.弹性布局。一种布局效果,可以用多种方式实现,不要拘泥于形式.
打开App,查看更多内容
随时随地看视频慕课网APP