<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>百度一下,你就知道</title>
<!-- 引入外部样式 -->
<link rel="stylesheet" type="text/css" href="./css/style.css">
<link rel="icon" type="image/jpg" href="img/1.jpg">
</head>
<body>
<!-- top -->
<div class="top">
<!-- top-left -->
<div class="top_left">
<a href="">新闻</a>
<a href="">hao123</a>
<a href="">地图</a>
<a href="">贴吧</a>
<a href="">视频</a>
<a href="">图片</a>
<a href="">网盘</a>
<a href="">更多</a>
</div>
<!-- top-right -->
<div class="top_right">
<a href="" class="set">设置</a>
<input type="submit" value="登录" class="login">
</div>
</div>
<!-- center -->
<div class="center">
<!-- logo -->
<div>
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="" width="200px"
height="100px">
</div>
<!-- input -->
<div>
<input type="text" class="input_text">
<input type="submit" value="百度一下" class="button">
</div>
<!-- table -->
<div>
<table>
<tr>
<td><b>百度热搜</b></td>
<td style="text-align: right;">换一换</td>
</tr>
<tr>
<td>
<span>0</span>
<span>多措并举助企稳就业</span>
</td>
<td>
<span>3</span>
<span>山东舰霸气壁纸</span>
</td>
</tr>
<tr>
<td>
<span>1</span>
<span>河南村镇银行多位储户称又被赋红码</span>
</td>
<td>
<span>4</span>
<span>通信行程卡时间范围由14天改为7天</span>
</td>
</tr>
<tr>
<td>
<span>2</span>
<span>约翰逊辞职后谁将接唐宁街烂摊子</span>
</td>
<td>
<span>5</span>
<span>山东新增66例本土无症状 在临沂</span>
</td>
</tr>
</table>
</div>
</div>
<!-- bottom -->
<div class="bottom">
<span>关于百度</span>
<span>About Baidu</span>
<span>京公网安备11000002000001号</span>
<span>京ICP证030173号</span>
<span>药品医疗器械网络信息服务备案(京)网药械信息备字(2021)第00159号</span>
<span>^</span>
</div>
</body>
</html>
CSS文件
.center{
width: 1200px;
text-align: center;
}
.center > div:nth-child(2) > .input_text{
border: 2px solid lightgray;
border-right: 0px;
border-radius: 10px 0 0 10px;
width: 450px;
height: 30px;
}
.center > div:nth-child(2) > .button{
border: 0px;
border-radius: 0 10px 10px 0;
background-color: rgba(61,83,239,0.9);
color: white;
width: 80px;
height: 34px;
margin-left: -6px;
}
table{
width: 530px;
text-align: left;
margin-top: 30px;
margin-left: 28%;
font-size: 1px;
}
td{
height: 30px;
}
.bottom{
width: 1200px;
text-align: center;
font-size: 1%;
position: absolute;
bottom: 2px;
}