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

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

微信扫一扫关注我们

关注微博
返回顶部