前端作品仿2015/3/21百度首页面

因兴趣和学习需要, 用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">&copy;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'>下次自动登陆"+
    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
    "<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;'>"+
    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
    "立即注册</a><br><br><br><br>"+
    "<hr color='silver'><br>"+
    "<span id='moreway'>可以用以下方式登陆"+
    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
    "</span><br><br>"+
    "<img src='QQ.png'>"+
    "<img src='微博.png'>"+
    "<img src='微信.png'>"+
    "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+
    "</div>";  
    showMessageBox('登录百度账号',messContent,370);  
} 

文件中涉及的部分图片有
bd_logo1
QQ
百度推广
风云榜
糯米
图片
微博
微信
文库
音乐
知道

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值