品优购项目--登录页面

效果图

HTML部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>品优购登录</title><link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/><link rel="stylesheet" href="css/base.css"><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><div class="header"><div class="logo fl"><h1><a href="index.html" title="品优购">品优购</a></h1></div></div><div class="login-main"><div class="w"><div class="loginfrom"><div class="a-from"><a href="#" class="from1 fl">扫描登陆</a><span class="spa">|</span><a href="#" class="from2 fr">账户登陆</a></div><div class="anno">公共场所不建议自动登录，以免账号丢失</div><div class="logininput"><input type="text" class="user" placeholder="邮箱/用户名/手机号"><i class="useri"></i><input type="password" class="password" placeholder="请输入密码"><i class="passwordi"></i></div><div class="check"><input type="checkbox" checked="checked"><span>自动登录</span><a href="#">忘记密码?</a></div><a href="#" class="loginbtn">登录</a><div class="link"><a href="#"><img src="img/link.gif" alt=""></a><a href="#"><span>立即注册</span></a></div></div></div></div><div class="mod_copyright"><p class="mod_copyright_links">关于我们  |  联系我们  |  联系客服  |  商家入驻  |  营销中心  |  手机品优购  |  友情链接  |  销售联盟  |  品优购社区  |  品优购公益  |  English Site  |  Contact U</p><p class="mod_copyright_info">地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn  <br>京ICP备08001421号京公网安备110108007702</p></div>
</body>
</html>

CSS部分

.header {height: 82px;width: 1200px;margin: 0 auto;
}
.logo {margin-top: 15px;
}
.login-main {height: 470px;background-color: #7F00FF;
}
.login-main .w {position: relative;height: 470px;background: url(../img/loginbg.png) no-repeat ;
}
.loginfrom {position: absolute;left: 700px;top: 60px;width: 304px;height: 340px;background-color: #fff;padding: 20px 38px 0 38px;
}
.a-from {height: 20px;
}
.from1 {font-size: 18px;color: #656565;padding-right: 63px;
}
.spa {text-align: center;font-size: 18px;color: #ccc;
}
.from2 {font-size: 18px;color: #C71523;
}
.anno {width: 295px;height: 24px;padding-left: 5px;line-height: 24px;border: 1px solid #F6EFCE;margin: 20px 0 10px;font-size: 12px;color: #656565;background-color: #FFFDED;
}
.loginfrom input {width: 260px;height: 34px;border: 1px solid #CECDCD;padding-left: 40px;margin-bottom: 18px;
}
.logininput {position: relative;
}
.logininput i {position: absolute;width: 37px;height: 34px;line-height: 34px;background-color: #CECDCD;top: 0;left: 0;font-size: 18px;color: #fff;font-family: 'icomoon';text-align: center;
}
.logininput .useri {top: 1px;left: 1px;
}
.logininput .passwordi {top: 55px;left: 1px;
}
.check {height: 14px;line-height: 14px;font-size: 12px;
}
.check input {float: left;width: 14px;height: 14px;
}
.check span {float: left;color: #CECDCD;
}
.check a {float: right;color: #CECDCD;
}
.check a:hover {color: red;
}
.loginbtn {display: block;width: 302px;height: 42px;background-color: #C71523;color: #fff;text-align: center;line-height: 42px;font-size: 16px;margin: 20px 0 25px 0;
}
.link span {float: right;font-size: 14px;color: #1373AF;
}

品优购项目--登录页面相关推荐

品优购项目--注册页面
效果图 HTML部分 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
「学习笔记」品优购项目-上（页面公共部分）
「学习笔记」品优购项目-上品优购项目-上目标品优购项目规划网站制作流程品优购项目介绍品优购项目的学习目的开发工具以及技术栈开发工具技术栈品优购项目搭建工作创建的文件夹如下(称为项 ...
品优购项目的制作——知识分享
目录前言一.首页 1.基本的布局 2.版心部分 3.主要内容模块二.注册页面三.产品列表页面四.产品详情页面总结前言品优购项目是一个需要糅杂大量HTML5+CSS3知识点的网站项目,一 ...
CSS 8 品优购项目
目录 1.品优购项目规划 1.1网站制作流程 1.2品优购项目整体介绍 1.3品优购项目的学习目的 1.4开发工具以及技术栈小总结 1.5品优购项目搭建工作. 1.5.1创建文件夹 1.5.2创建 ...
14.------------------------------------------------------------------------------【PC端品优购项目】
文章目录 [PC端品优购项目]前端小抄(14) 电商-主页电商-分类列表页电商-注册页一.品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 ...
Web前端开发——品优购项目(上)
品优购项目介绍项目名称:品优购项目描述:品优购是一个电商网站,我们要完成 PC 端首页.列表页.注册页面的制作主页列表页注册页品优购项目的学习目的电商类网站比较综合,里面需要大量的布局技 ...
b站pink老师前端课程、品优购项目（跟着练的笔记+代码）
02.网站制作流程 1. 03.品优购项目规划 04.项目搭建 05.样式的模块化开发 06.favicon图标制作 favicon.ico一般用于作为略缩图的网站标志,它显示在浏览器的地址栏或者标签 ...
PC端品优购项目——首页制作
目录 1. 品优购项目规划 1.1 网站制作流程 1.2 品优购项目整体介绍 1.3 品优购项目的学习目的 1.4 开发工具以及技术栈 1.5 总结 1.6 品优购项目搭建工作 1.6.1 创建文件夹 ...

品优购项目--登录页面

品优购项目--登录页面相关推荐

最新文章

热门文章