因兴趣和学习需要, 用html/css/javascript写了百度首页面部分代码,其中,首航栏中的登陆弹出功能为借鉴
只做了登陆 设置 更多产品的链接, 本地使用chrome IE6验证, win7系统
页面效果:
【baidu.html】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百度一下,你就知道</title>
<link href="baidu.css" rel="stylesheet" type="text/css"/>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="baidu.js"></script>
<style>
html,body{font-size:12px;margin:0px;height:100%;}
.mesWindow{border:#666 1px solid;background:#fff;}
.mesWindowTop{border-bottom:#eee 1px solid;margin-left:4px;padding:3px;font-weight:bold;text-align:left;font-size:12px;}
.mesWindowContent{margin:4px;font-size:12px;}
.mesWindow .close{height:15px;width:35px;border:none;cursor:pointer;text-decoration:underline;background:#fff}
</style>
</head>
<body>
<!--首航栏-->
<div class="navi">
<a href="新闻.html" class="navi1">新闻</a>
<a href="hao123.html" class="navi1">hao123</a>
<a href="地图.html" class="navi1">地图</a>
<a href="视频.html" class="navi1">视频</a>
<a href="贴吧.html" class="navi1">贴吧</a>
<!--弹出登录框-->
<span onclick="testMessageBox()"><a href="#" class="navi2" >登陆</a></span>
<a href="设置.html" class="navi2"><span id="test1" onmouseover="settingMouseOver()" onmouseout="settingMouseOut()">设置</span></a>
<a href="更多产品.html" class="navi3"><span class="bg" onmouseover="productMouseOver()" onmouseout="productMouseOut()" id="bg0" >更多产品</span></a>
</div>
<!--隐藏在设置下的设置层-->
<div id="myList1">
<ul id="myList" class="myList0" onmouseover="settingPopMouseOver()" onmouseout="settingPopMouseOut()"">
<li class="full"><a href="搜索设置.html" class="shezhi"><font face="宋体">搜索设置</font></a></li>
<li class="full"><a href="高级设置.html" class="shezhi"><font face="宋体">高级搜索</font></a></li>
<li class="full"><a href="关闭预测.html" class="shezhi"><font face="宋体">关闭预测</font></a></li>
<li class="full"><a href="搜索历史.html" class="shezhi"><font face="宋体">搜索历史</font></a></li>
<li class="full"><a href="意见反馈.html" class="shezhi"><font face="宋体">意见反馈</font></a></li>
</ul>
</div>
<!--隐藏在更多产品下的产品层-->
<div class="more" id="more0" onmouseover="productPopMouseOver()" onmouseout="productPopMouseOut()">
<a href="糯米.html"><img src="糯米.png" class="imgShow"/></a><br><a href="糯米.html" class="end2">糯米</a><br>
<a href="知道.html"><img src="知道.png" class="imgShow"/></a><br><a href="知道.html" class="end2">知道</a><br>
<a href="音乐.html"><img src="音乐.png" class="imgShow"/></a><br><a href="音乐.html" class="end2">音乐</a><br>
<a href="图片.html"><img src="图片.png" class="imgShow"/></a><br><a href="图片.html" class="end2">图片</a><br>
<a href="文库.html"><img src="文库.png" class="imgShow"/></a><br><a href="文库.html" class="end2">文库</a><br>
<a href="风云榜.html"><img src="风云榜.png" class="imgShow"/></a><br><a href="风云榜.html" class="end2">风云榜</a><br>
<a href="百度推广.html"><img src="百度推广.png" class="imgShow"/><br><a href="百度推广.html" class="end2">百度推广</a><br><br>
<span ><a href="全部产品.html" class="end2">全部产品>></a></span>
</div>
<!--Logo图片-->
<div class="logo">
<img src="bd_logo1.png" width="256px">
</div>
<!--搜索栏-->
<div class="search0">
<form id="search1" method="get">
<input type="search" id="s" name="s" width="540px" height="38px">
<input type="submit" id="baid" value="百度一下" width="100px" height="38px">
</form>
</div>
<!--页面底部-->
<div class="end">
<a href="百度主页.html" class="end1">把百度设为主页</a>
<a href="关于百度.html" class="end1">关于百度</a>
<a href="AboutBaidu.html" class="end1">About Baidu</a><br/>
<span class="light">©2015 Baidu <a href="百度必读.html" class="end2">使用百度前必读</a>京ICP证031373号</span>
</div>
<body>
</html>然后是【baidu.css】
/*设置页面格式*/
body{
margin:0 auto;
}
/*设置首航栏鼠标悬停时字体颜色为蓝色*/
a:hover{
color:blue;
}
/*设置首航栏在页面中的位置字间距*/
.navi{
margin-top:20px;
text-align:right;
padding:5px;
/*background-color:pink;*/
}
/*设置首航栏字体颜色大小*/
.navi1{
color:black;
font-weight:bold;
padding:5px;
font-size:13px;
}
.navi2{
color:black;
padding:5px;
font-size:13px;
}
/*将设置的隐藏层隐藏*/
.myList0{
display:none;
}
/*设置隐藏层样式*/
#myList{
margin:0 auto;
margin-right:55px;
float:right;
border:1px solid black;
width:58px;
height:125px;
padding:0px;
padding-left:2px;
padding-top:5px;
line-height:200%;
}
/*无序列表无项目符号*/
ul{
list-style-type:none;
}
/*更多产品的隐藏层默认隐藏*/
.more{
display:none;
}
/*设置隐藏层样式*/
#more0{
background-color:#f5f5f5;
text-align:center;
float:right;
}
/*悬停设置隐藏层后字体背景的变化*/
.shezhi{
font-size:13px;
text-decoration:none;
color:black;
}
.full:hover{
background-color:#3399ff;
color:white;
}
.shezhi:hover{
color:white;
}
/*悬停更多产品的隐藏层后字体背景的变化*/
.bg{
background-color:#3399ff;
color:white;
padding:5px;
font-size:13px;
margin:2px;
}
#bg0{
background-color:#3399ff;
}
/*logo样式*/
.logo{
top:60px;
position:relative;
width:306px;
height:128px;
text-align:center;
margin:0 auto;
}
/*搜索栏样式*/
.search0{
text-align:center;
margin:0 auto;
/*border:2px solid red;*/
top:60px;
position:relative;
width:663px;
height:60px;
top:80px;
}
#s{
width:540px;
height:38px;
}
#baid{
width:100px;
height:38px;
background-color:#3399ff;
color:white;
font-size:14px;
}
/*尾栏样式*/
.end{
text-align:center;
margin:0 auto;
width:341px;
height:68px;
/*border:2px solid red;*/
position:relative;
top:300px;
line-height:150%;
color:#808080;
}
.end1{
font-size:8px;
padding:5px;
}
.end2{
color:#808080;
font-size:8px;
text-decoration:none;
}
.end2:hover{
color:#808080;
text-decoration:underline;
}
.light{
font-size:7px;
line-height:100%;
}然后是【baidu.js】
var settingFlag=false; //导航栏中'设置'的标志位
var settingPopFlag=false; //隐藏的'设置'的标志位
var productFlag=false; //导航栏中'更多产品'的标志位
var productPopFlag=false; //隐藏的'更多产品'的标志位
function productMouseOver(){ //鼠标悬停首航栏中的更多产品时
productFlag=true;
more0.style.display='block';
bg0.style.backgroundColor="#f5f5f5";
bg0.style.color="black";
myList.style.display='none';
}
function productMouseOut(){ //鼠标离开首航栏中的更多产品时
productFlag=false;
if(productFlag==false && productPopFlag==false){
more0.style.display='none';
bg0.style.backgroundColor="#3399ff";
bg0.style.color="white";
}
setTimeout(prodecutOutDelay,100); //要等更多产品隐藏层先显示方可
}
function productPopMouseOver(){ //鼠标悬停更多产品的隐藏层时
productPopFlag=true;
more0.style.display='block';
myList.style.display='none';
bg0.style.backgroundColor="#f5f5f5";
bg0.style.color="black";
}
function productPopMouseOut(){ //鼠标离开更多产品的隐藏层时
productPopFlag=false;
if(productFlag==false && productPopFlag==false){
more0.style.display='none';
}
}
function prodecutOutDelay(){
if(productFlag==false && productPopFlag==false){
myList.style.display='none';
}
}
function settingMouseOver(){ //鼠标离开首航栏中的设置时
settingFlag=true;
myList.style.display='block';
more0.style.display='none';
}
function settingPopMouseOver(){ //鼠标悬停设置的隐藏层时
settingPopFlag=true;
myList.style.display='block';
more0.style.display='none';
}
function settingPopMouseOut(){ //鼠标离开设置的隐藏层时
settingPopFlag=false;
if(settingFlag==false && settingPopFlag==false){
myList.style.display='none';
}
}
function settingMouseOut(){ //鼠标离开首航栏中的设置时
settingFlag=false;
setTimeout(testDelay,100);
}
function testDelay(){
if(settingFlag==false && settingPopFlag==false){
myList.style.display='none';
}
}
function showMessageBox(wTitle,content,wWidth)
{
var bWidth=parseInt(document.documentElement.scrollWidth);
var bHeight=parseInt(document.documentElement.scrollHeight);
var back=document.createElement("div");
back.id="back";
var styleStr="top:0px;left:0px;position:absolute;background:#666;width:"+bWidth+"px;height:"+bHeight+"px;opacity:0.40";
back.style.cssText=styleStr;
document.body.appendChild(back);
var mesW=document.createElement("div");
mesW.id="mesWindow";
mesW.className="mesWindow";
mesW.innerHTML="<div class='mesWindowTop'><table width='100%' height='100%'><tr><td>"+
wTitle+"</td><td style='width:1px;'>"+
"<input type='button' onclick='closeWindow();' title='关闭窗口' class='close' value='×' />"+
"</td></tr></table></div>"+
"<div class='mesWindowContent' id='mesWindowContent'>"+
content+"</div><div class='mesWindowBottom'></div>";
styleStr="left:"+(window.outerWidth-wWidth)/2+"px;top:"+(window.outerHeight)/4+"px;position:absolute;width:"+wWidth+"px;height:450px;";
mesW.style.cssText=styleStr;
document.body.appendChild(mesW);
}
//关闭窗口
function closeWindow(){
if(document.getElementById('back')!=null)
{
document.getElementById('back').parentNode.removeChild(document.getElementById('back'));
}
if(document.getElementById('mesWindow')!=null)
{
document.getElementById('mesWindow').parentNode.removeChild(document.getElementById('mesWindow'));
}
}
//测试弹出
function testMessageBox(){
messContent="<div style='padding:20px 0 20px 0;text-align:center'>"+
"<input style='font-size:14px;height:35px;width:295px;' type='email' id='email' name='email' placeholder='手机/邮箱/用户名'><br/><br/>"+
"<input style='font-size:14px;height:35px;width:295px;' type='password' id='pwd' placeholder='密码'><br/><br/>"+
"<input type='checkbox' id='autologin'>下次自动登陆"+
" "+
"<a href='忘记密码.html' id='fgtpwd' style='text-decoration:none;'>忘记密码?</a><br><br>"+
"<input type='submit' id='baid' style='width:295px;' value='登陆'><br><br>"+
"<a href='立即注册.html' id='register' style='text-decoration:none;'>"+
" "+
"立即注册</a><br><br><br><br>"+
"<hr color='silver'><br>"+
"<span id='moreway'>可以用以下方式登陆"+
" "+
"</span><br><br>"+
"<img src='QQ.png'>"+
"<img src='微博.png'>"+
"<img src='微信.png'>"+
" "+
"</div>";
showMessageBox('登录百度账号',messContent,370);
} 文件中涉及的部分图片有
扫一扫
696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
