响应式网页《一起惠返利网》项目要点
1.这是继《蚂蚁天使》网页后的第二个分组合作项目,分组合作,其中我参与了登录,淘宝,新闻评论页面的制作。
其间有许多效果,也用到了一些js的插件,首先是写响应式必须写的一句代码:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
应用了两个js插件:
A:<script src="js/jquery-1.8.3.min.js"></script>
B:<script src="layer/layer.js"></script>
一:先来说一说登录,注册里面密码框输入密码的显示与隐藏的效果:
1.现在HTML代码里边写一个关于隐藏显示的开关按钮:
<b class="tp-btn btn-off"></b> //现在的开关还属于关闭隐藏密码状态
2.css的代码:
.tp-btn {
cursor: pointer;
display: block;
height: 35px;
position: absolute;
right: 10px;
top:8px;
margin-top:0.5rem ;
width: 51px;
z-index: 1;
}
.btn-off {
background: url("../images/u_s1.png") no-repeat scroll 0 0 / 51px 35px; //隐藏密码的开关的图片
}
.btn-on {
background: url("../images/u_s2.png") no-repeat scroll 0 0 / 51px 35px; //显示密码的开关的图片
}
3.关于js的部分:
//显隐密码切换
function displayPwd(){
$(".tp-btn").toggle(
function(){
$(this).addClass("btn-on");
var textInput = $(this).siblings(".plaintext");
var pwdInput = $(this).siblings(".ciphertext");
pwdInput.hide();
textInput.val(pwdInput.val()).show().focusEnd();
},
function(){
$(this).removeClass("btn-on");
var textInput = $(this).siblings(".plaintext ");
var pwdInput = $(this).siblings(".ciphertext");
textInput.hide();
pwdInput.val(textInput.val()).show().focusEnd();;
}
);
}
二:其次再来说一说该项目的每个网页都有的页面加载效果的相关代码:
1.首先在HTML代码里边写出页面加载效果的HTML代码:
<div id="preloader">
<div id="status">
<p class="center-text"><span>拼命加载中···</span></p>
</div>
</div>
2:css重叠样式代码情况:
/*页面加载*/
#preloader {position:fixed;z-index:2500;top:0;left:0;right:0;bottom:0;background-color:#fff; z-index:999999; }
#status {
z-index:999999;
width:250px;
height:250px;
position:absolute;
left:50%;
top:50%;
background-size:32px 32px;
margin-top: -125px;
margin-right: 0;
margin-bottom: 0;
margin-left: -115px;
}
#status p{top:70%;}
.center-text{
text-align:center;
background-image: url(../images/loading.jpg);
background-repeat: no-repeat;
background-position: center top;
height: 182px;
width: 234px;
}
.center-text span {
font-size: 14px;
color: #999999;
position: relative;
top: 170px;
}
3.js代码:
先在头部引用<script src="js/jquery-1.8.3.min.js"></script>;
然后当页面在加载时:
<script>
$(window).load(function() {
$("#status").fadeOut();
$("#preloader").delay(350).fadeOut("slow");
})
</script>
以上几点是我在做项目过程中的几个使用且简便的网页操作的代码编写。
转载于:https://www.cnblogs.com/lumeiling/p/5065341.html
响应式网页《一起惠返利网》项目要点相关推荐
- 基于html5动画效果毕业论文,毕业设计(论文)-基于HTML5和CSS3的响应式网页制作.doc...
第PAGE \* MERGEFORMAT1页(共16页) 全日制本科生毕业论文 题 目: 基于HTML5和CSS3的响应式网页制作 学 院: 计算机与信息科学学院 专业年级: 计算机科学与技术2011 ...
- HTML5期末大作业:美食主题网站设计——美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--美食零食官网响应式网页设计(6页) HTML+CSS+JavaScript 期末作业HTML代码 学生网页课程设计期末作业下载 web网页设计制作成品 常见网 ...
- 什么是响应式网页?它包含了哪些要素?_分享:H5响应式公司企业网站(官网)建设制作策划方案...
分享:H5响应式公司企业网站(官网)建设制作策划方案! 从互联网+时代再到在移动互联网时代,从有PC网站.博客.QQ空间.微博.分类信息.B2B,再到有手机网站.APP.自媒体.公众号.小程序--似乎 ...
- 设计师必读的15个响应式网页设计教程
@陈子木 响应式设计是由著名网页设计师Ethan Marcotte在2010年5月提出的设计概念,随后席卷前端和设计领域,成为了如今网页设计的大趋势.正如同Ethan所说:"响应式网站设计提 ...
- artcore html5,值得收藏的25款免费响应式网页模板_CSS_网页制作
对于开发者和设计而言,网页设计的活儿是干不完的.不同类型的网站对设计的诉求截然不同,从现在开始搜集各种网页模板吧.万一明天就可以用上呢?所以,你可以开始收藏下面25个响应式网页模板了 cmiHTML5 ...
- Froont!在线可视化响应式网页设计工具
Home / 热门下载 / 神器下载 / 正文 更多 44 今天要推荐的神器来自http://froont.com/ ,猜猜它有神马强悍的功能呢?是滴,进入网站后,你就会看到他说:&qu ...
- 响应式网页设计_响应式网页设计:我们从这里去哪里?
响应式网页设计 This article is part of a web development series from Microsoft. Thank you for supporting th ...
- 响应式HTML网页开发,web开发中的响应式网页设计
概念 响应式网页设计最初是由 Ethan Marcotte 提出的一个概念:为什么一定要为每个用户群各自打造一套设计和开发方案?Web设计应该做到根据不同设备环境自动响应及调整.当然响应式Web设计不 ...
- 来和小伙伴一起学习响应式网页设计吧
响应式设计现在已经成为网页设计师学习的焦点.优设哥发现群内有很多相关的讨论了,这说明我们平时接触该类案例越来越多. 你会渐渐发现,我们身边越来越多的企业和客户关注到响应式网站,作为勤奋的设计师,我们怎 ...
- FROONT – 超棒的可视化响应式网页设计工具
FROONT 是一个基于 Web 的设计工具,在浏览器中运行,使得各类可视化设计的人员都能进行响应式的网页设计,即使是那些没有任何编码技能的设计师.FROONT 使得响应式网页设计能够可视化操作,能够 ...
最新文章
- Redis未授权访问写Webshell和公私钥认证获取root权限
- 008PHP文件处理——文件操作r w (用的比较多) a x(用的比较少) 模式 rewind 指针归位:...
- C++构造函数的分类及调用
- python是外部还是编程_Python网络编程(绑定到外部地址)
- 深入理解java虚拟机 (三) 第二版
- Matlab--存储和加载.mat文件形式的数据
- java 自定义异常的回顾
- kvm虚拟化学习笔记(十)之kvm虚拟机快照备份
- ffmpeg怎么样处理网络流
- OpenJDK8和OpenJDK8u的差异
- php7 switch,Switch autocommit on or off - PHP 7 中文文档
- jfinal 和bjui 常用前后交互方式
- 解决速达软件提示将numeric转换为数据类型numeric时发生算术溢出错误问题
- Windows and CentOS IPv4转IPv6隧道方法
- 微信小程序背景图片 模拟器正常显示 真机无法显示
- 【高等教育6年+工作5年】的个人阶段性自述
- 用三角函数计算两个坐标点距离
- 快递查询—API接口
- 指标梳理对成功实施BI项目有什么意义
- Debian11安装搜狗输入法
热门文章
- 软件测试是否有存在的必要?带你了解测试的重要性!
- 工具推荐——分区助手
- 微信小程序后端获取用户信息
- Windows域结构关系及基本信息
- 常见面试题 | Spring AOP 实现原理
- c++实现天干地支纪年法
- 8750H带的动MATLAB2019吗,i7-8750H处理器对比7代i7-7820HK跑分测试
- 索尼z5android 7.1,真良心!索尼Xperia Z3+系列升至Android 7.0
- ubuntu设置root密码,强制删除用户及用户文件。
- 数字孪生工厂丨智慧工厂孪生驾驶舱,实现智能化精益生产管理