一个纯CSS写的登录的样式_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

一个纯CSS写的登录的样式_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:31 AM

设计了一个简单的登录样式，然后自己写了下代码，巩固一下自己的状态（就使用了HTML&CSS）

先看效果：

1.HTML代码如下：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Login</title>    <link rel="stylesheet" type="text/css" href="css/login.style.css"></head><body><div id="content">    <div class="login-header">        <img  src="/static/imghw/default1.png"  data-src="assets/images/logo"  class="lazy" alt="一个纯CSS写的登录的样式_html/css_WEB-ITnose" >    </div>    <form>        <div class="login-input-box">            <span class="icon icon-user"></span>            <input type="text" placeholder="Please enter your email/phone">        </div>        <div class="login-input-box">            <span class="icon icon-password"></span>            <input type="password" placeholder="Please enter your password">        </div>    </form>    <div class="remember-box">        <label>            <input type="checkbox"> Remember Me        </label>    </div>    <div class="login-button-box">        <button>Login</button>    </div>    <div class="logon-box">        <a href="">Forgot?</a>        <a href="">Register</a>    </div></div></body></html>

登录后复制

2.CSS代码如下：

body{    background: url("../assets/images/bg_login.jpg") no-repeat fixed;    /* set background tensile */    background-size: 100% 100%;    -moz-background-size: 100% 100%;    margin: 0;    padding: 0;}#content{    background-color: rgba(255, 255, 255, 0.95);    width: 420px;    height: 300px;    border: 1px solid #000000;    border-radius: 6px;    padding: 10px;    margin-top: 15%;    margin-left: auto;    margin-right: auto;    display: block;}.login-header{    width: 100%;    height: 48px;    margin-bottom: 20px;    border-bottom: 1px solid #dcdcdc;}.login-header img{    width: 120px;    margin-left: auto;    margin-right: auto;    display: block;}.login-input-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-input-box input{    width: 340px;    height: 32px;    margin-left: 18px;    border: 1px solid #dcdcdc;    border-radius: 4px;    padding-left: 42px;}.login-input-box input:hover{    border: 1px solid #ff7d0a;}.login-input-box input:after{    border: 1px solid #ff7d0a;}.login-input-box .icon{    width: 24px;    height: 24px;    margin: 6px 4px 6px 24px;    background-color: #ff7d0a;    display: inline-block;    position: absolute;    border-right: 1px solid #dcdcdc;}.login-input-box .icon.icon-user{    background: url("../assets/images/user.png");}.login-input-box .icon.icon-password{    background: url("../assets/images/password.png");}.remember-box{    width: auto;    height: auto;    margin-left: 18px;    margin-top: 12px;    font-size: 12px;    color: #6a6765;}.login-button-box{    margin-top: 12px;    width: 100%;    margin-left: auto;    margin-right: auto;    display: inline-block;}.login-button-box button{    background-color: #ff7d0a;    color: #ffffff;    font-size: 16px;    width: 386px;    height: 40px;    margin-left: 18px;    border: 1px solid #ff7d0a;    border-radius: 4px;}.login-button-box button:hover{    background-color: #ee7204;}.login-button-box button:active{    background-color: #ee7204;}.logon-box{    margin-top: 20px;    text-align: center;}.logon-box a{    margin: 30px;    color: #4a4744;    font-size: 13px;    text-decoration: none;}.logon-box a:hover{    color: #ff7d0a;}.logon-box a:active{    color: #ee7204;}

登录后复制

发现没法上传资源文件 -_-

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

热工具

热门话题

Java教程

1672

CakePHP 教程

1428

Laravel 教程

1332

PHP教程

1277

C# 教程

1257

显示更多

Related knowledge

HTML：结构，CSS：样式，JavaScript：行为 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web开发中的作用分别是：1.HTML定义网页结构，2.CSS控制网页样式，3.JavaScript添加动态行为。它们共同构建了现代网站的框架、美观和交互性。

HTML，CSS和JavaScript的未来：网络开发趋势 Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。

HTML的未来：网络设计的发展和趋势 Apr 17, 2025 am 12:12 AM

HTML的未来充满了无限可能。1)新功能和标准将包括更多的语义化标签和WebComponents的普及。2)网页设计趋势将继续向响应式和无障碍设计发展。3)性能优化将通过响应式图片加载和延迟加载技术提升用户体验。

HTML与CSS vs. JavaScript：比较概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在网页开发中的角色分别是：HTML负责内容结构，CSS负责样式，JavaScript负责动态行为。1.HTML通过标签定义网页结构和内容，确保语义化。2.CSS通过选择器和属性控制网页样式，使其美观易读。3.JavaScript通过脚本控制网页行为，实现动态和交互功能。

HTML与CSS和JavaScript：比较Web技术 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML：是编程语言还是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增强WebevebDevelopment。