<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>百度一下,你就知道</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<nav>
<span class="nav">
<a href="#">新闻</a>
<a href="#">hao123</a>
<a href="#">地图</a>
<a href="#">直播</a>
<a href="#">视频</a>
<a href="#">贴吧</a>
<a href="#">学术</a>
<a href="#">更多</a>
</span>
<a href="#"id="anniu">登录</a>
<a href="#" >设置</a>
</nav>
<div align="center" class="box" style="margin-top:170px;">
<div>
<img src="img/logo.png">
</div>
<div class="box2">
<span><input type="text" value="" class="ssk" placeholder=" 请输入内容" /></span>
<span><input type="submit" value="百度一下" class="baidu" /></span>
</div>
</div>
<div class="JieWei">
<a href="#"style="left: 20px;">设为首页</a>
<a href="#">关于百度</a>
<a href="#">About Baidu</a>
<a href="#">百度营销</a>
<a href="#">使用百度前必读</a>
<a href="#">意见反馈</a>
<a href="#">帮助中心</a>
<a href="#">京公网安备</a>
<a href="#"></a>
</div>
</body>
</html>
body{
margin: 0px;
padding: 0px;
height: 700px;
width: 100%;
}
span{
display: inline-block;
}
span>input{
margin: 0px;
padding: 0px;
}
img{
width: 200px;
height: 60px;
margin-bottom: 20px;
}
.ssk{
width: 548px;
height: 40px;
border-radius: 10px 0px 0px 10px;
}
.ssk:hover{
}
.baidu{
width: 108px;
height: 40px;
color: white;
background-color: #4e6ef2;
border-radius: 0px 10px 10px 0px;
border: none;
font-size: 15px;
}
.baidu:hover{
background-color: #4664db;
}
.nav>a{
text-decoration: none;
margin-left: 23px;
font-size: 13px;
color: black;
margin-top: 20px;
float: left;
}
.nav>a:hover{
color: #4e6ef2;
}
nav>a{
text-decoration: none;
margin-right: 23px;
font-size: 13px;
color: black;
margin-top: 20px;
float: right;
}
#anniu{
background-color: #4664DB;
width: 45px;
padding: 5px;
color: white;
text-align: center;
border-radius: 5px;
}
.JieWei>a{
display: inline;/*行内元素*/
text-decoration: none;/*去除下划线*/
text-align: center;
font-size: 13px;
color: grey;
position: fixed;
bottom: 10px;
width: 100%;
}
.JieWei>a:hover/*鼠标悬停*/{
color: black;
}
