分别使用表格布局和div+css布局实现百度首页
时间: 2024-10-20 20:04:53 浏览: 7
使用表格布局(Table Layout)来实现百度首页的传统做法是将网页内容组织成一系列行和列,每个单元格可以包含链接、图片、文字等元素。但由于HTML5推荐使用结构化内容而非表格来布局,下面是一个简单的示例:
```html
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="logo"> <a href="https://www.baidu.com">百度</a> </td>
<td class="nav"> <!-- 导航栏 -->
<ul>
<li><a href="#">搜索</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">地图</a></li>
<!-- 更多链接... -->
</ul>
</td>
</tr>
<tr>
<td class="content"> <!-- 主要内容区域 -->
<h1>百度一下,你就知道</h1>
<p>这里是最新资讯和搜索结果...</p>
</td>
</tr>
</table>
```
而使用div+CSS布局(也称为现代布局方式)则更注重利用HTML的语义标签和CSS的样式控制。首先创建结构,然后用CSS定位元素。例如:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
body {
font-family: Arial, sans-serif;
}
header {
display: flex;
justify-content: space-between;
padding: 20px;
}
nav ul {
list-style-type: none;
display: flex;
}
.logo {
width: 120px;
}
main {
padding: 20px;
}
</style>
</head>
<body>
<header>
<div class="logo"><a href="https://www.baidu.com">百度</a></div>
<nav>
<ul>
<li><a href="#">搜索</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">地图</a></li>
</ul>
</nav>
</header>
<main>
<h1>百度一下,你就知道</h1>
<p>这里是最新资讯和搜索结果...</p>
</main>
</body>
</html>
```
阅读全文