Design sketch:
Using Baidu home page to make a simple practice of layout, there are some defects, such as the little icon at the bottom is too lazy to do it
This little badge and little icon
The color of the title in the upper right corner has not been changed in detail
Login and set light color not set
But the form form is set, and when you click Baidu button, you will directly open the real Baidu search content
Analyze Baidu search url to set corresponding form items
https://www.baidu.com/s?wd = search content & OK= Submission
So we set the id and name of input to wd
Set botton's id and name to ok, value = "submit"
Then set to submit the form by get (default)
Can achieve the goal of opening the real Baidu search content
Paste the source code, no picture resources, you can find me if you need,
Welcome to correct!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Baidu, you don't know</title>
<style>
a {
color:#999;
}
.div_title{
width:100%;
height:40px;
}
.div_head{
width:100%;
height:125px;
margin-top:85px;
}
.div_search{
width:650px;
height:30px;
margin-top:15px;
margin:0 auto;
}
.div_erWeiMa{
width:100%;
height:90px;
margin-top:27%;
}
.div_foot{
width:40%;
height:30px;
margin-top:20px;
margin-left:30%;
color:#999;
text-decoration:none;
text-align: center;
line-height: 22px;
font: 12px arial;
}
.div_tail{
width:100%;
height:30px;
text-align: center;
color:#999;
font: 12px arial;
}
.div_menv{
float:right;
width:48px;
font-size:13px;
line-height:50px;
text-decoration:underline;
font-weight:bold
}
.div_gengDuo{
width: 60px;
height: 23px;
color: #fff;
background: #38f;
line-height: 24px;
font-size: 13px;
text-align: center;
border-bottom: 1px solid #38f;
margin-left: 7px;
margin-top: 10px;
}
.img_baidu{
width:350px;
display:block;
margin:0 auto;
}
.img_erWeiMa{
width:65px;
margin-left:47%;
}
.input_search{
width:500px;
height:30px;
float:left;
}
.button_ok{
width: 100px;
height: 36px;
color: #fff;
font-size: 15px;
letter-spacing: 1px;
background: #3385ff;
border:0;
outline: medium;
float:left;
}
.div_photo{
width:20px;
position:absolute;
margin-left:460px;
margin-top:9px;
}
.img_photo{
width:20px;
}
</style>
</head>
<body>
<div class="div_title">
<div class="div_menv div_gengDuo">More products</div>
<div class="div_menv">Set up</div>
<div class="div_menv">Sign in</div>
<div class="div_menv">learning</div>
<div class="div_menv">Post Bar</div>
<div class="div_menv">video</div>
<div class="div_menv">Map</div>
<div class="div_menv">hao123</div>
<div class="div_menv">Journalism</div>
</div>
<div class="div_head">
<img src="baidu.jpg" class="img_baidu"/>
</div>
<div class="div_search">
<input id="wd" name="wd" form="search" type="text" class="input_search"/>
<button id="ok" name="ok" type="submit" value="Submission" form="search" class="button_ok">Use Baidu Search</button>
<div class="div_photo"><img src="photo.jpg" class="img_photo"/></div>
</div>
<div class="div_erWeiMa">
<img src="er.jpg" class="img_erWeiMa"/>
</div>
<div class="div_foot">
<a href="https://Www.baidu.com/cache/sethelp/help.html "> set Baidu as home page</a>
<a href="http://Home. Baidu. COM / "> about Baidu</a>
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome">About  Baidu</a>
<a href="http://e. Baidu. COM /? Refer = 888 "> Baidu promotion < / a > < br >
</div>
<div class="div_tail">
©2018 Baidu <a href="https://Www.baidu.com/duty/ "> required before using Baidu</a>
<a href="http://Jianyi. Baidu. COM / "> feedback</a>
//Jingicp certificate no.030173
<a href="http://Www.beian.gov.cn/portal/registersysteninfo? Recordcode = 11000002000001 "> jinggong.net.anbei no.11000002000001</a>
</div>
<form id="search" action="http://www.baidu.com/s" method="get">
</form>
</body>
</html>