最终效果：

(input框是可使用的）

代码

HTML部分

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录页面</title><link href="login.css" rel="stylesheet" type="text/css"></head><body><div class="outbox"><div class="pic"></div><div class="rightbox"><div class="textbox"><h1>Login/Register</h1><input type="text" placeholder="USER NAME" class="inputbox"><input type="password" placeholder="PASSWORD" class="inputbox"><a href="#" class="forget">Forget Password?</a><a href="#" class="login">Login</a></div></div></div></body></html>

html部分代码逻辑

outbox是整个大框
pic是放在左边的图片。为什么要用div然后用background来设置，而不用img直接插入呢：是因为我们需要让图片自适应outbox这个框框（使用background-size属性）这种将插入图片作为背景图片进行操作是一种常用方法
rightbox是右边的白框部分（由于插入的图片也是白底，所以这个例子看不太出来）
textbox是所有文字内容合成的框。这样便于整体调整位置，不会每一段文字散开来
然后给每个部分的文字设置样式（盒模型）

CSS部分

body {background-image: linear-gradient(to right, #ba5370, #f4e2d8);/*严格来说background-image要做浏览器兼容*/display: flex; /*将整个body定义为一个flex容器*/justify-content: center; /*将flex项目在容器中心对齐*/}.outbox {/*定义为弹性布局*/display: flex;/*规定定位类型*/position: relative;top: 50px;width: 1000px;height: 550px;/*其他效果*/box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);}.pic {background-image: url(pic/side4.jpg);width: 700px;height: 550px;/*把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。*/background-size: cover;}.rightbox {display: flex;justify-content: center; /*将felx项目--即下面的textbox在容器的水平中心*/align-items: center; /*将felx项目--即下面的textbox在容器的竖直中心*/width: 300px;height: 550px;background-color: white;}.textbox {position: relative;top: 20px;width: 300px;height: 500px;}.textbox h1 {margin-left: 30px;font: Garamond 900 35px ""; /*Garamond是字体 900是字体加粗允许值*/color: #39e48b;}.textbox .inputbox {/*按照box的元素从内到外设计*/width: 200px;padding: 10px;margin: 20px 30px;border-style: none;border-bottom: 3px solid #92bda6;}.forget {font: 12px;color: #92bda6;float: right;margin: 15px 25px; /*微调位置*/}.login {display: block;/*定位*/position: absolute;bottom: 100px;margin-left: 75px;/*盒子样式*/background-image: linear-gradient(to left, #9c88ff, #3cadeb);width: 150px;height: 60px;border-radius: 20px;/*文字样式*/font: 900 30px "";text-decoration: none; /*取消下划线*/text-align: center;line-height: 60px;color: #f0acea;}

注意看里面的注释，实现逻辑在里面

感受

这个例子是参考了b站一位up的视频参考视频，适合自己学习进度的例子很能帮助自己理解知识。
在参考过程中最好是自己先过一遍代码，然后自己写，不会的再参考。一定不能照抄，要认真体悟示例的逻辑之后有自己的实现逻辑
途中发现html的div内嵌套div的代码缩进是有语法意义的，当时查了半天找不到bug原因，如果下次有莫名的样式无法应用问题，可以看看是不是打代码时候缩进错了
审美也是一大关啊，现在配色全靠直觉
flex布局还需要深入体悟
体会到了选择器的实际灵活使用

后记

昨天没打卡是因为在做网页，今天刚好就写一下总结喷喷注释
打卡第13天！

初学css能做的实战登录页面制作相关推荐

java比较炫的登录界面_html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面...
承蒙各位小伙伴的支持,鄙人有幸入围了<CSDN 2020博客之星>的前200名,现在进入投票环节,如果我平时写的文章和分享对你有用的话,请每天点击一下这个链接,投上你们宝贵的一票吧!谢谢! ...
java做一个数据库网站,用javaSwing和mysql数据库做的一个登录页面
用javaSwing和mysql数据库做的一个登录页面用javaSwing和mysql数据库做的一个登录页面一:首先在eclipse中新建一个java工程二:然后新建一个包,并且在包中新建两个类 ...
【HTML5】登录页面制作简易版
刚开始学习Java.文件的命名,讲道理应该以英文为主,但是英语又不好,所以只好用拼音,最痛苦的应该算是那些英语又不好,又想秀一下的程序员,一半英语一半拼音,如mainFangFa~~~你说看了糟心不糟 ...
html简单登录页面制作
html简单登录页面制作 <!DOCTYPE html> <html><head><meta charset="utf-8">< ...
HTML+CSS：设计一个网站登录页面学起来很简单
hello,大家好,我是wangzirui32,今天我们来学习如何设计一个网站登录页面. 开始学习吧! 1. 项目架构 demo/login.html 网页文件backgrond.png 登录背景图片 ...
html+css实现唯美简洁登录页面
1.简介本案例是html和css实现的唯美简洁的登录界面.纯粹个人一时兴起所写.可以适用于个人博客登录以及其他系统的登录界面,登录title可以随时修改. 2.先看效果. 3.上代码. 代码复制粘贴 ...
自己做的一个登录页面,纯代码!
先上效果图吧. 本人菜鸟入门, 请勿喷. 首先样式: 1 1 body{ 2 2 margin: 0; 3 3 padding: 0; 4 4 width: 100%; 5 5 height: 100 ...
js做简单的登录页面以及附加条件，登录成功后跳转
新手第一次上传,还不会介绍,很简单,能看懂不难的 <!doctype html> <html lang="en"><head><meta ...
用myeclipse搭建SSH并做一个简单登录页面
SSH是(Struts,Spring,Hibernate)的简称. Struts进行流程控制,Spring进行业务流转,Hibernate进行数据库操作的封装. ·Struts 采用MVC模式,主要是 ...

初学css能做的实战登录页面制作

最终效果：

代码

HTML部分

html部分代码逻辑

CSS部分

感受

后记

初学css能做的实战登录页面制作相关推荐

最新文章

热门文章

初学css能做的实战 登录页面制作

最终效果：

代码

HTML部分

html部分代码逻辑

CSS部分

感受

后记

初学css能做的实战 登录页面制作相关推荐

最新文章

热门文章

初学css能做的实战登录页面制作

初学css能做的实战登录页面制作相关推荐