html
前端岚枫
技术翻译,技术人生,前端知识,生活感悟
展开
-
一个有关抽奖的专题项目
2015春节来了之后,就开始投入到忙碌的工作中,最近做了一个有关抽奖专题的项目,第一次整抽奖的相关前端方面的需求。 当用户点击抽奖的时候,我们首先需要判断用户是否登录,如果没有登录,提示用户登录,然后再进行抽奖;抽奖的时候,我们需要判断用户是否有抽奖的权限,如果抽奖次数已用完或者用户没抽奖的权限,需要对用户提示;当点击抽奖,用户选中了虚拟的奖品时候,我们需要根据弹窗提示,让用户进入后台看相关的奖品原创 2015-03-11 09:48:12 · 2608 阅读 · 4 评论 -
关于用jQuery实现的checkbox全选和反选功能
用jQuery实现了checkbox的全选和反选功能,代码如下: 复选框全选反选 body,dl,dt,dd,p{margin:0;padding:0;} body{font-family:Tahoma;font-size:12px;} label,input,a{vertical-al原创 2013-05-24 13:46:50 · 1662 阅读 · 0 评论 -
如何阻止复制剪切和粘贴事件
在一些应用中,有时我们提交表单内容如(密码)重要信息时,为了安全,需要阻止一些复制剪切和粘贴事件,今天做了一个简单的例子有关阻止复制剪切和粘贴事件: pwd不能复制粘贴 $(function(){ $("input:password").bind("copy原创 2013-05-23 15:27:59 · 2388 阅读 · 1 评论 -
关于table的用法(二)
在表格中使用border-collapse:separate属性,可以使表格边框与单元格边框分离。使用border属性,可以设置表格或单元格的边框。如果边框是分开的,那么表格边框与单元格边框会独立显示,使用cellspacing属性,可以控制单元格边框的间隔。IE7是不能显示空单元格的边框,空单元格是指不包含内容的单元格。空白字符不是内容。拆分边框需要使用HTML属性cellspacing控制单元原创 2013-04-03 15:53:21 · 1237 阅读 · 0 评论 -
关于table的那些用法(一)
从开始学习html,就一直用div+css来实现网页布局,很少用table,所以到现在对table了解只是些简单的,table对于后台数据布局还是有一定好处,比起div+css布局有一定的优越性。今天做后台页面用到处理数据的页面,就去了解了table方面的知识。 表格是HTML中最有用且复杂的结构之一,最简单的表格由一个元素构成,其中包含一个或多个行元素,每一行又包含一个或多个单原创 2013-04-02 16:36:15 · 1824 阅读 · 0 评论 -
jquery实现图片滚动效果
jquery 图片自动无缝滚动 ul,li { list-style: none;margin: 0; padding: 0;} li { float: left;} img { width: 100px; height: 100px; padding:0 2px} .a { width: 400p原创 2013-03-04 11:30:59 · 2021 阅读 · 1 评论 -
用jQuery实现banner图片切换
主要运用了定时器的原理,bind,trigger应用等 banner切换实现 /* * @description: banner切换样式 * @author: lanfeng(beryl) * @time:2013-02-26 */原创 2013-02-26 13:52:21 · 2205 阅读 · 0 评论 -
15个最新的HTML5及CSS3特效代码生成器
看上去这些离设计师很遥远!但是这些网页设计前端热门技术您多少得有些了解!如果也能写那么几段,肯定月薪过万了。@ 给前端朋友吧。其实编码最好的学习方法就是潜水,然后大量研究优秀代码并实践操作,一行行敲出来!@倪大挫http://t.cn/zjzw8TV非特殊说明,本文版权归原作者所有,转载请注明出处本文地址:http://www.uisdc.com/%e3转载 2013-02-23 10:45:10 · 1875 阅读 · 0 评论 -
用纯css实现的html5 logo标志
一个用css实现的html5 Logo,主要用html和css技术实现,例子如下:源代码下载地址:css部分代码如下:html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cit原创 2012-10-18 16:10:24 · 8266 阅读 · 0 评论 -
css3实现的精美菜单
下拉菜单是我们做前端经常遇到的一些案例,今天学习了一下一个博客做的案例,例子如下:源代码下载地址 css部分代码ul { font-family:Arial, Helvetica, sans-serif; background:#ccc; background:-webkit-gradient(linear, left top, l原创 2012-10-18 13:55:00 · 1306 阅读 · 0 评论 -
简单的选项卡功能实现
第一种方法是用原生的js 代码如下: 简单选项卡 body,ul,li{margin:0;padding:0;} body{font:12px/1.5 Tahoma;} #outer{width:450px;margin:10px auto;} #tab{overflow:hidden;zoom:1;backgr原创 2013-05-24 16:31:03 · 1701 阅读 · 0 评论 -
用js实现改变随意改变div属性style的名称和值的结果
一些简单的例子,用原生js和jQuery实现随意改变div属性,和重置。代码如下: 函数传参,改变Div任意属性的值 body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #ou原创 2013-05-27 16:18:25 · 4024 阅读 · 0 评论 -
最近做项目的一些关于重构方面的总结
这半年做专题和项目的过程中,遇到一些有时很难想到问题,今天在这总结以下:1. 关于width:100%缩小窗口时背景图片出现空白bug ,刚开始找了半天方法都没解决,最后在里面加了最小宽度给解决了, 例如: .top{ width:100%; height:原创 2013-07-04 10:59:12 · 1847 阅读 · 3 评论 -
EDM邮件营销之如何制作模板
在进行EDM邮件营销时,设计和制作模板也是一项很重要的工作,虽然可能不比EDM数据收集来的重要,但是也是不可忽视的。下面来讲解下在EDM邮件营销时如何制作模板。1,模板编码语言选择模板编码设定与使用的发送软件有关,一般来说,utf-8为较常用的选择,错误的编码会造成用户浏览的时候出现乱码;2,不要使用div,使用最简单的嵌套table定位Div+css是近几年新兴的web2.0定位转载 2014-10-17 14:13:54 · 2927 阅读 · 0 评论 -
2014年忙碌
从进入2014年以来一直在忙碌着工作事情,很少静下来心来去学习技术方面的知识,也没时间去逛那些技术博客、论坛,博客也荒废了半年多,现在所有的项目终于上线,也可以静下心来充电了。 年初一直准备工厂店移动站的项目,忙碌一两个月后准时上线,紧接着工厂店采购会员后台升级改版工作,一直到五月底,进入了工厂店几个后台系统和前台的所有的改版工作,目前所有项目在9月28完成了工厂店单店前台、工厂店供原创 2014-10-16 08:30:15 · 1195 阅读 · 1 评论 -
关于那些表单的验证码
验证码是一些注册、登录等表单常用的一个功能,为了防止一些恶意性的填写表单,不断地提交表单,造成安全隐患。验证码一般随机可以切换验证码图片,经过远程验证成功后才能成功提交表单。实现了简单的验证码功能 *用户名:原创 2014-10-24 09:39:03 · 2286 阅读 · 0 评论 -
checkbox全选和反选功能
用jQuery实现checkbox的全选和反选功能,当checkbox禁用时候不参与全选功能 body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;paddin原创 2014-10-22 15:27:17 · 2763 阅读 · 0 评论 -
js实现select跳转
js简单实现select跳转功能:代码如下 全部分类的商品 普通车床 回转车床 普通车床 回转车床 $(function(){ var $原创 2014-10-22 11:29:33 · 2356 阅读 · 0 评论 -
用jQuery实现返回页面顶部的功能
页面中有返回顶部的图标用起来使我们预览页面更方便,这个功能也是在网站中常见的功能,今天研究了一个简单的例子,用jQuery实现返回顶部的功能:css代码如下:*{ margin:0; padding:0;}#backToTop{ position:fixed; bottom:10px; left:80px; _position: absolute;_left:80px; _b原创 2012-07-31 15:06:59 · 1099 阅读 · 0 评论 -
如果用float实现居中
今天发现自己做的一个项目中有个图片切换的下面的按钮不是固定个数,程序那边根据循环实现放几个切换的按钮,但是按钮相对于整体的要居中,刚开始想着用display:inline-block;实现,但是ie6和ie7对块元素使用这个属性不是特理想,只能用hack解决,于是去请教同事,发现还有一种更好的解决办法。html代码如下:原创 2013-09-05 14:58:57 · 3063 阅读 · 0 评论 -
一些弹出框的用法例子(二)
第二种情况是关于弹出框,没有关闭按钮,但是点击其他地方的时候,弹出框消失,这个还涉及到一些关于层次问题,必须用js给弹出框的父元素加上更高的层次,以免被下面的内容覆盖。 询盘分配 询盘详情 联系人 所在地 来源原创 2013-08-26 08:54:20 · 2759 阅读 · 0 评论 -
一些弹出框的用法例子(一)
最近做一个项目,许多功能都是关于弹出框的,以前觉得弹出框就那一种,很容易实现,但是最近真的做起这个功能了,发现会有好多自己考虑不到的问题。 比如关于一些添加,删除,修改的弹出框,当添加一些用户的时候,弹出框里要提交一些关于用户的信息,设置密码等信息,当修改的时候,根据用户的名字和id号来修改密码等等。例子如下:原创 2013-08-26 08:31:50 · 1733 阅读 · 0 评论 -
用javascript实现有效时间的控制,并显示要过期的时间
JavaScript实现的一个设置时间有效期的,自己用jQuery实现的感觉代码太不简练,这个是同事写的一段js代码,自己研究学习了一下 无标题文档#lastdate{ color:#FF9900; font-style:normal;} 一天内原创 2012-09-14 09:57:23 · 2190 阅读 · 0 评论 -
JavaScript解决e6不支持不支持max-width,max-height的问题的方法
今天遇到一个关于用js解决ie6不支持支持max-width,max-height的问题,刚开始用jQuery方法来实现,不过一直获取不到css里面的值,如 if($.browser.msie && $.browser.version == 6.0) { var maxWidth = parseInt($('.viewBigPic img').css('max-width')原创 2012-09-10 13:58:26 · 1155 阅读 · 0 评论 -
用css3和html实现创建 Christmas Tree Ornaments(baubles)
css3的出现让我们在实现一些功能效果上变得更简洁,更方便。今天用css3实现圣诞树的一些装饰品,但是支持的浏览器有限,如ie6/7/8不能很好的支持这些css3属性,但是在其他浏览器上看起来效果还挺炫的。 html代码如下: css代码如下原创 2012-07-24 09:34:12 · 1307 阅读 · 0 评论 -
用css3制作一个搜索框效果
搜索框的形式有多种多样,今天试着用css3做了一个搜索框, html代码如下: css代码如下: body { background:#eee; font:12px 'Lucida sans', Arial, Helvetica; color:#333; text-align:center;}原创 2012-07-18 14:58:39 · 5742 阅读 · 0 评论 -
用css3和jquery实现的渐变的动态进度条
进度条是网站中常见的一种,今天经过研究外国一个网站的例子,试着用css3来实现进度条: html代码如下: Set above to: 25% / 50% / 75% / 100% Set above to: 25% / 50% / 75% /原创 2012-07-18 10:39:09 · 3248 阅读 · 1 评论 -
用css和jquery实现标签页效果(一)
用css和jQuery实现一个简单的标签页效果,用css实现斜边导航的效果,除了ie6其他的浏览器都支持, 其效果如下 css样式: body { width: 700px; margin: 100px auto 0 auto; font-family: Arial, Helvetica; font-si原创 2012-07-17 10:31:46 · 1379 阅读 · 0 评论 -
css3和jQuery实现一个简单的标签页效果
主要用css3另外一种jQuery思路方法来实现标签页的切换效果,主要用css3来实现一些渐变,阴影和圆角效果, css代码如下: body{width: 600px;margin: 100px auto 0 auto;font-family: 'Trebuchet MS', Arial, Helvetica; font-size: small;background原创 2012-07-17 14:29:43 · 1242 阅读 · 0 评论 -
css中的一些技巧
1、在IE6浏览器下使用CSS滤镜使PNG24背景图片实现半透明效果.ooxx{background-image:url(../images/a.png);_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src转载 2012-07-05 17:20:25 · 783 阅读 · 0 评论 -
用css实现星级评分效果
以前看到其他网站实现的实现的星级评分效果,没在意那么多,直到昨天做一个页面需要这个功能效果时,发现自己实现起来还是这么困难,折腾了半天才弄出来。 1. 其实主要是利用背景图片的切换位置来实现星级的效果, 2.分为三个层面,分别是空分层,分数层和打分层,我是用position:absolute;属性实现三个层面的定位; 3.利用链接中的a:hover属性设置背景图片来实原创 2012-04-21 08:58:57 · 2071 阅读 · 0 评论 -
网页中、英文安全字体选择及设置
天缘博客目前已支持雅黑字体显示,这样在Vista/Windows 7上会看起来更舒服点,问题虽小不过在测试时还是有些小的细节问题,这里总结一下,网页字体显示要求浏览者必须具有相应的本地字库,才会正常显示,否则将会按照系统默认的字体显示,所以设计网页就不得不考虑用户体验问题,虽然Vista/Windows 7已经发布并流行很久了,而Windows XP依然“东方不败”,占据过半市场,宋体依然是各大中转载 2012-04-18 16:20:45 · 1237 阅读 · 0 评论 -
实现两(三)列等高布局的方法
第一种方法: *{margin: 0; padding: 0;} #wrap{ padding-left:220px; overflow:hidden;background-color:#0ff;} *html #wrap{ height:1%;} #main{ float:right; ma原创 2012-03-14 09:56:51 · 929 阅读 · 0 评论 -
用css3制作一个Music Player Menu
用css3制作一个Music Player Menu,主要应用了css3 的box-shadow,border-radius,text-shadow,grident,等属性 html代码如下: CSS3 Music Player Menu II Artist Name -原创 2012-07-24 15:35:00 · 1307 阅读 · 0 评论 -
用css3和jQuery制作精美的表单
用css3和jQuery制作一个简单的精美表单html代码如下: Mask Your Input Forms and Make It BeautyToo PlainFading The Label Username Password Sliding? Don't Worry Us原创 2012-07-25 15:53:10 · 1108 阅读 · 0 评论 -
纯css3制作的几个社交媒体网站的图标
用纯css3和html来制作一些社交媒体的图标,虽然没有图片和javascirpt,css3配合 html也能实现这些图标。 html代码如下:div class="content"> Facebook Twitter RSS Flickr Delicious LinkedIn Google原创 2012-07-27 14:20:48 · 1950 阅读 · 0 评论 -
一般左边后台点击收缩展开的效果
html代码: 秋秋淘衣坊 秋秋 酒吧\夜店论坛 福州电影院 秋秋淘衣坊2 房屋出租 招聘求职 福州拼车 二手交易市场 秋秋淘衣坊3 福清论坛 长乐论坛 平潭论坛原创 2012-09-04 16:19:47 · 2763 阅读 · 0 评论 -
腾讯微博——点击按钮自动加关注代码
腾讯微博点击按钮自动加关注:预览效果:原创 2012-09-04 10:41:49 · 4493 阅读 · 4 评论 -
利用jQuery和css实现的模仿百度搜索列表页面的分页的足迹效果
主要运用css的border属性来实现三角形,jQuery实现切换和选中的效果:html代码如下:上一页 12 345 678 下一页css代码如下:* { margin:0; padding:0; font-size:12px;}.page { ma原创 2012-09-03 16:37:39 · 3008 阅读 · 0 评论 -
jQuery实现一个图片左右滚动
jQuery实现的一个图片左右循环滚动的例子,html代码如下: 我是第1张图片 我是第2张图片 我是第3张图片 我是第4张图片 我是第5张图片 我是第6张图片 我是第7张图片 我是第N张图片 当前显示的是第 1 张图片css代码如下:原创 2012-09-03 11:23:00 · 2394 阅读 · 0 评论