百度一下,你就知道!
<style>
.b a{
color: black;
}
body{
margin: 0;
padding: 0;
}
font:hover{
cursor: pointer;
color:blue ;
}
.back-img{
border: 1px solid #000000;
position: absolute;
width: 100% ;
height: 100%;
top: 0px;
left: 0px;
background-color: #000000;
opacity: 0.3;
z-index: 100;
display: none;
}
.login{
border: 1px solid #000000;
width: 390px;
height: 500px;
position: absolute;
top: 26%;
left: 35%;
background-color: #ffffff;
z-index: 110;
display: none;
}
.login_top{
position: absolute;
width: 100%;
height: 10%;
background-color: #E3E0E0;
}
.close_login{
display: block;
position: absolute;
right: 10px;
top: 5px;
width: 30px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 25px;
color: #FFFFFF;
}
.close_login:hover{
border: 1px solid #ffffff;
cursor: pointer;
}
.login_top:hover{
cursor: move;
}
</style>
<script type="text/javascript" src="js/a.js" ></script>
<script>
function login(){
var backimg = document.getElementById("backimg");
var login = document.getElementById("move_div");
login.style.display = "block";
backimg.style.display = "block";
}
function loginClose(){
var login = document.getElementById("move_div");
var backimg = document.getElementById("backimg");
login.style.display = "none";
backimg.style.display = "none";
}
</script>
</head>
<body>
<div class="b">
<table border="0px" width="100%" height="900px">
<tr height="10%">
<td align="right">
<a href="http://news.baidu.com">新闻</a>
<a href="http://www.hao123.com">hao123</a>
<a href="http://map.baidu.com">地图</a>
<a href="http://v.baidu.com">视频</a>
<a href="http://tieba.baidu.com">贴吧</a>
<a href="http://xueshu.baidu.com">学术</a>
<font onclick="login()">登录</font>
<a href="http://www.baidu.com/gaoji/preferences.html">设置</a>
<a href="http://www.baidu.com/more" >更多产品</a>
</td>
</tr>
</div>
<tr height="40%">
<td align="center">
<p>
<img src="img/logo.png" width="270px" height="129px"/>
</p>
<p>
<form name="wd" action="http://www.baidu.com/s">
<input type="hidden" name="ie" value="gbk" />
<input type="text" name="wd" style="width: 540px;height: 36px; font-size: 20px;" />
<button type="submit" style="border: 0;width: 100px;height: 36px;background-color: #3385FF;color: #ffffff;font-size: 16px;">百度一下</button>
</form>
</p>
</td>
</tr>
<tr>
<td align="center">
<img src="img/2017-09-06_173307.png"/>
<p style="font-size: 13px;color: gray;">
<a href="https://www.baidu.com/cache/sethelp/help.html" style="color: gray;">把百度设为主页 </a>
<a href="http://home.baidu.com/"style="color: gray;">关于百度 </a>
<a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome"style="color: gray;">About Baidu</a>
<a href="http://e.baidu.com/?refer=888"style="color: gray;">百度推广</a>
</p>
<p style="font-size: 13px";color: "gray;">
<a style="color: gray;">©2017 Baidu</a>
<a href="https://www.baidu.com/duty/"style="color: gray;">使用百度前必读 </a>
<a href="http://help.baidu.com/"style="color: gray;">意见反馈</a>
<a style="color: gray;">京ICP证030173号</a>
<img src="img/2017-09-06_175307.png" />
<a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="color: gray;">京公网安备11000002000001号</a>
<img src="img/2017-09-06_175254.png" />
</p>
</td>
</tr>
</table>
<div id="backimg" class="back-img" ></div>
<div id="move_div" class="login">
<!--登录弹出框顶部-->
<div class="login-top" onmousedown="down()" onmouseup="up()" onmousemove="move()">
<a>
<img src="img/2017-09-21_145311.png" />
</a>
<a>登录百度账号</a>
<span class="close-login" onclick="loginClose()">×</span>
</div>
</div>
</body>