效果图
![](https://i-blog.csdnimg.cn/blog_migrate/d2f422f1e03fe20b737afe60d4f1a17e.png)
html5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度一下,你就知道</title>
<link href="bd.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- 头发 -->
<nav class="nav">
<ul>
<li><a href="#">新闻</a></li>
<li><a href="#">hao123</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>
<li><a href="#">更多</a></li>
</ul>
<div class="r">
<ul>
<li><a href="#" class="dy">登陆</a></li>
<li><a href="#" >设置</a></li>
</ul>
</div>
</nav>
<!-- 头 -->
<header class="header">
<div id="logo">
<h1>
<a href="https://www.baidu.com/" title="百度logo" target="_black">百度</a>
</h1>
</div>
<div class="search"><!--百度一下前面的空格 padding-left;-->
<input type="search" id="" name="" placeholder="百度一下,你就知道">
<button>百度一下</button>
</div>
</header>
<!-- 身体 -->
<body class="body">
<!-- <div class="bodyheader"></div> -->
<table class="bodytable">
<tr>
<th class="bodytable_left" ><a href="#">百度热搜 ></a></th>
<th class="bodytable_right"><a href="#">换一换 </a></th>
</tr>
<tr>
<td><a href="#"><b>1</b> 官方:核酸检测单人单检不高于 </a></td>
<td><a href="#"><b>4</b> 33项措施稳经济!最新部署来了<span> 热</span> </a></td>
</tr> <!-- 和空格过多,文字会被挤出方块 -->
<tr>
<td><a href="#"><b>2</b> 匈牙利宣布进入战时紧急状态 <span> 热</span></a></td>
<td><a href="#">5 131省区市昨日新增本土102+418 <p> 新</p> </a></td>
</tr>
<tr>
<td><a href="#"><b>3</b> 拜登:得州小学枪击是场“大屠杀” </a></td>
<td><a href="#">6 中超重庆队解散内情:投入超30亿 <p> 新</p></a></td>
</tr>
</table>
</body>
<!-- 脚 -->
<footer class="footer">
<div class="link">
<a href="#"> 关于百度 </a><a href="#"> About Baid u</a> <a href="#"> 使用百度前必读</a><a href="#">帮助中心</a>
<a href="#">京公网安备11000002000001</a><a href="#"> 号京ICP证030173号 </a>
©2022 Baidu 互联网药品信息服务资格证书 (京)-经营性-2017-0020 <a hre="#"> 信息网络传播视听节目许可证 </a>
<a href="#"><img src="https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/footer/aria-3006e33cce.png"></a>
</div>
</footer>
</body>
</html>
css3
*{
margin:0;
padding:0;
}
/* 标签选择器 */
a{
list-style: none;
color: #000;
text-decoration: none;
}
/* 并集选择器 */
input,button{
border: 0;
outline: none;
}
/* 后代选择器 */
ul li{
list-style: none;
}
/* 类选择器 */
.header{
position: relative;
width: 100%;
height: 200px;
}
/* id选择器 */
#logo{
/* 这里不用绝对定位? */
width: 240px;
height: 40px;
margin:66px auto;
}
#logo a{
display: block;
width: 240px;
height: 90px;
background: url(https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png) no-repeat;
background-size: contain;
/* 让<h1>里的文字隐藏 */
font-size: 0;
}
.search{
/* 搜索框要加定位 */
width: 612px;
height: 44px;
border: 2px solid #4b4a4d;
border-radius: 8px;
margin: 66px auto;
}
.search input{
float: left;
width: 504px;
height: 44px;
padding-left: 10px;
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.search button{
float: left;
width: 108px;
height: 44px;
background-color: #4e6ef2;
font-size: 17px;
color: #efff;
}
.nav{
position: relative;
width: 100%;
height: 70px;
}
.nav ul li {
float: left;
}
.nav ul li a{
display: block;
margin: 30px 10px;
text-decoration: none;
color: rgb(44, 42, 42);
font-size: 16px;
}
.nav .r ul li{
float: right;
}
/* 把a通过display转为块元素,这样才能设置top值 */
.nav .r ul li a{
display: block;
margin: 30px 10px;
text-decoration: none;
color: rgb(44, 42, 42);
font-size: 16px;
}
.nav ul li a:hover{
color: blue;
}
.dy{
display: block;
width: 48px;
height: 24px;
color: #fff!important;
background-color: #4e6ef2;
text-align: center;
line-height: 24px;
border-radius: 8px;
}
.bodyheader{
width: 620px;
height: 50px;
margin: 10px auto;
}
.bodytable{
margin: auto;
width: 636px;
height: 150px;
}
/* 选中出现下滑线,可以设置成行内块,块元素,再overflow:hidden把多余的去掉 */
.bodytable tr span{
display: inline-block;
overflow:hidden;
width: 20px;
height: 20px;
border-radius: 6px;
font-size: 14px;
color: #fff;
background-color: #f60;
}
.bodytable tr p{
display: inline-block;
overflow:hidden;
width: 20px;
height: 20px;
border-radius: 6px;
font-size: 14px;
color: #fff;
background-color: #ff455b;
}
.bodytable tr b{
color: #f60;
}
.bodytable tr td:hover{
text-decoration: underline;
}
.bodytable tr a:hover{
color: blue;
}
.bodytable .bodytable_left{
color: #000;
/* th文字靠左 */
text-align: left;
font-size: 16px;
font-family: Arial,sans-serif;
}
.bodytable .bodytable_right{
/* th文字靠右 */
text-align: right;
color: #626675;
font-size: 15px;
}
.bodytable tr td{
margin: 10px auto;
}
.bodytable tr td:nth-child(2n){
padding-left: 10px;
}
.footer{
/* 定位相对于窗口,水平居中用text-align:center; */
position: fixed;
width: 100%;
bottom: 0;
margin:0 auto;
height: 39px;
line-height: 39px;
background: #fff;
text-align: center;
}
.link{
font-size: 12px;
color: #4b4a4d;
font-family: Arial,sans-serif;
}
.link a{
margin:0 3px;
}
.link img{
width: 56px;
}