拉钩网前端项目实战

拉钩网前端项目实战06

登录注册部分设计

一、登录注册部分设计

1.html部分

 <div class="header"></div><div class="boxCon"><div class="logo"></div><form action="#" method="get"><div class="forBox"><div class="imgBox clearFixed"><img class="fl" src="img2/qrcode-normal.svg" alt="" /><img class="fl" src="img2/wx-login.svg" alt="" /></div><div class="inpLeft fl"><div class="line1"><p class="txtP1 fl btnWhit">密码登录</p><p class="txtP2 fl">验证码登录</p></div><div class="lineInp"><input type="text" placeholder="请输入常用手机号或邮箱"></div><div class="lineInp"><input type="password" placeholder="请输入密码"></div><p class="txt">忘记密码？</p><input type="submit" value="登录"><span class="or">or</span></div><div class="inpRight fl"><div class="txt1">还没有账号</div><div class="txt2">立即注册<img src="img2/icon-arrow-right.png" alt="" /></div><div class="txt3"><p>使用以下方式直接登录</p><img src="img2/icon-sina1.png" alt="" class="fl"><img src="img2/icon-wechat.png" alt="" class="fl"><img src="img2/icon-tencent.png" alt="" class="fl"><img src="img2/icon-baidu.png" alt="" class="fl"></div></div></div></form></div>

2.css部分

* {margin: 0;padding: 0;
}
a {text-decoration: none;
}
li {list-style: none;
}
img {display: block;
}
input {border: none;
}
.clearFixed::after {content: '';display: block;clear: both;
}.fl {float: left;
}.fr {float: right;
}.btnWhit:after {content: '';display: block;position: absolute;border: 10px solid transparent;border-bottom-color: #fff;left: 50%;margin-left: -10px;bottom: -4px;
}.btnWhit:before {content: '';display: block;position: absolute;border: 10px solid transparent;border-bottom-color: #00b38a;left: 50%;margin-left: -10px;bottom: 0px;
}body {background: #f8f9fc;
}
.header {height: 360px;background: #00b38a;
}.boxCon {position: absolute;top: 77px;left: 50%;margin-left: -325px;width: 700px;height: 490px;.logo {height: 77px;background: url('img2/logo.png') no-repeat;}.forBox {height: 400px;border: 1px solid #dce1e6;padding: 6px;background: #fff;.imgBox {img {margin-left: 6px;}img:nth-child(2) {margin-top: -5px;}}.inpLeft {position: relative;width: 290px;height: 277px;padding: 0px 63px;border-right: 1px dashed #555;.or {position: absolute;width: 18px;height: 18px;right: -8px;top: 50%;margin-top: -9px;background: #fff;text-align: center;color: #555;}.line1 {height: 40px;border-bottom: 1 px solid #555;font-size: 18px;color: #555;line-height: 40px;p {width: 145px;text-align: center;position: relative;}p:nth-child(1) {color: #00b38a;border-bottom: 1px solid #00b38a;}}.lineInp {input {width: 100%;height: 44px;padding-top: 20px;}}.txt {color: #00b38a;height: 58px;line-height: 58px;font-size: 12px;text-align: right;}input[type='submit'] {height: 48px;width: 100%;background: #00b38a;color: #fff;text-align: center;line-height: 48px;font-size: 18px;}}.inpRight {padding-left: 52px;color: #555;font-size: 14px;padding-top: 80px;.txt2 {font-size: 16px;color: #00b38a;margin-bottom: 44px;height: 33px;line-height: 33px;img {display: inline-block;margin-left: 3px;vertical-align: middle;}}.txt3 {img {margin-right: 24px;margin-top: 10px;}}}}
}

3.登录注册切换边框设计

二、结果设计图

拉钩网前端项目实战06相关推荐

拉钩网前端项目实战04
拉钩网前端项目实战拉钩网前端项目实战04 banner和content设计一.banner部分设计 1.html部分 <div class="banner">< ...
WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习课程介绍 WEB前端项目实战/酒仙网开发课程收益 WEB前端项目实战/酒仙网开发讲师介绍李强强更多讲师课程 ...
linux mysql 实战_Linux平台MySQL多实例项目实施_MySQL数据库基础与项目实战06
Linux平台MySQL多实例项目实施_MySQL数据库基础与项目实战06 视频教程学习地址 Oracle/MySQL数据库学习专用QQ群:336282998.189070296 学完风哥本课程能熟悉 ...
最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版
课程介绍下载地址:百度网盘一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发对于想从事Web前端学习和开发工作的朋友来 ...
html项目_学完html+css就可以做的前端项目实战
爱创课堂专业前端培训微信:haomei0452 前端资料免费分享平台关注博雅互动项目预览: 一.项目搭建 css部署:一定注意css引入顺序1 清除默认样式css文件 reset.css2 可以 ...
web前端项目实战_vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
web前端项目实战_Vue项目仿美团【爱创课堂】
目录 Vue 2.0 一.Vue Cli 1.1安装 1.2创建项目 1.3启动项目 1.4目录架构 1.5 webpack配置二.项目实战 2.1技术架构 2.2目录部署 2.3路由 2.4 we ...
用html制作一个华为页面,Web前端项目实战——华为荣耀商城（学完html+css就可以做）...
复习: 1.1到目前所学的布局方式 table布局: div+css布局: 固定布局百分比布局 1.2 盒子模型 Margin border padding content 1.3 布局模型流 ...
html 怎么让tr的css覆盖td的_前端项目实战——华图教育网页（适合学习了HTML和CSS的小伙伴们）...
这是在我学习了HTML和CSS以后做的实战项目,项目整体比较简单,但是有利于新手(比如我)了解和熟悉前端编程的代码和结构,因为在我最开始写这个网页的时候其实对于代码该怎么写并没有一个比较清晰的思路,就 ...
找工作前练手前端项目实战2
这篇文章千锋长沙前端培训机构整理了10个前端实战项目,大家可以从当中选择自己想做的项目进行参考学习练手,你也可以从中寻找灵感去做自己的项目. 1.仿小米电商网站:本项目是基于原生JavaScript等 ...

拉钩网前端项目实战06

拉钩网前端项目实战

拉钩网前端项目实战06

一、登录注册部分设计

1.html部分

2.css部分

3.登录注册切换边框设计

二、结果设计图

拉钩网前端项目实战06相关推荐

最新文章

热门文章