html 中div布局的简单使用

html中的布局非常重要，下面我来简单介绍一下。

操作方法

  • 01

    观察图片构成。总共十一个板块。首先要有一个大的div包含所有，背景色等。

  • 02

    .background{ background-color: #008000; height: 800px; width: 420px; margin: 0 auto; }

  • 03

    .a1{ height: 80px; width: 200px; background: #fff; margin-left: 50px; margin-top: 10px; margin-right: 10px; float: left;

  • 04

    .a2{height: 80px; width: 100px; background-color: #fff; margin-top: 10px; float: left; } .a3{ height: 80px; width: 310px; background-color: #FFFFFF; margin-left: 50px; margin-top: 10px; float: left; } .a4{ height: 80px; width: 310px; background-color: #FFFFFF; margin-left: 50px; float: left; margin-top: 10px;

  • 05

    .a5{ height: 80px; width: 150px; background: #fff; margin-left: 50px; margin-top: 10px; margin-right: 10px; float: left; } .a6{height: 80px; width: 150px; background-color: #fff; margin-top: 10px; float: left; } .a7{height: 50px; width: 310px; background-color: #fff; margin-top: 10px; margin-left: 50px; float: left; } .a8{ height: 80px; width: 150px; background: #fff; margin-left: 50px; margin-top: 10px; margin-right: 10px; float: left; }

  • 06

    .a9{height: 80px; width: 150px; background-color: #fff; margin-top: 10px; float: left; } .a10{height: 80px; width: 310px; background-color: #fff; margin-top: 10px; float: left; margin-left: 50px; } .a11{height: 80px; width: 310px; background-color: #fff; margin-top: 10px; float: left; margin-left: 50px; margin-bottom: 10px; } </style>

  • 07

    </head> <body> <div > <div class="background"> <div class="a1">1</div> <div class="a2">2</div> <div class="a3">3</div> <div class="a4">4</div> <div class="a5">5</div> <div class="a6"> 6</div> <div class="a7">7</div> <div class="a8">8</div> <div class="a9">9</div> <div class="a10">10</div> <div class="a11">11</div> </div> </div> </body> </html>

赞 (0)

相关推荐

  • cad中改变布局空间图纸背景颜色

    本来简单介绍下cad中改变布局空间图纸背景颜色的方法,简单步骤如下: 操作方法 01 打开cad,进入布局. 02 输入选项快捷命令"op",回车. 03 选择显示--颜色,点击进 ...

  • div怎样居中？HTML中div怎样居中呢

    HTML网页定位用到最多的就是div了,让div居中可以让我们的网页布局很好看,那么HTML中怎样让div居中呢? 操作方法 01 如图,举个例子,在HTML中的body标签里面写上div标签对< ...

  • Win10中键盘布局一直提示请重试该怎么办?

    win10系统中电脑键盘布局一直会提示请重试,这是因由于键盘布局出现问题所引起的.该怎么解决这个问题呢?下面我们就来看看详细的教程. 1.点击开始菜单 - 设置: 2.在windows 设置界面点击[ ...

  • 电脑Excel表格中性别如何快速简单地输入

    电脑Excel表格中性别如何快速简单地输入

    excel表格是我们现在经常使用的办公软件之一.今天小编跟大家分享的是电脑Excel表格中性别如何快速简单地输入.具体如下:1. 首先我们打开电脑中一个excel文件.2. 进入之后选择想要快速录入的 ...

  • 如何在pr软件中给视频插图简单描边

    如何在pr软件中给视频插图简单描边

    我们在使用pr软件编辑视频的时候,想要给视频中的插图进行简单描边操作,该怎么办呢?今天就跟大家介绍一下如何在pr软件中给视频插图简单描边的具体操作步骤.1. 首先打开电脑上的pr软件,进入主页面后,将 ...

  • 如何在cad中退出布局当前视图

    cad是很常用的绘图软件,那么大家知道如何在cad中退出布局当前视图吗,下面小编就来跟大家分享一下 操作方法 01 首先打开图纸,切换到布局界面,如果是单纯的切换模型和布局,则直接选择模型或双击视口即 ...

  • easyUI中如何布局页面

    easyUI是非常常用的的WEB前端开发框架,在easyUI里面提供了很多的版本,有离线版也有在线版.由于用它来开发网站前端非常简单方便,因此受到广泛的欢迎.现在我们来看看如何使用easyUI布局页面 ...

  • Word表格中如何排序-方法简单又实用

    Word表格中如何排序-方法简单又实用

    Word表格中也是可以对数据进行升序和降序的排列的,方法比较简单,下面来看看具体步骤: 1.以下面的成绩单为例,我们来进行不同方式地排序: 2.点击表格左上角的"十字按钮"来选择整 ...

  • UI设计中的布局编排原理

    @IOI.@麦子如果说色彩和图片是人的外在,那么版式编排就是人的骨骼,从基础上决定了一个人的内在.今天就带着大家一起从以下六个方面来探究下UI设计中的版式编排. UI界面设计中,信息能被有效的传达,离 ...