百度页面制作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title></title>
<script type="text/javascript">
</script>
<style>
body{
margin: 0;
padding: 0;
}
.back-ing{
width: 100%;
height: 100%;
position: absolute;
background-color :#000000;
opacity: 0.3;
top: 0;
z-index: 100;
display: none;
}
#dj:hover{
color: red;
cursor: pointer;
}
.login{
position: absolute;
border: 1px solid ghostwhite;
width: 500px;
height: 400px;
background-color: white;
top: 30%;
left: 40%;
z-index: 110;
display: none;
}
.login-top{
position: absolute;
width: 100%;
height: 40px;
background-color: grey;
opacity: 0.2;
}
.login-top:hover{
cursor: move;
}
</style>
<script type="text/javascript" src="js/a.js" ></script>
<script>
function login(){
var backing = document.getElementById("backing");
backing.style.display="block";
var login = document.getElementById("move_div");
login.style.display="block";
}
function loginClose(){
var backing = document.getElementById("backing");
backing.style.display="none";
}
</script>
</head>
<body>
<table border="0px" width="100%" height="900px">
<tr height="10%">
<td align="right">
<a href="https://www.xinwen.com/s">新闻</a>
<a href="https://www.hao123.com/s">hao123</a>
<a href="https://www.ditu.com/s">地图</a>
<a href="https://www.shiping.com/s">视屏</a>
<a href="https://www.tieba.com/s">贴吧</a>
<a href="https://www.xueshu.com/s">学术</a>
<div id="backing" class="back-ing"></div>
<a onclick="login()" id="dj">登录</a>
<a href="https://www.shezhi.com/s">设置</a>
<a href="">更多产品</a>
</td>
</tr>
<div id="move_div" class="login" >
<div class="login-top" onmouseup="up()" onmousedown="down()" onmousemove="move()"></div>
</div>
<tr height="70%">
<td align="center">
<P>
<img src="img/百度图片.png"width="270" height="129"/>
</P>
<p>
<form action="https://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: #3385FF;color:white">百度一下</button>
</form>
</p>
</td>
</tr>
<tr style=" display:block margin-bottom: 20px;" height="20%" >
<td align="center">
<p>
<img src="img/手机百度.png"width="60px" height="60px"/>
</p>
<p align="center">
<b>手机百度</b>
</p>
<p>
<a href="">把百度设为主页</a>
<a href="">关于百度</a>
<a href="">About Baidu</a>
<a href="">百度推广</a>
</p>
<p>
©2017 Baidu<a href="">使用百度前必读，意见反馈</a>京ICP证030173号<img src="img/copy_rignt_24.png"/>
<a href="">京公网安备11000002000001号</a><img src="img/SXP(C3)C@)7H3VP8CE$(MJJ.png"/>
</p>
</td>
</tr>
</table>
</body>
</html>
本文介绍了一个仿百度首页的设计案例，包括HTML结构搭建、CSS样式定义及JavaScript交互功能实现。该页面具备响应式布局，并通过JavaScript实现了登录弹窗的显示与隐藏功能。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
