紫色渐变登陆布局html+css代码

简介: 这是一段关于网页设计的代码示例,使用纯CSS实现了登录界面的样式。HTML部分包括一个简单的登录表单,包含用户名、密码输入框和登录、注册按钮。CSS部分则定义了各种元素的样式,如背景色、边框、字体颜色等,并使用渐变效果和过渡动画来增强视觉效果。整个设计采用了响应式布局,适应不同设备的屏幕宽度。

话不多说先上个图。本程序采用的效果全部是css编写

代码结构也很简单,有需要的小伙伴可以借鉴一下,下面放代码

HTML

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

 <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <meta http-equiv="X-UA-Compatible" content="ie=edge">

 <link rel="stylesheet" href="css/style.css">

 <title>Login</title>

</head>

<body>

 <div class="login-container">

   <div class="left-container">

     <div class="title"><span>登录</span></div>

     <div class="input-container">

       <input type="text" name="username" placeholder="用户名">

       <input type="password" name="password" placeholder="密码">

     </div>

     <div class="message-container">

       <span>忘记密码</span>

     </div>

   </div>

   <div class="right-container">

     <div class="regist-container">

       <span class="regist">注册</span>

     </div>

     <div class="actoin-container">

       <span>提交</span>

     </div>

   </div>

 </div>

</body>

</html>

CSS

* {

 padding: 0;

 margin: 0;

}

html {

 height: 100%;

}

/* rgb(114,135,254)   rgb(130,88,186)

rgb(59,45,159)

rgb(95, 76, 194)

rgb(118,76,163)  rgb(92,103,211)

rgb(199, 191, 219)

rgb(237,221,22) */

body {

 background-image: linear-gradient(to bottom right,rgb(114,135,254),rgb(130,88,186));

}

body .login-container {

 width: 600px;

 height: 315px;

 margin: 0 auto;

 margin-top: 20%;

 border-radius: 15px;

 box-shadow: 0 10px 50px 0px rgb(59,45,159);

 background-color: rgb(95, 76, 194);

}

body .login-container .left-container {

 display: inline-block;

 width: 330px;

 border-top-left-radius: 15px;

 border-bottom-left-radius: 15px;

 padding: 60px;

 background-image: linear-gradient(to bottom right,rgb(118,76,163), rgb(92,103,211));

}

body .login-container .left-container .title {

 color: #fff;

 font-size: 18px;

 font-weight: 200;

}

body .login-container .left-container .title span {

 border-bottom: 3px solid rgb(237,221,22) ;

}

body .login-container .left-container .input-container {

 padding: 20px 0;

}

body .login-container .left-container .input-container input {

 border: 0;

 background: none;

 outline: 0;

 color: #fff;

 margin: 20px 0;

 display: block;

 width: 100%;

 padding: 5px 0;

 transition: .2s;

 border-bottom: 1px solid rgb(199, 191, 219);

}

body .login-container .left-container .input-container input:hover {

 border-bottom-color: #fff;

}

::-webkit-input-placeholder {

 color: rgb(199, 191, 219);

}

body .login-container .left-container .message-container {

 font-size: 14px;

 transition: .2s;

 color: rgb(199, 191, 219);

 cursor: pointer;

}

body .login-container .left-container .message-container:hover {

 color: #fff;

}

body .login-container .right-container {

 width: 145px;

 display: inline-block;

 height: calc(100% - 120px);

 vertical-align: top;

 padding: 60px 0;

}

body .login-container .right-container .regist-container {

 text-align: center;

 color: #fff;

 font-size: 18px;

 font-weight: 200;

}

body .login-container .right-container .regist-container span {

 border-bottom: 3px solid rgb(237,221,22) ;

}

body .login-container .right-container .actoin-container {

 font-size: 10px;

 color: #fff;

 height: 100%;

 position: relative;

}

body .login-container .right-container .actoin-container span {

 border: 1px solid rgb(237,221,22);

 padding: 10px;

 display: inline;

 line-height: 25px;

 border-radius: 25px;

 position: absolute;

 bottom: 10px;

 left: calc(72px - 25px);

 transition: .2s;

 cursor: pointer;

}

body .login-container .right-container .actoin-container span:hover {

 background-color: rgb(237,221,22);

 color: rgb(95, 76, 194);

}


目录
相关文章
|
12天前
|
前端开发 UED
使用HTML和CSS创建响应式表格
在网页设计中,表格是一种组织和展示数据的有效方式。本文档将指导你如何使用HTML和CSS来创建一个既美观又响应式的表格,以便在不同设备和屏幕尺寸上都能良好显示。我们将涵盖基础的HTML表格结构,样式美化以及如何实现响应式布局,使得表格内容在小屏设备上也能清晰阅读
56 0
|
3天前
|
编解码 前端开发 容器
CSS Flex布局实战案例:构建响应式卡片组件
【7月更文挑战第17天】通过上述步骤,我们成功地使用CSS Flex布局构建了一个响应式的卡片组件。Flexbox不仅简化了布局代码,还让我们能够轻松实现复杂的布局效果,如响应式设计。在实战中,掌握Flexbox将大大提高前端开发的效率和网页布局的质量。希望这个案例能够帮助你更好地理解和应用Flexbox布局。
|
15天前
|
移动开发 前端开发 HTML5
CSS 【实战】 “四合院”布局
CSS 【实战】 “四合院”布局
18 0
CSS 【实战】 “四合院”布局
|
12天前
|
编解码 前端开发 C++
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
CSS【详解】布局 display ( 含 flex 布局,grid 布局,table 布局,float 布局,响应式布局 等)
19 0
|
15天前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
6 0
|
前端开发 容器 移动开发
|
Web App开发 前端开发 JavaScript
|
Web App开发 前端开发 JavaScript
|
Web App开发 JavaScript 前端开发
|
前端开发 JavaScript C#
20个编写现代 CSS 代码的建议
明白何谓Margin Collapse 不同于其他很多属性,盒模型中垂直方向上的Margin会在相遇时发生崩塌,也就是说当某个元素的底部Margin与另一个元素的顶部Margin相邻时,只有二者中的较大值会被保留下来,可以从下面这个简单的例子来学习: ? .square {    width: 80px;    height: 80px; }.red {    
1247 0