这是原页面。
这是我写的页面，我想请教的问题是原页面中的输入框中有个小相机，在输入框中吧相机怎么写进去。还有原页面导航栏的位置有设置和更多产品，当鼠标在这两个位置的时候，会出现选择的东西，怎么写。
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link rel="stylesheet" href="css/style.css" type="text/css"/ >
</head>
<body>
<!--百度顶部导航栏 开始-->
<!--百度导航栏 新闻 hao123 地图 视频 贴吧 学术 登陆 设置 更多设置-->
<div class="baidu_nav">
<!--nav导航栏标签-->
<nav class="top_nav">
<a href="javascript:void (0)" class="jiacu">新闻</a>
<a href="javascript:void (0)" class="jiacu">hao123</a>
<a href="javascript:void (0)" class="jiacu">地图</a>
<a href="javascript:void (0)" class="jiacu">视频</a>
<a href="javascript:void (0)" class="jiacu">贴吧</a>
<a href="javascript:void (0)" class="jiacu">学术</a>
<a href="javascript:void (0)">登陆</a>
<a href="javascript:void (0)">设置</a>
<a href="javascript:void (0)" class="more_product">更多产品</a>
</nav>
</div>
<!--百度顶部导航栏 结束-->
<!--百度中间部分 包含logo，搜索栏 开始-->
<div class="middle">
<!--logo 开始-->
<div class="logo"></div>
<!--logo 结束-->
<!--搜索栏包含搜索文本框,搜索按钮及相机 开始-->
<div class="search_box">
<input type="text" class="search_input"/ >
<input type="button" class="search_button" value="百度一下"/ >
</div>
<!--搜索栏包含搜索文本框,搜索按钮及相机 结束-->
</div>
<!--百度中间部分 结束-->
<!--百度底部部分 包含二维码及链接 开始-->
<div class="bottom">
<!--二维码 开始-->
<ul>
<li class="ewm">
<img src="image/ewm.png" width="60" height="60"/ >
</li>
<li class=phone_bd>百度</li>
</ul>
<!--二维码 结束-->
<!--链接部分 开始-->
<div class="lj_bd">
<p>
<a href="javascript:void (0)">把百度设为主页</a>
<a href="javascript:void (0)">关于百度</a>
<a href="javascript:void (0)">About Baidu</a>
<a href="javascript:void (0)">百度推广</a>
</p>
<p class="bottom_bottom">
<a>©2018 Baidu</a>
<a href="javascript:void (0)">使用百度前必读 意见反馈</a>
<a>京ICP证030173号</a>
<span class="icon"></span>
<a href="javascript:void (0)">京公网安备11000002000001号</a>
<span class="icon icon_1"></span>
</p>
</div>
</div>
<!--链接部分 结束-->
<!--百度底部部分 结束-->
</body>
</html>
css
*{
margin:0 auto;
padding:0px;
}
.baidu_nav{
width:100%;
height:24px;
margin-top:19px;
}
.top_nav{
height:24px;
float:right;
}
.top_nav a{
display:block;
line-height:24px;
padding:0px 9px;
font-size:13px;
color:black;
float:left;
}
/*伪类样式：悬停 当我鼠标悬停在.top_nav a时触发以下样式*/
.top_nav a:hover{
color:#00c;
}
.jiacu{
/*字体加粗*/
font-weight:bold;
}
.more_product{
/*<a>标签是行级标签，行级标签是不能直接使用样式设置宽高的，要想给他设置宽高，得把行级标签变成块级标签display: block;让行级标签变成块级标签*/
display:block;
width:60px;
height:24px;
background-color:#38f;
/*取消下划线*/
text-decoration:none;
/*最高优先级*/
color:white!important;
float:left;
}
.middle{
width:100%;
height:191px;
margin-top:50px;
}
.logo{
height:129px;
width:270px;
background-image: url("../image/bd_logo1.png");
background-size: 270px 129px;
}
.search_box{
width:641px;
height:37px;
margin-top:20px;
}
.search_input{
width:539px;
height:34px;
border:1px solid darkgray;
float:left;
}
.search_button{
width:100px;
height:37px;
font-size:15px;
background-color:#3385ff;
color:white;
font-family:"Microsoft YaHei";
border:0px;/*缩小文本框和按钮框的距离*/
float:left;
}
.search_button:hover{
background-color:#2d78f4;
}
.bottom{
width:640px;
height:200px;
margin-top:150px;
}
.ewm{
width:60px;
height:60px;
}
.phone_bd{
text-align:center;
width:60px;
height:23px;
color:#666;
font-size:12px;
font-weight:bold;/*加粗*/
}
.lj_bd{
width:100%;
height:46px;
}
.lj_bd p{
width:640px;
text-align: center;
font-size: 12px;
color:#999;
margin-top:10px;
}
.lj_bd p a{
padding:0px 10px;
font-size: 12px;
color:#999;
}
.bottom_bottom{
width:640px;
height:17px;
}
.bottom_bottom a{
display:block;
float:left;
}
.icon{
display:block;
width:14px;
height:17px;
background-image:url("../image/icon.png");
float:left;
background-position:-600px -96px;/*背景位移*/
}
.icon_1{
background-position:-623px -96px;
}