登录login页面--css效果

效果如下

声明：图片与图标来源均来源于堆糖与iconfont阿里巴巴矢量图标库

将图片放置到images中

框架如下

login.html代码如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>login</title><link rel="stylesheet" href="../mysite/login.css">
</head>
<body><div class="login-box"><h4>login</h4><div class="input-box"><div class="input-text"><span class="login-login"><img src="data:images/4.png"style="width: 25px;height: 25px;"></span><input type="text" placeholder="用户名"></div><div class="input-text"><span class="login-passwd"><img src="data:images/5.png" style="width: 25px;height: 25px;"></span><input type="password" placeholder="密码"></div><div class="button">登录</div><div class="signup">还没有账户？<a href="#">注册</a></div></div></div>
</body>
</html>

使用css实现图片效果

在进行实现效果之前，需要了解盒子模型，盒子模型指的是：外边距（margin）+ border（边框） + 内边距（padding）+ content（内容）。

假设div的宽高为300px，但是实际上设置的是content，之后我们又设置了padding：5px；border：1px；所以div的实际宽高为（300px+5px*4+1px*4）=324px

如果没有设置box-sizing：border-box，它的宽高会自动加上padding与border的值，则需要我们手动计算并调整content的值。

如果设置了box-sizing：border-box，那padding与border的值就不会影响元素的宽高。当于把padding和border的值都算在content里。

首先重置浏览器的默认样式

*{padding: 0;margin: 0;box-sizing: border-box;
}

设置body，会用到flex等属性

Flex：弹性布局，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。

项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。

图片来源于网络

这里我们简单说一下，flex-wrap属性

flex-wrap：

默认情况下，项目都排在一条线上。flex-wrap属性定义，如果一条轴线排不下，如何换行

可以取三个值

（1）nowrap（默认）：不换行。
（2）wrap：换行，第一行在上方。
（3）wrap-reverse：换行，第一行在下方。

当使用flex布局时，常会用到以下两个属性

align-items: center;  /*这种情况是垂直居中*/
justify-content: center;/*这种情况是水平居中*/

了解后，body的css如下

body{display: flex;justify-content: center; /*在容器中央对齐弹性项目*/align-items: center;width: 100%;min-height: 100vh;background-image:url(images/2.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;overflow: hidden;
}

接下来设置login-box

.login-box{display: flex;justify-content: center;  /*居中排列*/align-content:space-around;flex-wrap: wrap;  /*项目排在一条线上，换行，第一行在上方*/width: 600px;height: 400px;background-color: rgba(0, 0, 0,.4);border: 10px;padding: 20px 50px;border-radius: 20px;
}

设置h4标题

.login-box h4{width: 100%;display: flex;justify-content: center;color: aliceblue;font-size: 30px;
}

设置input-box

.login-box .input-box{display:flex;flex-wrap: wrap;justify-content: center;align-items: center;transform: translateY(-35px);
}

设置input-text与span 、input

.login-box  .input-box  .input-text{width: 100%;display: flex;justify-content: center;
}
.login-box  .input-box  .input-text span{color: aliceblue;font-size: 18px;margin-top: 20px;}
.login-box  .input-box  .input-text input{border: 0;padding: 6px;border-bottom: 1px solid white;background-color: #ffffff00;color: #fff;margin-top: 20px;
}

设置button

.login-box  .input-box  .button{display: flex;justify-content: center;align-items: center;margin-top: 25px;width: 145px;height: 25px;color: #fff;background: linear-gradient(120deg,#a6c0fe 0%, #2E8B57 100%);border-radius: 25px;cursor: pointer;
}

设置signup

.login-box  .input-box  .signup{width: 100%;display: flex;justify-content: center;margin-top: 40px;color: #fff;font-size: 15px;}
.login-box  .input-box  .signup a{color: #a6c0fe;text-decoration: none;
}

保存成功后使用浏览器访问即可

登录login页面--css效果相关推荐

【前端实例代码】使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程
b站视频演示效果: [web前端特效源码]使用 HTML 和 CSS 如何实现惊人的透明登录框页面毛玻璃效果| 前端开发网页制作基础入门教程效果图: 完整代码: <!DOCTYPE htm ...
login.php静态页面的设计,ps+div+css打造蓝色后台--login页面设计
ps+p+css打造蓝色后台做到兼容主流浏览器如何设计一个页面? 如何切片才能更好的配合实现? 如何考虑兼容性? 如何用p+css做后台的百分比布局? Login页面设计先在photoshop中 ...
HTML5期末大作业：在线电影网站设计——电影速递网(12页面)含登录注册HTML+CSS+JavaScript
HTML5期末大作业:在线电影网站设计--电影速递网(12页面)含登录注册HTML+CSS+JavaScript 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业 ...
【HTML+CSS+JS】登录注册页面大合集
前言学JS也学了一段时间,正巧碰上了人工智能要调用人脸识别接口进行真人人脸识别,于是便萌生了用人脸来进行注册和登录的想法,这样的话就需要开发一个登录注册页面,然后用JS绑定注册事件调用人脸识别接口进 ...
HTML+CSS+JavaScript 实现登录注册页面(超炫酷)
1.临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手? 网页要求的总数量太多? 2.没有合适的模板?等等一系列问题.你想要解决的问题,在这篇博文中基本都能 ...
Magento: 自定义用户登录导向页面 Redirect Customer to Previous Page After Login
Configuration Settings – Login to admin panel – Go to System -> Configuration -> CUSTOMERS -&g ...
移动端登录页样式错乱_Web前端导致页面css样式混乱的原因问题，我和小伙伴们惊呆了...
## **css常用技巧** 本文都时再工作中用得比较多的Css,还有遇到的一些不长记性的问题,一起来看看这些技巧吧. 1. **实现组件的自动换行排布:** flex-wrap: wrap; 使列表 ...
Axure-蒙版遮罩，鼠标移入移出点击效果设置，登录注册页面
第二章主要讲解蒙版遮罩,鼠标移入移出点击效果设置及登录注册页面蒙版遮罩就是用和页面大小的并且设置为半透明灰色的矩形盖住原有的页面,与某一元件相关联系(在"交互"中添加" ...
html鼠标元素效果,如何使用CSS实现鼠标移动控制页面元素效果？（代码示例）...
本篇文章给大家介绍一下使用css映射的鼠标位置,实现通过鼠标移动控制页面元素效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 映射鼠标位置或实现拖拽效果,我们可以在 Jav ...

登录login页面--css效果

效果如下

登录login页面--css效果相关推荐

最新文章

热门文章