html布局方式有哪些,HTML几种布局方式-HTML教程第十六讲
本文主要介绍HTML的布局方式。归纳了以下，主要有以下三种方式：
使用
注释：
这个例子使用了四个
示例：
City Gallery
London
Paris
Tokyo
London
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.
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.
Copyright www.webym.net
CSS代码:
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分：
HTML5 语义元素
header
定义文档或节的页眉
nav
定义导航链接的容器
section
定义文档中的节
article
定义独立的自包含文章
aside
定义内容之外的内容(比如侧栏)
footer
定义文档或节的页脚
details
定义额外的细节
summary
定义 details 元素的标题
这个例子使用 , , , 以及 来创建多列布局：
示例：
City Gallery
London
Paris
Tokyo
London
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.
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.
Copyright www.webym.net
CSS代码：
header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
section {
width:350px;
float:left;
padding:10px;
}
footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
使用表格的 HTML 布局
注释：
使用
示例：
|
|
The table element was not designed to be a layout tool. |
|---|
CSS代码：
table.lamp {
width:100%;
border:1px solid #d4d4d4;
}
table.lamp th, td {
padding:10px;
}
table.lamp td {
width:40px;
}
声明:如需转载，请注明来源于www.webym.net并保留原文链接：http://www.webym.net/jiaocheng/383.html
html布局方式有哪些,HTML几种布局方式-HTML教程第十六讲相关推荐
- 简述css样式的三种引入html的方式,css-1,css的三种引入方式 基本选择器
css三种引入方式 和四种基本选择器 /*内接样式*/ /*1 选择器 选中的是 '共性'*/span{color:green;font-size:30px; } /*组合选择器*/ul,ol{lis ...
- 多线程python实现方式_python多线程的两种实现方式（代码教程）
本篇文章给大家带来的内容是关于python多线程的两种实现方式(代码教程),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 线程是轻量级的进程,进程中可划分出多个线程,线程可独立的调度 ...
- python支持的编程方式包括,python的两种编程方式是什么
一.交互式编程 什么是交互式编程,就是在命令行中输入python 命令即可启动交互式编程,提示窗口如下: 而且还用了Python3的print方法打印出一串字符串. 二.脚本式编程 通过脚本参数调用解 ...
- PoE交换机的多种连接方式 PoE交换机的4种连接方式
PoE交换机的链接方式有哪些?前面我们在介绍监控的供电方式时有介绍PoE供电,有一些朋友对poe供电存到一些疑问,那么,交换机品牌16年生产厂家ONV光网视小编今天就用图文形式来与您一起了解PoE的几 ...
- CSS的三种引入方式与JS的三种引入方式
CSS的三种引入方式 前端三剑客分为html,css,js, html作为骨架,楼体是观看者看到的第一元素,而css和js是美化并增加功能的肉体羽毛或者楼体工装,肉体羽毛需要安装到骨架上,才能使整体完 ...
- 11服务方式：gRPC的四种服务方式
今天这篇文章一看标题就比较特别,因为gRPC本身就是分布式微服务常用的一种通信方式,而我们又要探讨gRPC是如何进行通信的,那就是从源码层面来研究下gRPC服务端与客户端之间更为具体的通信方式,作为业 ...
- python采用哪种编码方式_python有哪几种编码方式
python编码方式有:1.ASCII:2.GB2312:3.Unicode:4.UTF-8.ASCII编码的制定是为了显示现代美国英语.为了解决信息交流的要求,可以使用GB2312编码来进行汉语交流 ...
- mysql的四种连接方式_数据库的四种连接方式分别是什么
数据库的四种连接方式分别是:1.inner join内连接:2.outer join外连接:3.cross join交叉连接:4.natural join自然连接. 内连接 内连接 ---拼接查询结果 ...
- vue 实例化几种方式_Vue组件的三种调用方式
最近在写fj-service-system的时候,遇到了一些问题.那就是我有些组件,比如Dialog.Message这样的组件,是引入三方组件库,比如element-ui这样的,还是自己实现一个?虽然 ...
最新文章
- .NET : VS 2008中的一个转换器
- CTF---Web入门第四题 Forms
- ListView.getChildCount() 详解
- Java 原子变量类
- 跨域解决请求限制（script标签）（热门搜索出现对应的词条）
- java常见的排序算法_常见排序算法及Java实现
- 无刷新上传Excel后利用JQuery AJAX 显示进度条的实现方式
- 中年程序员对核心竞争力“不可替代”的重新认识
- linux6.5配置ssh,CentOS 6.5 配置 SSH 免密登录
- Shader编程学习笔记（二）—— Shader和渲染管线
- 桌面支持--WIN7任务栏上EXCEL的图标右键菜单上没有了最近打开的文档目录
- FTP服务器配置与管理（2） 创建FTP站点
- 智慧城市发展路径应分级分类
- 【深度学习】眼底图像之视盘和黄斑分割的探索
- 操作系统期末大题类型题解
- 洛谷T46780 ZJL 的妹子序列（生成函数）
- CentOS 7 YUM安装MariaDB 10.1
- 第二型曲面积分的定义
- Spring MVC 双亲上下文的说明
- linux软raid阅读笔记,linux_软RAID阅读笔记.pdf