HTML 布局

小陌很忙

分类: HTML5 1870 6

前言:

网站常常以多列显示内容(就像杂志和报纸)。

HTML 布局 – 使用div元素

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

HTML 布局 – 使用table元素

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

使用 HTML5 的网站布局

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

header:定义文档或节的页眉


nav:定义导航链接的容器


section:定义文档中的节


article:定义独立的自包含文章


aside:定义内容之外的内容(比如侧栏)


footer:定义文档或节的页脚


details:定义额外的细节


summary:定义 details 元素的标题

这个例子使用 <header>, <nav>, <section>, 以及 <footer> 来创建多列布局:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
<style>
header {
    background-color:#FFA500;
    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>
</head>
<body>
<header>
<h1>陌上花-blog</h1>
</header>
<nav>
首页<br>
关于<br>
</nav>
<section>
<h1>London</h1>
<p>
内容在这里
</p>
</section>
<footer>
版权 © 陌上花
</footer>
</body>
</html>

以及id命名法:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
</head>
<body>
<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">陌上花-blog</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>首页</b><br>
关于<br>
</div>
 
<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>
 
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © 陌上花</div>
 
</div>
 
</body>
</html>

下面的例子使用表格制作:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>陌上花-blog</title> 
</head>
<body>
 
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>陌上花-blog</h1>
</td>
</tr>
 
<tr>
<td style="background-color:#FFD700;width:100px;">
<b>首页</b><br>
关于<br>

</td>
<td style="background-color:#eeeeee;height:200px;width:400px;">
内容在这里</td>
</tr>
 
<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
版权 © 陌上花</td>
</tr>
</table>

</body>
</html>

注:即使可以使用 HTML 表格来创建漂亮的布局,但表格的目的是呈现表格化数据,不是布局工具!

  • 4人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
html5、HTML布局、前端笔记

作者简介:小陌很忙

学无止境,生命不息,折腾不止!

共 6 条评论关于 “HTML 布局”

Loading...