HTML 布局方法

要想让你的网站更好看,布局非常重要.要非常细心的设计你网页布局,本篇文章重点为大家讲解一下HTML 布局

HTML 布局方法

使用

元素的 HTML 布局

注释:

元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。

这个例子使用了四个

元素来创建多列布局:

实例



"header">

City Gallery

"nav"> London
Paris
Tokyo
"section">

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.

"footer"> Copyright W3School.com.cn

CSS:

使用 HTML5 的网站布局

HTML5 提供的新语义元素定义了网页的不同部分:

HTML5 语义元素

header 定义文档或节的页眉
nav 定义导航链接的容器
section 定义文档中的节
article 定义独立的自包含文章
aside 定义内容之外的内容(比如侧栏)
footer 定义文档或节的页脚
details 定义额外的细节
summary 定义 details 元素的标题

这个例子使用

,
,以及
来创建多列布局:

实例



City Gallery

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 W3School.com.cn

CSS

使用表格的 HTML 布局

注释:

元素不是作为布局工具而设计的。

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

使用

元素能够取得布局效果,因为能够通过 CSS 设置表格元素的样式:

实例




  
  
    "/images/lamp.jpg" alt="Note" style="height:32px;width:32px">        The table element was not designed to be a layout tool.   

CSS

以上就是良许教程网为各位朋友分享的Linu系统相关内容。想要了解更多Linux相关知识记得关注公众号“良许Linux”,或扫描下方二维码进行关注,更多干货等着你 !

img
本文由 良许Linux教程网 发布,可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。
良许

作者: 良许

良许,世界500强企业Linux开发工程师,公众号【良许Linux】的作者,全网拥有超30W粉丝。个人标签:创业者,CSDN学院讲师,副业达人,流量玩家,摄影爱好者。
上一篇
下一篇

发表评论

联系我们

联系我们

公众号:良许Linux

在线咨询: QQ交谈

邮箱: yychuyu@163.com

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

关注微博
返回顶部