Tutorial Base HTML

Media HTML

Manuale di riferimento HTML

Tutorial di base HTML5

API HTML5

Media HTML5

Layout HTML

Un layout di pagina ragionevole è molto importante, non solo determina l'aspetto della pagina, ma influisce anche sull'esperienza utente; un layout di pagina non buono, l'esperienza utente sarà molto scarsa e sarà difficile trattenere gli utenti.

Metodi di implementazione del layout HTML

1、Puoi utilizzare il modo di tabella HTML per costruire la disposizione della pagina e poi riempire il contenuto.
2、Utilizzare div, abbinato a float o flex per disporre la pagina.

Esempio di layout semplice con tabella

示例

<!DOCTYPE html>
<html>
<head>
　　　　<meta　charset="UTF-8">
　　　　<title>Tabella</title>
</head>
<body>
　　<table　border="1"　cellspacing="1"　cellpadding="1"　align="center">
　　　　　　<tr>
　　　　　　　　　　<td　colspan="2"　align="center"　　style="background:　#0395e1">导航 superiore</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td　style="background:　#f25807"　align="center"　height="300px"　width="100px">
　　　　　　　　　　　　　　Contenuto<br>Barra laterale<br> <br>Contenuto<br>Barra laterale
　　　　　　　　　　</td>
　　　　　　　　　　<td style="background: red" align="center" width="400px">
　　　　　　　　　　　　　　Contenuto principale
　　　　　　　　　　</td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　　　<td colspan="2" style="background: darkorchid" align="center">Fondo</td>
　　　　　　</tr>
　　</table>
</body>
</html>

测试看看 ›

Esempi online

Layout della pagina web utilizzando l'elemento <div>
Come aggiungere layout utilizzando l'elemento <div>.

Layout della pagina web utilizzando l'elemento <table>
Come aggiungere layout utilizzando l'elemento <table>.

Layout del sito web

La maggior parte dei siti web organizza il contenuto in più colonne (come nelle riviste o nei giornali).

La maggior parte dei siti web può utilizzare gli elementi <div> o <table> per creare layout a più colonne. CSS viene utilizzato per posizionare gli elementi o creare un aspetto di pagina con sfondi e colori ricchi.

Anche se possiamo utilizzare il tag table HTML per progettare layout accattivanti, non si consiglia di utilizzare il tag table come strumento di layout - le tabelle non sono strumenti di layout.

Layout HTML - Utilizzo degli elementi <div>

Gli elementi div sono elementi bloccanti HTML utilizzati per raggruppare elementi HTML.

Esempio di utilizzo di cinque elementi div per creare una layout a più colonne:

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
　
<div id="container" style="width:520px">
　
<div id="header" style="background-color:#FFA300;">
<h1 style="margin-bottom:0;">Titolo H1 principale della pagina web</h1></div>
　
<div id="menu" style="background-color:#FF9a00;height:200px;width:120px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
　
<div id="content" style="background-color:#dddddd;height:200px;width:400px;float:left;">
Il contenuto è qui</div>
　
<div id="footer" style="background-color:#FFA300;clear:both;text-align:center;">
版权 © 基础教程(oldtoolbag.com)</div>
　
</div>
　
</body>
</html>

测试看看 ›

上面的 HTML 代码会产生如下结果：

HTML 布局 - 使用表格

使用 HTML <table> 标签是创建布局的一种简单方式。

大多数站点可以使用 <div> 或 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及丰富多彩的外观。

尽管可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！

下面的示例使用三行两列的表格 - 第一行和最后一行使用 colspan 属性来横跨两列：

示例

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>基础教程(oldtoolbag.com)</title>　
</head>
<body>
　
<table width="520" border="0">
<tr>
<td colspan="2" style="background-color:#FFB500;">
<h1>主要的网页 H1 标题</h1>
</td>
</tr>
　
<tr>
<td style="background-color:#FFB700;width:120px;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#DDDDDD;height:200px;width:400px;">
内容在这里</td>
</tr>
　
<tr>
<td colspan="2" style="background-color:#FFB500;text-align:center;">
版权 © 基础教程(oldtoolbag.com)</td>
</tr>
</table>
　
</body>
</html>

测试看看 ›

HTML 布局 - 必不可少的 CSS

使用 CSS 的最大好处是，如果把 CSS 代码存放到外部样式表中，那么站点将更容易维护，并且具有更大的定义风格的灵活性。通过修改 CSS 样式表文件，就可以改变所有页面的布局。如需了解更多有关 CSS 的知识，请访问我们的CSS 教程。

HTML 布局标签

标签	Descrivere
<div>	Definire un blocco di documento, livello bloccante (block-level)
<span>	Definire span, utilizzato per combinare elementi inline nel documento.

Riproduzione Video HTML Blocchi HTML