當前位置：
首頁 >
浮动布局demo
發布時間：2023/12/13
42
豆豆
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>浮動布局</title><style type="text/css">*{margin: 0;padding: 0;}header{height: 150px;background: yellow;}nav{height: 30px;background: green;}.main{width: 1000px;background: red;/*height: 500px;*/margin: 0 auto;overflow: hidden;}/*兩列/三列布局*/.left{width: 200px;height: 300px;background: blue;/*display: inline-block;*/float:left; /*脫離文檔流 的布局方式*/}.right{width: 800px;height: 500px;background: pink;float: left;/*display: inline-block;vertical-align: top;*/}footer{height: 100px;background: gold;}/*多行多列布局*/.box{width: 240px;height: 100px;border: 1px black solid;float: left;margin: 10px;/*box-sizing: border-box;*/}</style></head><body><header></header><nav></nav><div class="main"><div class="left"></div><div class="right"><div class="content"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div></div></div><footer></footer></body>
</html>
?
轉載于:https://www.cnblogs.com/lhl66/p/7528294.html
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
- 上一篇： 招商银行中午休息吗？下午几点开始营业？
- 下一篇： 验证Oracle收集统计信息参数gran