HTML+CSS:设计一个网站登录页面 学起来很简单

hello,大家好,我是wangzirui32,今天我们来学习如何设计一个网站登录页面。
开始学习吧!

1. 项目架构

demo/
	login.html 网页文件
	backgrond.png 登录背景图片
	style.css CSS样式文件

按照以上创建即可。

2. 编写代码

2.1 网页文件编写

HTML代码不多,如下:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wangzirui32网站首页title>
    
    <link rel="stylesheet" href="style.css" />
head>
<body>
    <div class="login">
        <h1 class="login-title">Wangzirui32网站登录h1>
        <form name="login-form-data" action="#" method="post">
            <div class="login-data">
                <h3>用户名:<input name="username" class="username-input" placeholder="请输入用户名"/>h3>
                <h3>密码:<input name="password" type="password" class="password-input" placeholder="请输入密码"/>h3>
            div>
            <button class="login-btn">登录button>
        form>
    div>
body>
html>

以上代码设置了登录区域的相关标签,接下来开始编写CSS样式。

2.2 CSS样式编写

代码:(不懂看注释)

.login {
     
    position: absolute; /* 设置位置为绝对位置 */
    top: 100px; /* 位置距离屏幕顶部100px */
    left: 200px; /* 位置距离屏幕左边200px */

    border-radius:30px; /* 圆角边框 */
    border: #000000 solid 3px; /* 设置边框颜色以及厚度 */
    width: 700px; /* 宽为700px */
    height: 300px; /* 长为300px */

    background-image: url(background.png); /* 设置登录背景 */
    background-repeat: no-repeat; /* 设置不允许重复图片 */
    background-size: 700px 300px; /* 设置图片背景的长宽 覆盖整个登录区域 */
}

.login-title {
     
    color: #ffffff; /* 标题文字为白色 */
    text-align: center; /* 设置标签居中 */
}

.login-data {
     
    text-align: center;
}

.username-input {
     
    width: 200px;
    height: 30px;
    font-size: 17px;
    background-color: #d5d5d5;
    border: none; /* 取消点击输入框时的颜色变化 */
    border-radius: 5px;
}

.password-input {
     
    width: 200px;
    height: 30px;
    font-size: 17px;
    background-color: #d5d5d5;
    border: none;
    border-radius: 5px;
}

.login-btn {
     
    position: absolute;
    background-color: #008ec2;
    border-radius:10px;
    width: 100px;
    height: 50px;
    font-size: 21px;
    color: #fefefe;
    border: #dcd4ba solid 3px;
    right: 100px;
}

3. 效果展示

如图:
HTML+CSS:设计一个网站登录页面 学起来很简单_第1张图片


好了,今天的课程就到这里,喜欢的可以点个收藏和关注,再见!

你可能感兴趣的:(CSS学习笔记,HTML,css,html)