DIV+CSS页面布局练习

最新推荐文章于 2024-06-02 13:03:01 发布

Abenazhan

最新推荐文章于 2024-06-02 13:03:01 发布

阅读量2.4k

点赞数 2

分类专栏： CSS

本文链接：https://blog.csdn.net/Abenazhan/article/details/72818485

版权

CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<html>

<head>

<style>

body{text-align:center;}

div.qq{width:960px;height:1500px;background:yellow;margin:0 auto;text-align:left;} //定义整个页面居中

div.llz{width:750px;height:400px;background:black;float:left;} //定义两列布局，第一列左侧浮动    

div.lly{width:200px;height:400px;background:black;float:right;} //定义两列布局，第二列左侧浮动 

div.slz{width:310px;height:400px;background:gray;float:left;margin-right:15px;margin-top:20px;}//定义三列布局，第一列左侧浮动 

div.slc{width:310px;height:400px;background:gray;float:left;margin-right:15px;margin-top:20px;} //定义三列布局，第二列在第一列旁

div.sly{width:310px;height:400px;background:gray;float:right;margin-top:20px;}//定义三列布局，第三列右侧浮动

div.box{width:200px;height:50px;background:pink;float:left;margin-left:10px;margin-top:10px;}//定义多列布局，全部左侧浮动

</style>

</head>

<body>

<div class="qq">

<div class="llz"></div>

<div class="lly"></div>

<div class="slz"></div>

<div class="slc"></div>

<div class="sly"></div>

<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 class="box"></div>

<div class="box"></div>

<div class="box"></div>

</div>

</body>

</html>