web——百度首页

来源：互联网发布：蜂巢网络与无人机编辑：程序博客网时间：2024/06/05 00:42

这个是我第一次写的网页，虽然有点丑，但是还是和你们分享一下啦！这个是仿百度写的，但是点击登录和百度的效果是一样的哦！(图片希望亲们自己去截图哦，改个路径就可以正常使用了哦！)

这是HTML和CSS代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>百度一下，你就知道</title>        <style>            body{                margin: 0;                padding: 0;            }            .tou{                margin-top: -32px;            }            .btn{            }            font:hover{                cursor: pointer;                color: red;            }            .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:white;                z-index: 110;                display: none;            }            .login-top{                position: absolute;                width: 100%;                height: 10%;                background-color: #F7F7F7;            }            .close-login{                display: block;                position: absolute;                right: 10px;                top: 5px;                width: 30px;                height: 30px;                text-align: center;                line-height: 30px;                font-size: 30px;                color: gainsboro;            }            .close-login:hover{                color: #000000;                cursor: pointer;            }            .login-top:hover{                cursor: move;            }        </style>        <script type="text/javascript" src="js/yidong.js"></script>        <script>            //点击登录            function login(){                //获取覆盖图层对象                var backimg = document.getElementById("backimg");                //登录框的div对象                var login = document.getElementById("move_div");                login.style.display = "block";                backimg.style.display = "block";            }            //隐藏登录弹出框            function loginClose(){                //登录框的div对象                var login = document.getElementById("move_div");                //获取覆盖图层对象                var backimg = document.getElementById("backimg");                login.style.display = "none";                backimg.style.display = "none";            }        </script>    </head>    <body>        <table border="0px" width="100%" height="900px">            <tr height="10%">                <td align="right" >                    <div class="tou" >                        <strong ><a href="http://news.baidu.com/" style="color: black;font-size: 15px;">新闻</a>&nbsp;</strong>                        <strong><a href="https://www.hao123.com/"  style="color: black;font-size: 15px;">hao123</a>&nbsp;</strong>                        <strong><a href="http://map.baidu.com/"  style="color: black;font-size: 15px;">地图</a>&nbsp;</strong>                        <strong><a href="http://v.baidu.com/"  style="color: black;font-size: 15px;">视频</a>&nbsp;</strong>                        <strong><a href="https://tieba.baidu.com/index.html"  style="color: black;font-size: 15px;">贴吧</a>&nbsp;</strong>                        <strong><a href="http://xueshu.baidu.com/"  style="color: black;font-size: 15px;">学术</a>&nbsp;</strong>                        <u  style="color: black;font-size: 15px; cursor:pointer" onclick="login()">登录</u>&nbsp;                        <a href="" style="color: black;font-size: 15px;">设置</a>&nbsp;                        <button type="submit" style="border: 0;width: 80px;height: 25px;background-color: #3385FF;color: #ffffff;font-size: 15px;" >更多产品</button>                    </div>                </td>            </tr>            <tr height="40%">                <td align="center" >                    <p>                        <img src="img/baidu.png" width="270px" height="129px"/>                    </p>                        <p>                            <form action="https://www.baidu.com/s">                                <input type="text"  name="wd" value="" style="width: 560px;height: 30px;font-size: 20px;"/>                                <button type="submit" style="border: 0;width: 100px;height: 39px;background-color: #3385FF;color: #ffffff; margin-left: -11px; " >百度一下</button>                            </form>                        </p>                </td>            </tr>                <tr>                    <td align="center">                        <img src="img/ewm.png" width="60px" height="60px" style="margin-top: 260px;">                        <p>                            <b style="color: dimgray;">手机百度</b>                        </p>                        <p style="color: #FFFFFF;">                            <a href="https://www.baidu.com/cache/sethelp/help.html" style="color: darkgrey;">把百度设为主页</a>                            <a href="http://home.baidu.com/" style="color: darkgrey;">关于百度</a>                            <a href="http://ir.baidu.com/phoenix.zhtml?c=188488&p=irol-irhome" style="color: darkgrey;">About Baidu</a>                            <a href="http://e.baidu.com/?refer=888" style="color: darkgrey;">百度推广</a>                        </p>                        <p style="color: darkgrey;">                            ©2017&nbsp;Baidu&nbsp;                            <a href="https://www.baidu.com/duty/" style="color: darkgrey;">使用百度前必读</a>                            &nbsp;                            <a href="https://jianyi.baidu.com/" style="color: darkgrey;">意见反馈</a>                            &nbsp;京ICP证030173号&nbsp;<img src="img/2.png" width="14px" height="17px"/>                            <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11000002000001" style="color: darkgrey;">京公网安备11000002000001 <img src="img/3.png" width="14px" height="17px"/></a>                        </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()">                <b style="color:darkgray;"><img src="img/b.png" style="margin-top: 10px;"/>登录百度账号</b>                <span class="close-login" onclick="loginClose()" >╳</span>            </div>            <div class="dx" style="margin-left: 300px;margin-top: 70px;font-size: 10px;">            <b style="color:darkgray;"><img src="img/sj.png"  />短信快捷登录</b>        </div>            <input placeholder="手机/邮箱/用户名" style="width: 350px;height: 35px;margin-left: 20px;margin-top: 30px;" /><br />            <input placeholder="密码" style="width: 350px;height: 35px;margin-left: 20px;margin-top: 30px;"  /><br />            <div class="fx">            <input type="checkbox" name="checkbox1" value="value1" style="margin-top: 20px;margin-left: 20px;"/>下次自动登录&nbsp;&nbsp;&nbsp;            <a href="#" style="margin-left: 80px;color: darkgrey;">登录遇到问题</a><br />            </div>            <div class="an" style="margin-top: 15px;">                <button type="submit" style="border: 0;width: 90%;height: 39px;background-color: #3385FF;color: #ffffff; margin-left: 15px; " >登录</button>                <a href="#" style="margin-left: 300px;color: darkgrey;">立即注册</a>            </div>            <hr style="margin-top: 50px;color:  #DCDCDC;"/><br />            <div class="di">                <p style="color: darkgray;">可以使用以下方式登录</p>            </div>            <div class="tb">                &nbsp;&nbsp;<img src="img/qq.png" />&nbsp;<img src="img/xl.png" />            </div>        </div>    </body></html>

这是Js代码

/* * 分析： * 获取鼠标实时移动的坐标；m_move_x,m_move_y * 鼠标按下时的坐标；m_down_x,m_down_y * div的坐标；dx,dy * 鼠标按下时，鼠标与div的偏移量；md_x,md_y * div的新坐标；ndx,ndy */var isDown = false; //记录鼠标状态var move_div; //要操作的div对象var m_move_x, m_move_y, m_down_x, m_down_y, dx, dy, md_x, md_y, ndx, ndy;//鼠标按下function down() {    move_div = document.getElementById("move_div");    isDown = true;    //获取鼠标按下时坐标    m_down_x = event.pageX;    m_down_y = event.pageY;    //获取div坐标    dx = move_div.offsetLeft;    dy = move_div.offsetTop;    //获取鼠标与div偏移量    md_x = m_down_x - dx;    md_y = m_down_y - dy;}//鼠标移动function move() {    move_div = document.getElementById("move_div");    //实时更新div的坐标    dx = move_div.offsetLeft;    dy = move_div.offsetTop;    //获取鼠标移动实时坐标    m_move_x = event.pageX;    m_move_y = event.pageY;    //鼠标按下时移动才触发    if(isDown) {        //获取新div坐标，鼠标实时坐标 - 鼠标与div的偏移量        ndx = m_move_x - md_x;        ndy = m_move_y - md_y;        //把新div坐标值赋给div对象        move_div.style.left = ndx + "px";        move_div.style.top = ndy + "px";    }}//鼠标释放function up() {    isDown = false;}

效果图撒
仿百度首页

阅读全文

0 0