HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>百度一下，你就知道</title>
<link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>
<div class="header">
<ul class="nav">
<li class="more"><a href="#" >更多產品</a></li>
<li class="gray"><a href="#" >設置</a></li>
<li class="gray"><a href="#" >登錄</a></li>
<li><a href="#">貼吧</a></li>
<li><a href="#">視頻</a></li>
<li><a href="#">地圖</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">新聞</a></li>
</ul>
</div>
<div class="search">
<div class="logo">
<img src="https://www.baidu.com/img/bd_logo1.png">
</div>
<div class="keyword">
<form action="./" method="GET" class="fm">
<div class="inpWrapper">
<span class="camera"></span>
<input type="text" name="kw">
</div>
<div class="btnWrapper">
<input type="submit" value="百度一下">
</div>
</form>
</div>
</div>
<div class="info">
<div class="weixin">
<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_09b6296.png" alt="二維碼">
<p>下載百度App</p>
<p>有事搜一搜 沒事看一看</p>
</div>
<div class="message">
<p>
<a href="#">把百度設爲主頁</a>
<a href="#">關於百度</a>
<a href="#">About Baidu</a>
<a href="#">百度推廣</a>
</p>
<p class="lineTwo">
<span>©2019 Baidu</span>
<a href="#">使用百度前必讀</a>
<a href="#">意見反饋</a>
<span>京ICP證030173號</span>
<span class="icon1"></span>
<a href="#">京公網安備11000002000001號</a>
<span class="icon2"></span>
</p>
</div>
</div>
</body>
</html>CSS代碼如下：
*{
padding: 0;
margin: 0px;
}
.header{
height: 60px;
line-height: 60px;
}
.header .nav{
list-style: none;
}
.header .nav li{
float: right;
margin-right: 20px;
}
.header .nav li a{
color: #333;
font-size: 13px;
font-weight: 700;
}
.header .nav .more a{
background-color: #38f;
text-decoration: none;
font-weight: normal;
color: #fff;
padding: 4px;
}
/* search style*/
.search{
margin-top: 40px;
}
.search .logo{
text-align: center;
}
.search .logo img{
width: 270px;
height: 129px;
}
.search .keyword{
margin-top: 20px;
text-align: center;
}
.search .keyword form div{
display: inline-block;
}
.search .keyword form .inpWrapper input{
width: 539px;
height: 34px;
border: 1px solid #b6b6b6;
}
.search .keyword form .btnWrapper input{
width: 100px;
height: 36px;
background-color: #38f;
color: #fff;
font-size: 15px;
border: none;
}
/*info style*/
.info{
margin-top: 270px;
text-align: center;
}
.info .weixin img{
width: 60px;
height: 60px;
}
.info .weixin p{
margin-top: 4px
font-weight: 600;
font-size: 12px;
color: #999;
}
.info .message{
margin-top: 15px;
}
.info .message p{
padding: 5px 0px;
}
.info .message p a, span{
color: #999;
font-size: 12px;
margin-left: 10px;
}
.info .message .lineTwo .icon2{
display: inline-block;
background-position: -623px -96px;
width: 14px;
height: 17px;
background-image: url('https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/global/img/icons_5859e57.png');
}