<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>微信第三次作业</title>
<style>
*{
padding: 0;
margin: 0;
}
.zbc{
height: 40px;
margin: 10px;
/* background-color: pink; */
line-height: 40px;
display: inline-block;
}
.nav{
width: 1020px;
/* background-color: pink; */
margin-right: 0px;
display: inline-block;
text-align: right;
font-size: 13px;
}
/* 左上角链接 */
.zbc a{
color: black;
padding: 0 13px;
text-decoration: none;
font-size: 13px;
}
.zbc a:hover{
color:#52baff;
}
.shezhi1 {
display: inline-block;
padding: 0 10px;
}
.shezhi2 {
list-style: none;
position: absolute;
display: none;
position: absolute;
/* background-color: pink; */
min-width: 78px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding: 2px 14px;
line-height: 30px;
z-index: 10px;
display: block;
text-align: right;
}
.nav a{
color: black;
padding: 0 13px;
text-decoration: none;
font-size: 13px;
display: block;
text-align: right;
margin-right: 0px;
}
.nav span{
font-szie: 13px;
}
.nav a:hover{
color:#52baff;
}
.box{
width: 800px;
height: 300px;
margin: 36px auto;
text-align: center;
}
.box img{
height: 100px;
}
input[type="text"] {
outline: none;
border: 2px solid #a7aab5;
height: 46px;
width: 550px;
box-sizing: border-box;
text-indent: 6px;
font-size: 16px;
border-radius: 10px 0 0 10px;
background: #fff
url(../baidu/tupian.png)
no-repeat;
background-position: right;
;
}
input[type="submit"]{
height: 45px;
width: 100px;
color: white;
font-size: 17px;
background-color: #4e6ef2;
border-radius:0 10px 10px 0 ;
}
/* 输入框聚焦 */
input[type="text"]:focus {
color: #000;
background-color: #fff;
border-color: #4e6ef2 !important;
height: 45px;
border-radius: 10px 0 10px 10px;
}
.dibu{
text-align: center;
/* padding-left: 30px;
position: fixed;
margin-bottom: 100px;
left: 0;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 10px;
background-color: #fbfbfb;
/* position: relative; */
margin-top: 280px;
height: 500px;
}
.dibu a{
text-decoration: none;
font-size: 12px;
padding: 0 13px;
}
.dibu a:hover{
color: #000000;
}
</style>
</head>
<body>
<div class="zbc">
<a href="http://news.baidu.com/" target="_blank" class="top-left" >新闻</a>
<a href="https://www.hao123.com/" target="_blank" class="top-left" >hao123</a>
<a href="https://map.baidu.com/@13035085.64,4303516.59,12z" target="_blank" class="top-left" >地图</a>
<a href="https://live.baidu.com/" target="_blank" class="top-left" >直播</a>
<a href="https://haokan.baidu.com/?sfrom=baidu-top" target="_blank" class="top-left" >视频</a>
<a href="http://tieba.baidu.com/f/user/passport?jumpUrl=http://tieba.baidu.com" target="_blank" class="top-left" >贴吧</a>
<a href="https://xueshu.baidu.com/" target="_blank" class="top-left" >学术</a>
<a href="https://www.baidu.com/more/" target="_blank" class="top-left" >更多</a>
</div>
<div class="nav">
<span class="top-right">
<div class="shezhi1">
<span>设置</span>
<span>登录</span>
<div class="shezhi2">
<a href="" target="_blank">搜索设置</a>
<a href="" target="_blank">高级设置</a>
<a href="" target="_blank">关闭预测</a>
<a href="" target="_blank">隐私设置</a>
<a href="" target="_blank">关闭热榜</a>
</div>
</div>
</span>
</div>
<div class="box">
<div>
<a href="https://www.baidu.com/s?wd=%E4%BB%8A%E6%97%A5%E6%96%B0%E9%B2%9C%E4%BA%8B&tn=88093251_22_hao_pg&sa=ire_dl_gh_logo&rsv_dl=igh_logo_pcs
" target="_blank"><img src="../baidu/baidu.png" alt="" title="点击一下,了解更多"></a>
</div>
<form action="">
<input type="text"><input type="submit" value="百度一下"></inpt>
</form>
</div>
<div class="dibu">
<a href="https://www.baidu.com/cache/setindex/index.html" target="_blank">设为首页</a>
<a href="https://home.baidu.com/" target="_blank">关于百度</a>
<a href="https://home.baidu.com/" target="_blank">About Baidu</a>
<a href="https://www.baidu.com/duty/" target="_blank">使用百度前必读</a>
<a href="https://passport.baidu.com/v2/?login&tpl=service_feedback&u=http%3A%2F%2Fhelp.baidu.com%2Fnewadd%3Fprod_id%3D1%26category%3D4" target="_blank">意见反馈</a>
<a href="https://help.baidu.com/" target="_blank">帮助中心</a>
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001">京公网安备11000002000001号</a>
<a href="https://beian.miit.gov.cn/#/Integrated/index">京ICP证030173号</a>
</div>
</body>
</html>