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

1. 项目架构

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

按照以上创建即可。

2. 编写代码

2.1 网页文件编写

HTML代码不多，如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>wangzirui32网站首页</title><!-- 导入CSS文件 --><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：设计一个网站登录页面学起来很简单相关推荐

HTML+CSS制作知乎登录页面
HTML+CSS制作知乎登录页面由于没有用上js相关的技术,所以无法做出相应的功能,,只能做出知乎登录页面的用密码登录的界面,不能切换到免密码登录.相关界面的图片如下: 网页上的原图: 我做的: ...
在线调色工具在线CSS工具 CSS设计展示网站汇总
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 在线调色 ...
如何设计一个单点登录系统
本文来说下如何设计一个单点登录系统文章目录概述 JWT的组成头部(Header) 载荷(Payload) 签名(签名) 签名的目的信息会暴露 JWT的适用场景用户认证八步走和Session ...
flutter 一个用户登录页面
一个用户登录页面输入校验 import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart';void m ...
正则基础知识学起来很简单
正则基础知识学起来很简单第一.正则表达式,也称为模式表达式,它有自己一套完整编写规范. 正则表达式的用途:正则表达式主要是用来对字符串进行匹配.查找.替换和分割等操作. 第二.正则表达式主要是由四部 ...
php用户注册功能设计,利用HTML+CSS设计一个简单的用户注册页面【示例】
本篇文章将要给新手小白们介绍如何使用HTML和css制作简单的注册页面.在开发网站过程中,如果网站内容要求是完善的信息站,那么肯定就离不开用户注册的这个功能.这个用户注册界面对于刚入门的前端新手来说, ...
如何利用宝塔面板+JavaWeb+MySQL设计一个注册登录界面
最近闲来无事,想设计一个网页注册登录的页面.因为看到好多人的毕业设计都是和JavaWeb有关的,所以不做白不做,咱们大三就给毕业设计开个头! 当然做一个网页不发布到服务器,难道数据库留给自己一个人看? ...
用html,js和css设计一个静态网页
以下链接可以访问该静态网页 Romantic Store 设计理念: 一个静态的模拟花店网页,可以展示鲜花,模拟购买鲜花并把鲜花装进环保购物袋的过程,同时也宣传减少一次性塑料袋使用的环保理念. 2. ...
php如何设计一个网站,如何设计一个优质的外贸网站？
如何设计一个优质的外贸网站? 随着搜索引擎的快速发展,搜索引擎和用户对网站用户体验要求越来越高.那么在当下如何简单快速搭建一个高质量的英文网站呢?接下来301SEO英文网站推广团队来和大家一起探讨下: ...

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

1. 项目架构

2. 编写代码

2.1 网页文件编写

2.2 CSS样式编写

3. 效果展示

HTML+CSS：设计一个网站登录页面学起来很简单相关推荐

最新文章

热门文章

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

1. 项目架构

2. 编写代码

2.1 网页文件编写

2.2 CSS样式编写

3. 效果展示

HTML+CSS：设计一个网站登录页面 学起来很简单相关推荐

最新文章

热门文章

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

HTML+CSS：设计一个网站登录页面学起来很简单相关推荐