- 效果图如图:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/1ed777b27d2487e1f6204d4b4055f0b6.png)
- baidu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link rel="shortcut icon" type="image/x-icon" href="./images/1.ico" />
<link rel="stylesheet" href="css/css1.css" />
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
width: 100%;
}
.outer .first a{
font-family: "微软雅黑";
font-size: small ;
color: #777;
font-weight:bold ;
}
.outer .first a:hover{
color: blue;
}
.outer{
width: 1600px;
}
.first{
position: absolute;
top: 10px;
right: 0px;
}
.second{
height:400px;
padding-left: 480px;
padding-top: 100px;
}
.thrid{
width:1595px;
height:280px;
position: relative;
}
.first .produ