pink老师世纪佳缘作业

代码实现如下：

1.HTML部分：

<body><input type="text" value="邮箱/ID/手机号" class="uname"><input type="text" value="密码" class="pwd"><button>登录</button></body>

2.CSS部分：

<style>input {border: 1px solid #d9d9d9;outline: none;color: #b5b2bd;padding: 2px 0 2px 10px;height: 25px;width: 136px;box-sizing: border-box;display: inline-block;vertical-align: top;}.pwd {margin-left: 2px;margin-right: 2px;}.change {border: 1px solid pink;vertical-align: top;}button {background-color: #0098c2;color: white;border: none;height: 25px;width: 67px;}</style>

3.JS部分：

<script>var uname = document.querySelector('.uname');var pwd = document.querySelector('.pwd');uname.onfocus = function() {    if (this.value !== '手机/ID/邮箱') {this.className = 'uname change';this.style.color = '#b5b2bd';} else {this.value = '';this.className = 'uname change';}}uname.onblur = function() {if (this.value === '') {this.value = '手机/ID/邮箱';this.className = 'uname';} else {this.className = 'uname';this.style.color = 'black';}}pwd.onfocus = function() {if (this.value !== '密码') {this.className = 'pwd change';this.style.color = '#b5b2bd';} else {this.value = '';this.className = 'pwd change';this.type = 'password';}}pwd.onblur = function() {if (this.value === '') {this.value = '密码';this.className = 'pwd';} else {this.className = 'pwd';this.type = 'password';this.style.color = 'black';}}</script>

4.遇到的问题：

（1）在点击文本框时会出现文本框下移的问题，这个折腾了好久，搜了一下才知道用“vertical-align”可以解决

（2）在点击文本框或者离开文本框时的字体颜色变化也要注意控制

（3）密码框显示“密码”两个字还是不太会弄，就自己瞎整了

pink老师世纪佳缘作业相关推荐

JS事件与操作元素--世纪佳缘（用户名、显示隐藏内容）--黑马程序员pink老师JS第P25-操作元素总结及作业1
需求:利用JS事件与操作元素复刻--世纪佳缘(用户名.显示隐藏内容). 开发环境:VScode.Edge 参考网站:世纪佳缘官网注册截面头部包含算法: 1.利用JS操作元素.事件以及if分支,修改表 ...
操作元素总结及作业1——世纪佳缘登录案例-黑马pink老师
在黑马前端教程里面,操作元素部分有这样一个案例就是世纪佳缘的登陆案例. 实现:登录的隐藏内容,以及密码框的设计,点击后颜色的变化. 简单的算法:利用JS操作元素.事件以及if分支,修改表单获取焦点和失 ...
杨鹏谈世纪佳缘推荐算法：基于Spark GraphX，弃GBDT和LR用FM
杨鹏谈世纪佳缘推荐算法:基于Spark GraphX,弃GBDT和LR用FM 发表于2015-09-30 09:53| 1447次阅读| 来源CSDN| 2 条评论| 作者杨鹏机器学习推荐算法 ...
【转】推荐系统入门实践：世纪佳缘会员推荐（完整版）
推荐系统入门实践:世纪佳缘会员推荐(完整版) 版本作者联系日期 1.0 周巍然 weiran.chow@gmail.com 20120723 2.0 严程 supersteven198701@ ...
python是一种面向对象的高级语言_爬了世纪佳缘后发现了一个秘密，世纪佳缘找对象靠谱吗？...
今天在知乎上看到一个关于[世纪佳缘找对象靠谱吗?]的讨论,其中关注的人有 1903,被浏览了 1940753 次,355 个回答中大多数都是不靠谱.用 Python 爬取世纪佳缘的数据是否能证明它的不 ...
世纪佳缘，玫瑰和面包开始PK
你在桥上看风景看风景人在楼上看你明月装饰了你的窗子你装饰了别人的梦 ----卞之琳<断章> 喜欢卞之琳这首诗的意境和韵味,如同一幅水墨画,淡雅,清新,悠远. ...
三天花三万！跟董事长女儿相亲却被骗财？世纪佳缘致歉杭州小吴并承诺赔偿...
时隔一个多月,世纪佳缘在官方微博回应了"杭州小吴相亲"事件.世纪佳缘称,公司服务部对该事件负有不可推卸的责任,经双方协商,服务吴先生的门店负责人将亲自上门致歉,并按服务合同金额进行 ...
用Html实现世纪佳缘交友注册页面是什么体验？
一.前言在零基础必看的Html5+Css3+移动端前端视频教程(三)中主要学习了表格.列表.表单标签的使用,那这篇博客就利用这些知识,实现注册页面. 二.分析页面布局这是世纪佳缘的官网,目前只凭借 ...
世纪佳缘财务及运营数据分析
世纪佳缘成立于2003年10月8日,是中国在线婚恋交友平台,通过互联网.无线平台和线下活动为单身人士提供严肃婚恋交友服务.2011年5月11日,世纪佳缘登陆美国纳斯达克进行首次公开募股,成为首家上市的 ...
【世纪佳缘桌面V3.1.1正式版】聊天交流工具
世纪佳缘桌面 V3.1.1 正式版 [世纪佳缘网的聊天交流工具] 授权方式:免费软件界面语言:简体中文软件大小:12.12MB 所属专题:网络软件运行环境:Win2K,WinXP,Win2003 ...

pink老师世纪佳缘作业

pink老师世纪佳缘作业相关推荐

最新文章

热门文章