浮动例子之鉴赏
在浮动原理及清除浮动一文中(http://cherry360.blog.51cto.com/12176744/1864258),简单介绍了浮动的相关基础知识,为了巩固知识点,本篇结合代码展示关于浮动的几个常见例子。
例1:九格子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>九格子</title> <style> body,ul{ padding: 0; margin: 0; } .box{ width: 300px; height: 300px; margin: 100px auto; border-top: 1px solid #000; border-left: 1px solid #000; } .box li{ list-style: none; width: 99px; height: 99px; float: left; border-right: 1px solid #000; border-bottom: 1px solid #000; background: #9FC; text-align: center; line-height: 99px; } </style> </head> <body> <ul class="box"> <li><img src="http://img.baidu.com/hi/babycat/C_0002.gif" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0020.gif" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0003.gif" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0017.gif" ></li> <li><img src="//pic.ikafan.com/imgp/L3Byb3h5L2h0dHAvaW1nLmJhaWR1LmNvbS9oaS9iYWJ5Y2F0L0NfMDAwNC5naWY=.jpg" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0015.gif" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0005.gif" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0016.gif" ></li> <li><img src="http://img.baidu.com/hi/babycat/C_0006.gif" ></li> </ul> </body> </html>
显示结果:
例2:条纹
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>条纹</title> <style> body,ul{ padding: 0; margin: 0; } li{ list-style: none; } .box{ width: 500px; padding: 10px; background: #ccc; margin: 100px auto; } .box li { padding: 5px 0; height: 17px; } span{ height: 17px; float: left; } .left{ width:300px; background: yellow; } .right{ width: 200px; background: pink; } </style> </head> <body> <ul class="box"> <li> <span class="left"></span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="right"></span> </li> <li> <span class="left"></span> <span class="right"></span> </li> </ul> </body> </html>
显示结果:
例3:钢琴按键
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>钢琴按键</title> <style> body,ul{ margin: 0; padding: 0; } li{ list-style: none; } .list{ width: 732px; overflow: auto; border-top: 1px solid #999; border-left: 1px solid #999; margin: 100px auto; } .list li{ width: 60px; height: 180px; border-bottom: 1px solid #999; border-right: 1px solid #999; float: left; } li div { height: 100px; background: #000; color: #fff; } li .div2{ height: 50px; } </style> </head> <body> <ul class="list"> <li> <div>1</div> </li> <li> <div class="div2">2</div> </li> <li> <div>3</div> </li> <li> <div class="div2">4</div> </li> <li> <div>5</div> </li> <li> <div class="div2">6</div> </li> <li> <div>7</div> </li> <li> <div class="div2">8</div> </li> <li> <div>9</div> </li> <li> <div class="div2">10</div> </li> <li> <div>11</div> </li> <li> <div class="div2">12</div> </li> </ul> </body> </html>
显示结果:
一般情况,一个元素里边所有子元素结构和样式都是一样,那咱们就把这看成是1个列表。以上就是这种情况。
时间: 2024-10-29 19:05:37