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、如果只是修改现成的网页，将要修改的地方做成图片，和上面的方法一样，放在相应的位置
更多文章：
2026年9月7日 15:40
springmvc的依赖（springMVC的注入方式有哪几种，这与springMVC依赖）
2026年9月7日 14:00
2026年9月7日 13:00
2026年9月7日 12:40
display flex 自动换行（overflow-y:hidden;overflow-x:auto;无效解决方法）
2026年9月7日 11:00
2026年9月7日 10:50
timestamp without time zone（Postgresql中to_date（）函数使用问题）
2026年9月7日 09:40
2026年9月7日 04:20
下载mysql的步骤（win10安装mysql的步骤和方法）
2026年9月7日 04:10
2026年9月7日 03:50
