用html与css写一个百度页面
时间: 2024-06-12 17:05:08 浏览: 12
抱歉,我是一个语言模型,无法展示页面。但是,我可以提供以下代码示例,可供参考:
HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<a href="#" id="logo"></a>
<form id="search-form">
<input type="text" name="q" id="search-box">
<button type="submit" id="search-btn">百度一下</button>
</form>
<div id="nav">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">更多</a>
</div>
</div>
<div id="content">
<div id="left-panel">
<h2>百度热搜</h2>
<ol>
<li><a href="#">NBA总决赛</a></li>
<li><a href="#">考研</a></li>
<li><a href="#">C罗葡萄牙</a></li>
<li><a href="#">世界杯</a></li>
<li><a href="#">大赢家</a></li>
</ol>
</div>
<div id="right-panel">
<h2>百度推荐</h2>
<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>
<div id="footer">
<p>© 2021 Baidu</p>
</div>
</div>
</body>
</html>
CSS代码:
/* reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* global styles */
body {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
color: #333;
}
a {
color: #333;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
/* layout styles */
#container {
max-width: 1200px;
margin: 0 auto;
}
#header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}
#logo {
display: block;
width: 116px;
height: 41px;
background: url(https://www.baidu.com/img/bd_logo1.png) no-repeat;
background-size: contain;
}
#search-form {
position: relative;
}
#search-box {
width: 400px;
height: 30px;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 15px;
font-size: 16px;
}
#search-btn {
position: absolute;
right: 0;
top: 0;
width: 100px;
height: 40px;
background: #3385ff;
color: #fff;
border: none;
border-radius: 20px;
font-size: 16px;
cursor: pointer;
}
#nav {
display: flex;
align-items: center;
justify-content: flex-end;
flex-grow: 1;
}
#nav a {
display: inline-block;
margin-left: 15px;
font-size: 16px;
}
#content {
display: flex;
flex-wrap: wrap;
margin: 50px 0;
}
#left-panel {
flex-basis: 70%;
padding-right: 50px;
}
#left-panel h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#left-panel ol {
list-style: none;
}
#left-panel li {
margin-bottom: 10px;
}
#left-panel li a {
font-size: 16px;
}
#right-panel {
flex-basis: 30%;
}
#right-panel h2 {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
#right-panel ul {
list-style: none;
}
#right-panel li {
margin-bottom: 10px;
}
#right-panel li a {
font-size: 16px;
}
#footer {
padding: 20px 0;
text-align: center;
border-top: 1px solid #ccc;
}
#footer p {
font-size: 14px;
}
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)