HTML 布局
目录
文章目录隐藏
网站布局
大多数网站会把内容安排到多个列中(就像杂志或报纸那样)。
大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
注:虽然我们可以使用 HTML table 标签来设计出漂亮的布局,但是 table 标签是不建议作为布局工具使用的 – 表格不是布局工具。
使用 <div> 元素的 HTML 布局
注释:<div> 元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个 <div> 元素来创建多列布局:
实例
<style> #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; } </style> <div id="header"> <h1>City Gallery</h1> </div> <div id="nav">London Paris Tokyo</div> <div id="section"> <h2>London</h2> 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. </div> <div id="footer">Copyright ? mybj123.com</div>
效果:
HTML 布局 – 使用表格
使用 HTML <table> 标签是创建布局的一种简单的方式。
大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观。
下面的例子使用三行两列的表格 – 第一和最后一行使用 colspan 属性来横跨两列:
<table border="0" width="500"> <tbody> <tr> <td style="background-color: #ffa500;" colspan="2"> <h1>主要的网页标题</h1> </td> </tr> <tr> <td style="background-color: #ffd700; width: 100px;"><b>菜单</b> HTML CSS JavaScript</td> <td style="background-color: #eeeeee; height: 200px; width: 400px;">内容在这里</td> </tr> <tr> <td style="background-color: #ffa500; text-align: center;" colspan="2">版权 © mybj123.com</td> </tr> </tbody> </table>
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素
header | 定义文档或节的页眉 |
nav | 定义导航链接的容器 |
section | 定义文档中的节 |
article | 定义独立的自包含文章 |
aside | 定义内容之外的内容(比如侧栏) |
footer | 定义文档或节的页脚 |
details | 定义额外的细节 |
summary | 定义 details 元素的标题 |
这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局:
实例
<header> <h1>City Gallery</h1> </header><nav>London Paris Tokyo</nav><section> <h1>London</h1> 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. </section><footer>Copyright mybj123.com.cn</footer>
HTML 布局 – 有用的提示
使用 CSS 最大的好处是,如果把 CSS 代码存放到外部样式表中,那么站点会更易于维护。通过编辑单一的文件,就可以改变所有页面的布局。
由于创建高级的布局非常耗时,使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板(您可以使用这些预先构建好的网站布局,并优化它们)。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » HTML 布局
码云笔记 » HTML 布局