HTML开发博客之登录页设计

登录页设计

我们首先来完成登录页面的设计

首先在站点目录下新建文件夹,并在其中新建一个html文件,和css文件

QQ截图20161029151608.png

在这里为了使大家更能清楚的看清,我们使用内部样式表的方式来编写css,大家在本地可以引入CSS文件来写,读写更为清楚明朗。

login.html文件

创建文件

在html新建一个div,加入<p>标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    
</head>
<body>
<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>
</body>
</html>

对内部填充内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link href="login.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
    <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
    <p >博客,记录生活中的点点滴滴!</p>
    <p >在博客中,可以畅所欲言,可以学习IT最新的知识!</p>
    <p><input type="text" ></p>
    <p><input type="password" ></p>
    <p><input type="submit" value="确认登陆" ></p>
    <p >忘记密码</p>
    <p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>

依照顺序加入图片,文字,账号密码表单,登陆注册按钮。

样式美化

首先对body定义大小并调整图片的大小,使页面布局合理。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
<style>
    #login{
        width: 1000px;
        margin: 0 auto;
        
    }
    #login p{
        text-align:center;
    }
</style>
</head>
<body>
<div id="login">
    <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
    <p >博客,记录生活中的点点滴滴!</p>
    <p >在博客中,可以畅所欲言,可以学习IT最新的知识!</p>
    <p><input type="text" ></p>
    <p><input type="password" ></p>
    <p><input type="submit" value="确认登陆" ></p>
    <p >忘记密码</p>
    <p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>

给div增加个id选择器,对其进行调整,设置宽高,边界设置为自动,隐藏溢出,文本居中。

调整文字样式

新增类选择器t1和t2

.t1{
    font-size: 28px;font-family:"微软雅黑";
}
.t2{
    font-size: 15px;font-family:"微软雅黑";
    color: #999999;
}

调整文字的大小和颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        #login{
            width: 1000px;
            margin: 0 auto;
            overflow:hidden;
        }
        #login p{
            text-align:center;
        }
        .t1{
            font-size: 28px;font-family:"微软雅黑";
        }
        .t2{
            font-size: 15px;font-family:"微软雅黑";
            color: #999999;
        }
    </style>
</head>
<body>
<div id="login">
    <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
    <p class="t1">博客,记录生活中的点点滴滴!</p>
    <p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识!</p>
    <p><input type="text" ></p>
    <p><input type="password" ></p>
    <p><input type="submit" value="确认登陆" ></p>
    <p >忘记密码</p>
    <p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>

对账号密码框进行美化

 .textbox{
           width: 350px;
           height: 40px;
           border-radius: 3px;
           border: 1px solid #e2b709;
           padding-left: 10px;
       }
       .submit{
           width: 360px;
           height: 40px;
           background-color: #F0184d;
           border-radius: 3px;
           color: white;
           border: 1px solid #666666;
       }

限定高度和宽度,设置圆角,边框的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        #login{
            width: 1000px;
            margin: 0 auto;
            overflow:hidden;

        }
        #login p{
            text-align:center;
        }
        .t1{
            font-size: 28px;font-family:"微软雅黑";
        }
        .t2{
            font-size: 15px;font-family:"微软雅黑";
            color: #999999;
        }
        .textbox{
            width: 350px;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #e2b709;
            padding-left: 10px;
        }

    </style>
</head>
<body>
<div id="login">
    <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
    <p class="t1">博客,记录生活中的点点滴滴!</p>
    <p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识!</p>
    <p><input type="text"  class="textbox"></p>
    <p><input type="password"  class="textbox"></p>
    <p><input type="submit" value="确认登陆" ></p>
    <p >忘记密码</p>
    <p ><input type="button" value="注册账号"></p>
</div>
</body>
</html>

确认登陆和注册账号进行美化

       .submit{
           width: 365px;
           height: 40px;
           background-color: #F0184d;
           color: white;
           border: 1px solid #666666;
       }
       .button{
           width: 365px;
           height: 40px;
           padding-left: 10px;
           background-color: white;
           border: 1px solid #666666;
       }

定义submit和button,调整高度颜色字体大小。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        #login{
            width: 1000px;
            margin: 0 auto;
            overflow:hidden;
        }
        #login p{
            text-align:center;
        }
        .t1{
            font-size: 28px;font-family:"微软雅黑";
        }
        .t2{
            font-size: 15px;font-family:"微软雅黑";
            color: #999999;
        }
        .textbox{
            width: 350px;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #e2b709;
            padding-left: 10px;
        }
        .submit{
            width: 365px;
            height: 40px;
            background-color: #F0184d;
            color: white;
            border: 1px solid #666666;
        }
        .button{
            width: 365px;
            height: 40px;
            padding-left: 10px;
            background-color: white;
            border: 1px solid #666666;
        }
    </style>
</head>
<body>
<div id="login">
    <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
    <p class="t1">博客,记录生活中的点点滴滴!</p>
    <p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识!</p>
    <p><input type="text"  class="textbox"></p>
    <p><input type="password"  class="textbox"></p>
    <p><input type="submit" value="确认登陆"  class="submit"></p>
    <p >忘记密码</p>
    <p ><input type="button" value="注册账号" class="button"></p>
</div>
</body>
</html>

界面进行最后的美化

.text{
    width: 360px;
    margin: 0 auto;
    font-size: 15px;
    color: #666666;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <style>
        #login{
            width: 1000px;
            margin: 0 auto;
            overflow:hidden;
        }
        #login p{
            text-align:center;
        }
        .t1{
            font-size: 28px;font-family:"微软雅黑";
        }
        .t2{
            font-size: 15px;font-family:"微软雅黑";
            color: #999999;
        }
        .textbox{
            width: 350px;
            height: 40px;
            border-radius: 3px;
            border: 1px solid #e2b709;
            padding-left: 10px;
        }
        .submit{
            width: 365px;
            height: 40px;
            background-color: #F0184d;
            color: white;
            border: 1px solid #666666;
        }
        .button{
            width: 365px;
            height: 40px;
            padding-left: 10px;
            background-color: white;
            border: 1px solid #666666;
        }
        .text{
            width: 360px;
            margin: 0 auto;
            font-size: 15px;
            color: #666666;
        }
    </style>
</head>
<body>
<div id="login">
    <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p>
    <p class="t1">博客,记录生活中的点点滴滴!</p>
    <p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识!</p>
    <p><input type="text"  class="textbox"></p>
    <p><input type="password"  class="textbox"></p>
    <p><input type="submit" value="确认登陆"  class="submit"></p>
    <p class="text"style="text-align: right;">忘记密码</p>
    <p ><input type="button" value="注册账号" class="button"></p>
</div>
</body>
</html>

对文字进行细微的调整,登陆页面就完成了。

继续学习
||
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用户登录</title> <style> #login{ width: 1000px; margin: 0 auto; overflow:hidden; } #login p{ text-align:center; } .t1{ font-size: 28px;font-family:"微软雅黑"; } .t2{ font-size: 15px;font-family:"微软雅黑"; color: #999999; } .textbox{ width: 350px; height: 40px; border-radius: 3px; border: 1px solid #e2b709; padding-left: 10px; } .submit{ width: 365px; height: 40px; background-color: #F0184d; color: white; border: 1px solid #666666; } .button{ width: 365px; height: 40px; padding-left: 10px; background-color: white; border: 1px solid #666666; } .text{ width: 360px; margin: 0 auto; font-size: 15px; color: #666666; } </style> </head> <body> <div id="login"> <p ><img src="https://img.php.cn/upload/course/000/000/004/58144f924a5da186.gif" width=50% height=50%></p> <p class="t1">博客,记录生活中的点点滴滴!</p> <p class="t2">在博客中,可以畅所欲言,可以学习IT最新的知识!</p> <p><input type="text" class="textbox"></p> <p><input type="password" class="textbox"></p> <p><input type="submit" value="确认登陆" class="submit"></p> <p class="text"style="text-align: right;">忘记密码</p> <p ><input type="button" value="注册账号" class="button"></p> </div> </body> </html>
提交重置代码
关于我们 免责声明 Sitemap
PHP中文网:公益在线PHP培训,帮助PHP学习者快速成长!