JavaScript学习笔记(二)--创建登录界面,链接服务器

第一个前端项目--创建登录界面,链接服务器

笔者最近在写一个电子工资条的登录、首页、导入、查看的前端页面。因为自己大学主修.net,前后台代码都是自己编写,突然只写前台,对JavaScript基础编写很不熟悉(以前总是引用插件,在学校学的还是太少了),尤其是链接服务器后台,简直是抓狂。就算引用最基础的js文件也总报错。

依据同部门老师的建议,笔者计划近期多花时间精力掌握JavaScript的基础知识,因为网上的资料都是理论性的,并没有实战开发可以参考,所以笔者打算边学边摸索。万事开头难,相信在这次前端设计中能够总结出很多有实际意义的文章。

html部分:

<body>
<div class="division-line line1">div>
<div class="division-line line2">div>
<div class="container">
    <div class="header">
        <div class="logo fl">div>
        <span class="title1">
            <a href="http://www.jift.edu.cn"><img src="images/logo.png" height="40" width="200"/>a>
        span>
        <span class="title2">联系我们span>
    div>
    <div class="main">
        <div class="login-box">
            <form    id="login-form" method="post">
                <div class="login-title">登录薪资核算平台div>
                
                <div class="input-box">
                    <table class="table-style">
                        <tr>
                            <td>

                                <input class="input-style" id="teacherId" placeholder="用户名" name="teacherId"/>
                            td>
                        tr>
                        <tr>
                            <td>

                                <input class="input-style" id="password" type="password" placeholder="密码" name="password"/>
                            td>
                        tr>
                        <tr>
                            <td>
                               <input  class="login-btn" value="登录" id="login"  onclick="submitLogin()" />
                            td>
                        tr>
                        <tr>
                            <td>
                                未开通应用 现在注册
                            td>
                        tr>
                    table>
                div>
            form>
        div>
    div>
div>
<div class="footer">
    <div class="l-link">
        <a href="javascript:;">关于我们a>|<a href="javascript:;">常见问题a>|<a href="javascript:;">服务条款a>|<a
            href="javascript:;">投诉建议a>
    div>
div>
body>
登录代码

 

css部分:

body{

    margin: 0px;
    background: #f6f6f6;
}
.container {
    width: 100%;
    margin: 0 auto;
}
.header {
    height: 77px;
    position: relative;
    background-color: White;
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05);
}

.header .title1 {
    font-size: 18px;
    color: #666;
    display: block;
    position: relative;
    top: 21px;
}

.header .title2 {
    font-size: 18px;
    color: #999;
    display: block;
    position: relative;
    float: right;
    width: 200px;
    padding-right: 300px;
    text-decoration: none;
    margin-bottom: 40px;
}

.header .logo {
    height: 77px;
    width: 59px;
    margin-left: 143px;
    _margin-left: 70px;
    margin-right: 10px;
}

/*********************header end******************************************/
/*********************main begin******************************************/
.main {
    height: 520px;

    position: relative;
    margin-left: 30px;
    margin-right: 30px;
    text-align: center;
    align:center ;
}

.login-box {
    width: 810px;
    height: 380px;
    margin-left: -405px;
    position: absolute;
    text-align: center;
    margin-top: 90px;
    border: 1px solid #eee;
    box-shadow: 0px 0px 1px #f6f6f6;
    background-color: White;
    border-radius: 4px;
    align:center ;
    left: 50%;
    text-align: center;

}

.login-title {
    height: 80px;
    line-height: 80px;
    color: #555555;
    font-size: 24px;
    width: 90%;
    margin-left: 5%;
    border-bottom: 1px solid #d4d4d4;
}

.input-box {
    height: 260px;
    width: 99%;
    margin: 0 auto;
    position: relative;
  text-align: center;
}
.input-box2{
    height: 300px;
    width: 48%;
    float:right;

}
.table-style{
    height: 80%;
    width: 100%;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 10%;
}
.input-style{
    height: 35px;
    width:258px;
    border-radius: 3px;
    border: 1px solid #cccccc;

}
.login-button{
    height: 45px;
    cursor: pointer;
    padding: 10px ;
    font-size: 18px;
    line-height: 1.33;
    border-radius: 5px;
    color: #fff;
    background-color: #43907c;
    border-width: 0px;
    border-color: #3ca58a;
    width: 275px;
}

/*用户名前小图标正常样式 灰色*/
.input-box .user-name {
    top: 15px;
    background-position: -810px -156px;
}

/*获得焦点样式 蓝色*/
.user-name.focus {
    background-position: -737px -156px;
}

/*密码前小图标正常样式 灰色*/
.input-box .password {
    top: 58px;
    background-position: -736px -188px;
}

/*获得焦点样式,蓝色*/
.password.focus {
    background-position: -810px -188px;
}

.input-box .password-ipt {
    border-top: 1px solid #d4d4d4;
    top: 46px;
    clip: rect(0px 235px 44px 20px);
}
.login-text {
    font-size: 14px;
    color: #999;
}
/*记住密码前的选项框 未选择样式*/
.remember-icon {
    display: inline-block;
    height: 18px;
    width: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 3px;
    float: left;
    margin-top: 12px;
    margin-right: 5px;
    _line-height: 18px;
    cursor: pointer;
}
/*选中样式 多个蓝色对勾*/
.remember-icon.cur {

    background-position: -740px -228px;
}
.remember-text {
    display: inline-block;
    float: left;
}
.login-btn {
    clear: both;
    display: block;
    width: 260px;
    height: 45px;
    line-height: 45px;
    margin: 0 auto;
    border-radius: 5px;
    color: #fff;
    background: #55b6e9;
  /*  cursor: pointer;*/
    font-size: 16px;
   text-align: center;
}
.login-btn:hover {
    background: #a1defd;
}
.login-btn:active {
    background:  #55b6e9;
}
/*********************main begin******************************************/
/*********************footer begin******************************************/
.footer {
    height: 80px;
    margin-top: 48px;
    line-height: 80px;
    text-align: center;
    clear: both;
    font-size: 12px;
    color: #999;
    width: 100%;
    background-color: White;
    position: absolute;
    bottom: 0px;

}
.footer a {
    text-decoration: none;
    color: #999;
}
/*********************footer end******************************************/
.fl {
    float: left;
}
.fr {
    float: right;
}
.line1 {
    top: 112px;
}
.line2 {
    top: 631px;
}
登录css代码

 

js部分:




    电子工资条
    
    
    
    
    
登录js代码

 

因为页面头部和底部只是htmlcss效果,效果图只截取中间部分:

JavaScript学习笔记(二)--创建登录界面,链接服务器_第1张图片

 

转载于:https://www.cnblogs.com/zyh-blog123/p/11016527.html

你可能感兴趣的:(JavaScript学习笔记(二)--创建登录界面,链接服务器)