HTML实现百度百科基础布局
时间: 2024-05-15 20:14:18 浏览: 10
以下是一个实现百度百科基础布局的 HTML 代码,你可以参考一下:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度百科</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #3385FF;
color: #fff;
padding: 10px;
text-align: center;
}
nav {
background-color: #eee;
padding: 10px;
text-align: center;
border-bottom: 1px solid #ccc;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav ul li {
display: inline-block;
margin-right: 20px;
font-size: 18px;
}
nav ul li a {
color: #333;
text-decoration: none;
}
nav ul li a:hover {
color: #3385FF;
}
.container {
width: 960px;
margin: 0 auto;
padding: 10px;
box-sizing: border-box;
}
.main {
float: left;
width: 720px;
padding: 10px;
background-color: #fff;
box-sizing: border-box;
}
.sidebar {
float: right;
width: 220px;
padding: 10px;
background-color: #eee;
box-sizing: border-box;
}
.footer {
clear: both;
background-color: #3385FF;
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>百度百科</h1>
</header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">词条</a></li>
<li><a href="#">图片</a></li>
<li><a href="#">视频</a></li>
<li><a href="#">文库</a></li>
</ul>
</nav>
<div class="container">
<div class="main">
<h2>百度百科是什么?</h2>
<p>百度百科是百度公司推出的一部内容开放、自由的网络百科全书。它旨在创造一个涵盖所有可以链接的主题,并提供用户参与编辑的自由百科全书。</p>
<h2>百度百科的特点</h2>
<ul>
<li>内容开放:百度百科的内容不仅由专业人士撰写,还可以由普通网友参与编辑。</li>
<li>自由编辑:用户可以随时编辑、增加、删除百科条目的内容,使百科更加全面、准确、及时。</li>
<li>多媒体:百度百科支持文字、图片、音频、视频等多种形式的内容,为用户提供更加全面、丰富的知识体验。</li>
<li>专业性:百度百科的内容主要由专业人士撰写,保证了其专业性和权威性。</li>
</ul>
</div>
<div class="sidebar">
<h3>热门词条</h3>
<ul>
<li><a href="#">百度</a></li>
<li><a href="#">百度贴吧</a></li>
<li><a href="#">百度知道</a></li>
<li><a href="#">百度文库</a></li>
<li><a href="#">百度地图</a></li>
<li><a href="#">百度百科</a></li>
</ul>
</div>
</div>
<footer class="footer">
<p>© 2021 百度百科</p>
</footer>
</body>
</html>
```
这段代码实现了一个具有基础布局的百度百科页面,包括顶部的标题栏、导航栏、主内容区域和侧边栏,以及底部的版权信息。你可以根据需要进行修改和调整。