HTML 布局

使用 <div> 元素的 HTML 布局

注释：<div> 元素常用作布局工具，因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个 <div> 元素来创建多列布局：

实例

<body><div id="header">
<h1>City Gallery</h1>
</div><div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div><div id="section">
<h1>London</h1>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div><div id="footer">
Copyright W3School.com.cn
</div></body>

使用表格的 HTML 布局

注释：<table> 元素不是作为布局工具而设计的。

<table> 元素的作用是显示表格化的数据。

使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

实例

<body><table class="lamp">
<tr><th><img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px"></th><td>The table element was not designed to be a layout tool.</td>
</tr>
</table></body>

转载于:https://www.cnblogs.com/pgone/p/7542543.html

HTML（八）------ 布局相关推荐

android实现过程,Android：一个完整app开发流程
一.给出功能文档二.APP架构选择可选MVP,MVVM 三.APP目录结构设置本app基于mvp架构.除了mvp架构的文件. 还包含下面的文件夹: ui (下面根据Activity划分) wid ...
SumperMap基本编程
SuperMap Object 基本编程,在转载的基础上,进行个人整理. 一. 工作空间 1.打开工作空间 SuperWorkSpace.open(); ,有文件和数据库的区别说明:打开工作空间时, ...
WPF入门学习----系列基础教程
WPF入门教程系列目录 WPF入门教程系列二--Application介绍 WPF入门教程系列三--Application介绍(续) WPF入门教程系列四--Dispatcher介绍 WPF入门教程系 ...
html，css小结
一, HTML知识 1:<a> 标签可以自定义属性 2:块级元素如 div 占一行内联元素如 span 占往下排的 3:<mate 设置编码:文件的编码,要与指定的编码对 ...
tkinter 布局_第八弹：读者问有tkinter的资料吗？
Python小例子会持续帮助大家,解决Python学习中遇到的各种问题,并以此为使命,砥砺前行.如果你觉得此号还可以,欢迎星标:点击最上方蓝色字Python小例子,进入Python小例子界面,点击右上 ...
android 标签样式布局,安卓 Tab 标签－利用 TabHost、TabWidget、FrameLayout 啰里八嗦实现 Tab 标签控件...
安卓 Tab 标签-利用 TabHost.TabWidget.FrameLayout 啰里八嗦实现 Tab 标签控件首先 XML 布局代码 TabHost 是整个 Tab 的外围,TabWidget ...
html响应式布局的概念,HTMLCSS学习笔记（十八）响应式布局概念
原标题:HTMLCSS学习笔记(十八)响应式布局概念常见的布局方案固定布局:以像素作为页面的基本单位,不管设备屏幕及浏览器宽度,只设计一套尺寸: 可切换的固定布局:同样以像素作为页面单位,参考主流 ...
css垂直居中最常用的八种布局方法
css垂直居中最常用的八种布局方法首先定义两个盒子,然后进行下布局样式操作! 利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center 块级元素设置其本身的l ...
OO实现ALV TABLE 八：ALV的布局功能
在ALV的输出结果中,我们可以利用ALV提供的标准功能(过滤,排序,汇总)对输出结果正行操作.比如说我们对一个结果进行了排序和过滤等的动作,下次再运行这个报表的时候可以选择一个功能直接运行这些动作.这 ...
八十九、常见的圣杯布局和双飞翼布局
@Author:Runsen 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式. 圣杯布局圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应. 使用弹性盒子布局实现圣杯 ...

HTML（八）------ 布局

HTML 布局

使用 <div> 元素的 HTML 布局

实例

使用表格的 HTML 布局

实例

HTML（八）------ 布局相关推荐

最新文章

热门文章