HTML-tyyli

Verkkosivustot näyttävät usein sisältöä useassa sarakkeessa (kuten lehdissä ja sanomalehdissä).

HTML-div-elementin käyttö

注释：Elementtiä käytetään usein asettelutyökaluna, koska sen sijoittaminen CSS:n avulla on helppoa.

Tämä esimerkki käyttää neljää <div>-elementtiä luodakseen monisarakkeisen asettelun:

实例

<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
Lontoo<br>
Pariisi<br>
Tokyo<br>
</div>
<div id="section">
<h1>Lontoo</h1>
<p>
Lontoo on Englannin pääkaupunki. Se on yleisimmin asuttu kaupunki Yhdistyneessä kuningaskunnassa,
yli 13 miljoonan asukkaan suurine metropolialueella.
</p>
<p>
Sijaiten Thames-joella, Lontoo on ollut merkittävä asutusalue kaksi tuhatta vuotta
Sen historia ulottuu roomalaisten perustamaan aikakaudelle, jolloin se nimettiin Londiniumiksi.
</p>
</div>
<div id="footer">
Copyright codew3c.com
</div>
</body>

亲自试一试

CSS：

<style>
#header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px;
}
#nav {
    line-height:30px;
    background-color:#eeeeee;
    korkeus: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>

HTML5:n käyttö verkkosivuston asettelussa

HTML5:n uudet semanttiset elementit määrittelevät verkkosivujen eri osat:

HTML5 semanttiset elementit

header Määritellään asiakirjan tai luvun ylätunniste
nav Määritellään navigointiin käytettävien linkkien sisältävä kontti
section Määritellään asiakirjan osa
article Määritellään itsenäinen sisältö, joka on täysin erillinen
aside Määritellään sisällön ulkopuolinen sisältö (esim. sivupalkki)
footer Määritellään asiakirjan tai luvun alatunniste
details Määritellään ylimääräiset yksityiskohdat
summary Määritellään details-elementin otsikko

Tämä esimerkki käyttää <header>, <nav>, <section> ja <footer> -elementtejä luodakseen monisarakkeisen asettelun:

实例

<body>
<header>
<h1>City Gallery</h1>
</header>
<nav>
Lontoo<br>
Pariisi<br>
Tokyo<br>
</nav>
<section>
<h1>Lontoo</h1>
<p>
Lontoo on Englannin pääkaupunki. Se on yleisimmin asuttu kaupunki Yhdistyneessä kuningaskunnassa,
yli 13 miljoonan asukkaan suurine metropolialueella.
</p>
<p>
Sijaiten Thames-joella, Lontoo on ollut merkittävä asutusalue kaksi tuhatta vuotta
Sen historia ulottuu roomalaisten perustamaan aikakaudelle, jolloin se nimettiin Londiniumiksi.
</p>
</section>
<footer>
Copyright codew3c.com
</footer>
</body>

亲自试一试

CSS

header {
    background-color:black;
    color:white;
    text-align:center;
    padding:5px; 
}
nav {
    line-height:30px;
    background-color:#eeeeee;
    korkeus: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布局

注释：<table> 元素不是作为布局工具而设计的。

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

使用 <table> 元素能够取得布局效果，因为能够通过 CSS 设置表格元素的样式：

实例

<body>
<table class="lamp">
<tr>
  <th>
    <img src="/images/lamp.jpg" alt="Note" style="height:32px;width:32px">
  </th>
  <td>
    The table element was not designed to be a layout tool.
  </td>
</tr>
</table>
</body>

亲自试一试

CSS

<style>
table.lamp {
    width:100%;
    border:1px solid #d4d4d4;
}
table.lamp th, td {
    padding:10px;
}
table.lamp td {
    width:40px;
}
</style>