今好久没有写博客,然后今天给大家带来比较具有二次元靓妹的登录界面,也只是用html和css来写的,大家可以来看看,一起交流学习一下!
个人名片:
作者简介:一名大三在校生,计科专业
个人主页:莫白媛
座右铭:舒服是留给死人的
**学习目标: 坚持每一次的学习打卡,掌握更多知识!还要学iOS开发和考研呢!
使用表单元素,会比盒子更加简单一些,所以这里用的表单
<body>
<div class="shell">
<div id="img-box">
<img src="images/b.png" alt="">
div>
<form action="" method="post">
<div id="form-body">
<div id="welcome-lines">
<div id="w-line-1">您好哇,Userdiv>
<div id="w-line-2">欢迎回来!div>
div>
<div id="input-area">
<div class="f-inp">
<input type="text" placeholder="邮箱地址">
div>
<div class="f-inp">
<input type="password" placeholder="密码">
div>
div>
<div id="submit-button-cvr">
<button type="submit" id="submit-button">登录button>
div>
<div id="forgot-pass">
<a href="#">是否忘记密码a>
div>
div>
form>
div>
body>
首先我们得先清除内外边距
ountline:none;的含义是鼠标点击文本框的时候,文本的边框焦点会消除掉
用的是渐变色,需要让盒子模型放在正中间,需要使用弹性布局
CSS3 渐变(gradient)可以让你在两个或多个指定的颜色之间显示平稳的过渡。 以前,你必须使用图像来实现这些效果,现在通过使用 CSS3 的渐变(gradients)即可实现。此外,渐变效果的元素在放大时看起来效果更好,因为渐变(gradient)是由浏览器生成的。
语法:
background: linear-gradient(direction, color-stop1, color-stop2, ...);
说明:
direction:默认为to bottom,即从上向下的渐变;
stop:颜色的分布位置,默认均匀分布,例如有3个颜色,各个颜色的stop均为33.33%。
我讲一下这个伪元素placeholder
伪元素**::placeholder**可以选择一个表单元素的占位文本 (en-US),它允许开发者和设计师自定义占位文本 (en-US)的样式。
::placeholder {
color: red;
font-size: 1.5em;
}
我们经常用到placeholder属性是在input标签里面,placeholder属性主要作用是让输入框有个提示的显示。那当我们想要改变placeholder属性中文字的大小颜色等样式时,又如何设置呢?
看一下正常的placeholder属性样式:
<input type="text" placeholder="正常的样式">
大家可以尝试敲一敲,这样一步步就会了解到这种类型的html和css布局,继续加油!源码看评论区免费或者评论区发邮箱。源码点我免费下载
看到这别忘三连加关注,么么叽么么叽么么哒!!!!