如何通过DIV来布局页面?

现在开发html页面时,我们基本上都是使用div来布局页面,而不再使用table来布局了。用div如何布局?下面来看下。

操作方法

  • 01

    我们先在一个容器里输入三个div,

  • 02

    如果不添加样式,直接打开页面,我们的三个div是以块来显示的,即每个div占用一块,是竖排的。

  • 03

    为了让div能像table那样,横排来布局页面,我们可以添加样式,为div添加 float:left的样式,让div能横排。

  • 04

    刷新页面,可以看到现在的三个div都能横排了。

  • 05

    还需要设置一下各div的宽度。我们为left, right, middle三个div各设置不同的宽度,如图

  • 06

    刷新页面,可以看到现在三个div已经可以把容器分成三列的布局了。

  • 07

    细节上再修正一下,把中间div的左右二边的边框设置为none,现在看起来更好点了。

(0)

相关推荐

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

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

  • css+div网页布局使用教程

    CSS(层叠式样式表)是用来进行网页样式设计的标识语言,与HTML一样属于解释性语言.如设计链接文本初始显示为蓝色,当光标移过时字体变成红色且显示下划线,这就是一种样式.通过设计样式表,可以统一控制H ...

  • easyUI中如何布局页面

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

  • wps文字如何更改布局页面呢?

    wps是金山软件公司的一种办公软件,界面新颖,与传统的office2003相比,它不仅可以设置自己的界面风格,它还可以拥有自己的独特的一面,下面小编给大家分享:如何更改Wps界面布局.主要是针对用惯了 ...

  • 如何将CAD“布局”页面底色由白色变为黑色

    对于初学者及不太了解CAD软件的用户在查看文件时,经常遇到打开图纸发现界面是白色,而不便于查看的情况,下面就来介绍下如何将布局页面转换成白色. 操作方法 01 默认的"模型"和&q ...

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

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

  • DW怎么设置DIV模块在页面中居中?

    Dreamweaver中margin.padding可以让div模块在页面居中,但如果是自适应所有屏幕,包括手机屏幕依然可以自动上下左右居中,该怎么设置呢?下面我们就来看看详细的教程. 操作方法 01 ...

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

    float布局在PC端布局用得算是普遍,现在小编我就分享一下 float浮动布局的,希望可以帮助各位宝宝们,这样宝宝们就知道 网页浮动布局怎么用了. 操作方法 01 如图,先设定一个大容器,里面有两个 ...

  • wps文字如何更改布局页面

    方法一:然后在其主页面上点击右侧上方的"小衣服"图标. 选中上方菜单中的2012皮肤后面的一项,然后点击下方的"更改"按钮. 此处更改将会在下一次启动wps程序 ...