使用
元素的 HTML 布局
注释:
注释:
元素常用作布局工具,因为能够轻松地通过 CSS 对其进行定位。
这个例子使用了四个
元素来创建多列布局:
实例
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h1>London</h1>
<p>
https://blog.csdn.net/weixin_44554456
</p>
<p>
https://blog.csdn.net/weixin_44554456
</p>
</div>
<div id="footer">
https://blog.csdn.net/weixin_44554456
</div>
</body>
CSS:
<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>
使用 HTML5 的网站布局
HTML5 提供的新语义元素定义了网页的不同部分:
HTML5 语义元素
这个例子使用
<header>, <nav>, <section>, <footer>
来创建多列布局:
实例
<body>
<header>
<h1>https://blog.csdn.net/weixin_44554456</h1>
</header>
<nav>
London<br>
Paris<br>
Tokyo<br>
</nav>
<section>
<h1>London</h1>
<p>
https://blog.csdn.net/weixin_44554456
</p>
<p>
https://blog.csdn.net/weixin_44554456
</p>
</section>
<footer>
https://blog.csdn.net/weixin_44554456
</footer>
</body>
CSS
<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;
}
使用表格的 HTML 布局
注释:
使用
元素能够取得布局效果,因为能够通过 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>