HTML网页浮动布局怎么用,div float布局怎么用

float布局在PC端布局用得算是普遍,现在小编我就分享一下
float浮动布局的,希望可以帮助各位宝宝们,这样宝宝们就知道
网页浮动布局怎么用了。

操作方法

  • 01

    如图,先设定一个大容器,里面有两个div小容器,这样才好说明浮动布局。

  • 02

    如图,样式就是大容器有黑色边框,小容器一个是红色的,一个是蓝色的。

  • 03

    看下默认的布局效果,假设一个网页内有红蓝两个div,现在我们开始用浮动来控制它们的方位。

  • 04

    如图,给红div添加左浮动float left,蓝色则是向右边浮动。

  • 05

    接着看下浮动的效果,一个在左,一个靠右,但是它们离黑色边框太近了。

  • 06

    接着分别设置红蓝的margin,这样就可以让红蓝div它们离黑色边框有一定的距离。

  • 07

    最后看看红蓝div的方位发生移动了,这就是float的用法,它可以配合margin来用,float浮动的用法还算是比较简单哟,可以多码代码试试。

(0)

相关推荐

  • Dreamweaver 怎么网页布局 div css布局

    div+css布局已经成为当前网页布局的潮流,通过盒子模型和浮动.定位来控制页面布局比以前的表格布局容易控制多了.如何用Dreamweaver实现div+css网页布局呢.小编为你分享我的. 操作方法 ...

  • 如何通过DIV来布局页面?

    现在开发html页面时,我们基本上都是使用div来布局页面,而不再使用table来布局了.用div如何布局?下面来看下. 操作方法 01 我们先在一个容器里输入三个div, 02 如果不添加样式,直接 ...

  • 如何实现CSS样式之多个层DIV并排布局

    如何实现CSS样式之多个层DIV并排布局?对于初会CSS的朋友,这个也有点难度,不知道是如何下手去写CSS,其实,这个也容易实现,所以,我便做了一下实例,分享给大家; 让我们来做盒子模拟分析吧:四个层 ...

  • CAD布局是什么?CAD布局怎么用?

    在AUTOCAD或浩辰CAD等同类的CAD软件中,新建一张空图,我们都可以看到底部有一个标签栏,分别写着"模型(Model)"和"布局(Layout)",不仅初 ...

  • CAD如何使用布局(cad如何使用布局功能)

    很多CAD制图初学入门者在使用浩辰CAD软件绘制图纸的过程中,如果没有对CAD软件中的功能了解透彻的话,在使用的时候就没有办法运用好这些功能.接下来就给CAD制图初学入门者详细介绍一下CAD布局功能吧 ...

  • 三步骤清除网页浮动广告

    三步骤清除网页浮动广告

  • Win7系统如何屏蔽网页浮动广告

    Win7系统如何屏蔽网页浮动广告

  • Dreamweaver学习:[29]网页中如何编辑AP DIV层

    接着上一篇的层元素的内容,通过一些实例来进一步巩固和学习如何编辑层. 操作方法 01 打开Dreamweaver,新建一个HTML文件.点击绘制层,在窗口内创建一个图层. 02 在属性面板中更改层的属 ...

  • win10系统如何锁定布局?win10系统锁定布局的方法

    win10自发布后就一直深受用户们的喜爱,它也增加了很多好用的功能,其中一个功能时限制用户改变开始菜单.我们可以使用该功能锁定自己的开始菜单布局,没有人可以改变.下面,小编就带大家看看win10锁定布 ...