利用浮动做横向导航条

Original 2019-03-30 21:49:55 251
abstract:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS中的浮动</title> <style type="text/css">      ul li{   

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>CSS中的浮动</title>

<style type="text/css">

      ul li{

      list-style: none;

      width: 100px;

      height: 48px;

      line-height: 40px;

      text-align: center;

      background: #ccc;

      margin: 1px;

      float: left;

      }

      .l{

      width: 300px;

      height: 300px;

      background: red;

      float: right;

      }

      .clear{clear: both;}

    </style>

</head>

<body>

<ul>

   <li>html</li>

   <li>css3</li>

   <li>php</li>

   <li>javascript</li>

   <li>jquery</li>

</ul>


</body>

</html>


Correcting teacher:天蓬老师Correction time:2019-04-01 09:47:52
Teacher's summary:float可以改变块元素的显示特征, 例如本例中的<li>, 一旦浮动后, 就会沿着水平方向排列,因为脱离了文档流

Release Notes

Popular Entries