样式-田字格布局

最新推荐文章于 2024-03-07 10:41:41 发布

yuulongfei

最新推荐文章于 2024-03-07 10:41:41 发布

阅读量377

点赞数

分类专栏： java 文章标签： css

本文链接：https://blog.csdn.net/yuulongfei/article/details/118788466

版权

这篇博客通过CSS样式展示了如何创建一个田字格布局。利用浮动元素和百分比宽度，将页面划分为多个小格子，每个格子有不同的背景颜色，形成左上、右上、左下和右下的四部分布局。这种布局方式可以用于构建各种四宫格展示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<title>田字格布局</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="布尔教育 http://www.itbool.com" />
<style>

.board-contaner {
     width: 100%;
     height: 590px;
     border: 1px solid #5CC6EC;  /*  边框线  */
    background: #000;  /*  背景色  */
 }
 
.ltop
{
   width:9%;
   height:260px;
   background:red;
    float:left;
   border: 1px solid #5CC6EC;  /*  边框线  */
   margin:7px 6px;/*div 对象上下间距为10px,左右为0*/
}
 
.rtop
{
   width:9%;
   height:100px;
   background:blue;
   float:right;
   border: 1px solid #5CC6EC;  /*  边框线  */
}
 
.lbottom
{
   width:9%;
   height:260px;
   background:green;
   float:left;
   border: 1px solid #5CC6EC;  /*  边框线  */
   margin:7px 6px;/*div 对象上下间距为10px,左右为0*/
}

.rbottom
{
   width:10%;
   height:100px;
   background:yellow;
   float:right;
   bord