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

简介: 这是一段包含HTML和CSS代码的摘要。HTML部分定义了一个基本的网页结构,包括`<html>`、`<head>`、`<body>`标签,以及一个简单的登录界面,由一个容器`.container`包含一个登录框`.login-wrapper`,登录框内有输入框和登录按钮。CSS部分设置了全局样式,如字体、边距,并为HTML元素添加了样式,如背景渐变色、文字对齐、输入框和按钮的样式等。整个代码展示了创建一个具有响应式布局和特定视觉效果的简洁登录页面。

HTML

<!DOCTYPE html>

<html lang="en">

<head>

 <meta charset="UTF-8">

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

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

 <title>简约渐变色登陆页-墨吻网络</title>

</head>

<body>

 <div class="container">

   <div class="login-wrapper">

     <div class="header">登陆</div>

     <div class="form-wrapper">

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

       <input type="password" name="password" placeholder="密码" class="input-item">

       <div class="btn">登陆</div>

     </div>

     <div class="msg">

       没有账号? <a href="#">点击注册</a>

     </div>

   </div>

 </div>

</body>

</html>

CSS

* {

 padding: 0;

 margin: 0;

 font-family: 'Open Sans Light';

 letter-spacing: .05em;

}

html {

 height: 100%;

}

body {

 height: 100%;

}

.container {

 height: 100%;

 background-image: linear-gradient(to right,#fbc2eb,#a6c1ee);

}

.login-wrapper{

 background-color: #fff;

 width: 250px;

 height: 500px;

 border-radius: 15px;

 padding: 0 50px;

 position: relative;

 left: 50%;

 top: 50%;

 transform: translate(-50%,-50%);

}

.login-wrapper .header {

 font-size: 30px;

 font-weight: bold;

 text-align: center;

 line-height: 200px;

}

.login-wrapper .form-wrapper .input-item {

 display: block;

 width: 100%;

 margin-bottom: 20px;

 border: 0;

 padding: 10px;

 border-bottom: 1px solid rgb(128, 125, 125);

 font-size: 15px;

 outline: none;

}

.login-wrapper .form-wrapper .input-item::placeholder {

 text-transform: uppercase;

}

.login-wrapper .form-wrapper .btn {

 text-align: center;

 padding: 10px;

 width: 100%;

 margin-top: 40px;

 background-image: linear-gradient(to right,#a6c1ee,#fbc2eb);

 color: #fff;

}

.login-wrapper .msg {

 text-align: center;

 line-height: 80px;

}

.login-wrapper .msg a {

 text-decoration-line: none;

 color: #a6c1ee;

}

目录
相关文章
|
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
|
14天前
|
前端开发 JavaScript
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
vue3【实战】创建项目、创建并提交代码到远程仓库,安装 SASS, 清除浏览器默认样式 reset-css, 清除模板代码,提升开发效率的必要集成
19 0
|
15天前
|
前端开发
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
CSS 自测题 -- 用 flex 布局绘制骰子(一、二、三【含斜三点】、四、五、六点)
6 0
|
17天前
|
前端开发 JavaScript
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
文本,wangEditor5展示HTML无样式,wangEditor5如何看源码,Ctrl + U看CSS文件,代码高亮,Prism.js可以实现,解决方法,参考网页源代码的写法
|
18天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】Animated Navigation
【HTML+CSS+JavaScript】Animated Navigation
10 0
|
18天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】animated-countdown
【HTML+CSS+JavaScript】animated-countdown
11 0
|
18天前
|
前端开发 JavaScript
【HTML+CSS+JavaScript】3d-boxes-background
【HTML+CSS+JavaScript】3d-boxes-background
7 0