一个登录页面

最新推荐文章于 2022-05-20 15:50:51 发布

菜到不会下载软件

最新推荐文章于 2022-05-20 15:50:51 发布

阅读量82

点赞数

分类专栏：前端js 文章标签： js html css

本文链接：https://blog.csdn.net/m0_57446284/article/details/120264607

版权

前端js 专栏收录该内容

41 篇文章 1 订阅

订阅专栏

一、鼠标指针位置坐标

语法格式：

event.clientX //获取水平方向的坐标

event.clientY //获取垂直方向的坐标

二、一个登录页面

这是html页面，主要的功能是构建页面

<body>
    <table id="myTable" cellspacing="0" cellpadding="0">
        <tr>
            <td colspan="2"><img src="xl_top.jpg" /></td>
        </tr>
        <form action="" method="post" name="myform">
            <tr>
                <td class="left">邮箱名：</td>
                <td><input id="email" type="text" class="txt" onmouseover="this.className='txtChange'" onmouseout="this.className='txt'" /> @sina.com</td>
            </tr>
            <tr>
                <td class="left">密码：</td>
                <td><input id="pwd" type="password" class="txt" onmouseover="this.className='txtChange'" onmouseout="this.className='txt'" /></td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td style="height:35px;"><input name="btn" type="submit" value="登录" class="outStyle" onmouseover="this.className='overStyle'" onmouseout="this.className='outStyle'" /></td>
            </tr>
        </form>
    </table>
</body>

这是style，主要是优化页面

body {
            margin: 0;
            padding: 0;
            font-size: 12px;
            line-height: 25px;
        }
        
        #myTable {
            width: 283px;
            margin-left: auto;
            margin-right: auto;
            margin-top: 0;
            margin-bottom: 0;
            border: solid 1px #c1c1c1;
            background-color: #f9f9f9;
        }
        
        .left {
            width: 100px;
            text-align: right;
        }
        
        .txt {
            border: solid 1px #cccccc;
            width: 100px;
            height: 16px;
        }
        
        .txtChange {
            border: solid 1px #00a8a8;
            width: 100px;
            height: 16px;
        }
        
        .overStyle {
            background-image: url(images/btn1.jpg);
            background-repeat: no-repeat;
            color: #489379;
            width: 102px;
            height: 24px;
            text-align: center;
            border: 0;
            font-weight: bold;
            cursor: pointer;
        }
        /*鼠标移出时调用的样式*/
        
        .outStyle {
            background-image: url(images/btn2.jpg);
            background-repeat: no-repeat;
            color: #489379;
            width: 102px;
            height: 24px;
            text-align: center;
            border: 0;
            font-weight: bold;
            cursor: pointer;
        }

以上就是一个完整的登录页面了

菜到不会下载软件

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
一个登录页面

一、鼠标指针位置坐标语法格式：event.clientX //获取水平方向的坐标event.clientY //获取垂直方向的坐标二、一个登录页面这是html页面，主要的功能是构建页面<body> <table id="myTable" cellspacing="0" cellpadding="0"> <tr> <td colspan="2"><img src="xl...
复制链接

扫一扫