html页面布局（HTML 布局）
本文目录
HTML 布局
在网络上，随处都可以看到像报纸那样的格式化分栏。
HTML布局 - 使用表格
One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.
A part of this page is formatted with two columns, like a newspaper page.
As you can see on this page, there is a left column and a right column.
This text is displayed in the left column.
An HTML table is used to divide a part of this Web page into two columns.
The trick is to use a table without borders, and maybe a little extra cell-padding.
No matter how much text you add to this page, it will stay inside its column borders.
同样的布局 - 添加了颜色
One very common practice with HTML, is to use HTML tables to format the layout of an HTML page.
A part of this page is formatted with two columns, like a newspaper page.
As you can see at this page, there is a left column and a right column.
An HTML table is used to divide a part of this Web page into two columns.
This text is displayed in the right column.
The trick is to use a table without borders, and maybe a little extra cell-padding.
No matter how much text you add to this page, it will stay inside its column borders.
html布局的常用的四种实现方式
需求 ：假设高度默认100px ，请写出三栏布局，其中左栏、右栏各为300px，中间自适应
将左右的div宽度设为300px,分别左右浮动，中间盒子不设宽度。注意：先写右边盒子，再写中间盒子，否则先渲染中间盒子，中间盒子会占满该行剩下的宽度，右边盒子只能换行显示，就会出现下面的情况
正常的渲染效果如下所示：
第二种：绝对定位（position:absolute）
设置父盒子position:relative（相对定位），
三个子盒子position：absolute,
左盒子left:0,
右盒子right:0;
中间盒子left:300px;right:300px
第三种：flex布局
父盒子 display:flex
左右盒子设置宽度：300px
中间盒子flex:1(flex-grow:1 flex-shrink:1 flex-basis:0%)不考虑元素尺寸自由伸缩
第四种：grid布局
父盒子display: grid;
grid-template-columns:300px auto 300px;(分割成3列，宽度分别为300px auto 300px)
grid-template-rows:100px;(占一行，行高100px)
html页面制作怎样可以快速将整体布局弄出来呢
1、如果你会html、css可以直接写代码，最方便的是用网上的js插件，有很多很炫酷的插件。
2、如果不了解代码的话就用ps做出整个网页页面，然后将每个按钮、每个菜单栏、每个你要修改的地方都拆成一个个小图片，最后在Dreamweaver上在拼接起来，将按钮的图片添加按钮功能、菜单图片添加菜单工程。（可以查一下拆网页）。就像是很多纸片拼成的画报
3、如果只是修改现成的网页，将要修改的地方做成图片，和上面的方法一样，放在相应的位置
更多文章：
sqlite格式的视频怎么打开（.sqlite是什么文件，用什么工具打开）
2026年11月7日 05:30
element ui面试题（用element-ui ELDialog和ELTable遇见的坑）
2026年11月7日 04:40
2026年11月7日 03:30
中文自动翻译成英语的输入法（有没有一种输入法能将打出来的中文自动变成英文）
2026年11月7日 02:10
equals to（为什么有些英文句子要用的是“equals to that of” 这个that和of之间还可以加名词吗）
2026年11月7日 01:50
default values（电脑开机后出现all settings was reset to default values.）
2026年11月7日 01:20
structured reviewing翻译（软件测试的英文翻译）
2026年11月7日 00:50
2026年11月6日 22:50
2026年11月6日 22:20
2026年11月6日 21:50
