了解html5和css3.0 | LinkedIn
上一组会员更多曾经就职gbi - front-end engineer, 南京软通动力 - 前端开发工程师教育背景东南大学成贤学院更少吴刚更多目前就职上海挖财信息技术有限公司 - 高级前端工程师曾经就职上海我友网络科技有限公司 - 高级前端工程师教育背景湖南科技职业学院更少更多目前就职花旗 - assistant manager曾经就职埃思本软件 - software developer I教育背景电子科技大学, 电子科技大学更少更多目前就职南京航空航天大学金城学院 - 应届毕业生教育背景南京航空航天大学金城学院更少更多曾经就职广州一洲信息技术有限公司 - web前端开发工程师教育背景广东商学院更少下一组会员让某大神觉得有意思才行。。。所以我写了这个。。。还有，争取上首页。自从改版后写的文章就没上过。。。求赞！！！html代码片段&!DOCTYPEhtml&&html&&head&&metahttp-equiv=&Content-Type&cont ...
今天偶然发现一个神奇的东西：GSAPJS到底什么是GSAP?GreenSock动画平台是一套脚本动画工具。它包括：TweenLite：处理几乎任何物件的任何属性的动画引擎核心。相对轻量级，但功能齐全，可以选择要使用的插 ...
图片以金字塔式堆叠，从下层循环抽取当前(current)想看的图片，切换不是很顺溜，敲完代码好晚了，睡了，以后有时间再改善吧→_→html代码片段&!DOCTYPEhtml&&html&&head&&metacharset=&utf-8&&&t ...
关于cookie操作相关函数，不少人写过封装。这里分析一下jquery插件jquery.cookie.js的源码。源码与介绍网址：/carhartl/jquery-cookie#readme题外话，代码比较简单，几分钟就看完了。 ...
面试有几点需注意面试题目：根据你的等级和职位变化，入门级到专家级：范围↑、深度↑、方向↑。题目类型：技术视野、项目细节、理论知识题，算法题，开放性题，案例题。& ...
html代码片段&!DOCTYPEhtml&&htmllang=&zh-CN&&&head&&metacharset=&UTF-8&/&&metaname=&Keywords&content=&&/&&metaname=&Description&content=&&/&&metahttp-equiv=&X-UA-Compati ...
本人本科学的是行政管理，毕业后就顺理成章成为一个打杂的行政小妹，工作了8个月后果断辞职，因为工作实在是太太太无聊啦，受不了每天混日子的生活，就寻求改变咯。我是通过培训才顺利转换的，之前也尝试过自 ...
伏恩凯希总结欢迎加入WEB前端开发学习更多知识=======================================相信你看到看到这篇教程的时候，你已经知道什么是字体图标，有什 ...
昨天又被情绪给左右了，然后写了篇一塌糊涂的文字，终究还是太年轻，任性...定定心神，平复下心情，让思路回到主道上来，今天继续整理css。1、css整理之前的一些话如果说html是前端的“核心”，那css是 ...
我是一名前端coder，大学专业java，工作后由于兴趣还是选择前端并从0学起。由于是创业公司也有很多学习时间，通过看视频和看博客从html→css→js→jquery一点点学并用到工作。其实工作驱动学习的效率比自己茫无 ...
html代码片段&!DOCTYPEhtmlPUBLIC&-//W3C//DTDXHTML1.0Transitional//EN&&http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&&&htmlxmlns=&http://www.w3.org/1999/xhtml&&&head&&meta ...
时间过的真快转眼间2016年了，来公司虽然一个月了；但是还有好多不熟悉的地方。毕竟像我们刚出来工作的人来说，知识面还是太窄了。一个月的时间里我也学到了不少知识，了解到正式上班的不同，在这个项目里我学 ...
有关HTML的相关基础问题：1.Doctype作用？严格模式与混杂模式如何区分？它们有何意义?1）&!DICTYPE&声明位于文档中的最前面，处于&html&标签之前，告诉浏览器的解析器，用什么文档类型来规范解 ...
2015年职业开始：还是大三下学期，在学校实在无聊，于是便想看看有什么实习的岗位。可是问题是我会什么呢？最初的求职方向是互联网，因为我没有背景没有一个能拼的爹，学校里面学过C，java，c ...
javascript实现仿微信抢红包谷歌党专用：html代码片段&!DOCTYPEhtml&&html&&head&&metacharset=&UTF-8&&&title&仿微信抢红包&/title&&style&html,body,div{margin:0;padding:0;}body ...
转载地址：/post?id=1306感觉这篇文章写得很好，转这分享给大家看看。译注：本文翻译自谷歌工程师PhilipWalton的一篇博客。看过之后非常有感触，很多观点都是自己长期非常坚持和认 ...
前端常用网址：/myhomejQuery插件库http://www ...
主要是为了熟悉canvas绘图方面的相关api，从而学写了一个电子时钟。效果图如下：html代码片段&!DOCTYPEhtml&&htmllang=&en&&&head&&metacharset=&UTF-8&&&title&电子钟&/title&&/head&&body&&c ...
在切换中加入一些动画效果，让切换变得丝滑流畅html代码片段&!DOCTYPEHTML&&html&&head&&metahttp-equiv=&Content-Type&content=&text/charset=utf-8&&&title&&/title&&/head&&styletype= ...
习惯于从熟悉的地方入手的我，每要开始整理学习新东西之前，喜欢把熟悉的相关知识再温习一遍，既是总有所得的缘故，也是如此会将斗志燃到最烈。我总感觉这是病，但是不愿治....这次的前端整理，便直接从html ...
说： 为啥子我看不到效果欸，WIN10 ，chrome47~
说： 哈哈，求别人点赞才上的，不容易啊 //：来看头条哒
说： 来看头条哒
说： 此处急需要表情来表达我内心的想法,,,,, //：“模态框”，第一次听说，涨姿势了。。。
说： 既懂设计，又懂开发，高大上啊 //：说得好！感觉在二线城市不如一线那么注重前端，甚至很多公司要求会ps，完全成了高级美工。语言不分贵贱，其实说到底之所以后台轻蔑前端，无非是因为他们对前端的不了解。 //：看了之后，想起我的项目组，也要求前后台都懂的。我是侧重前端的。当时因为要改一个页面效果，我说得花点时间，一个后台说，说前端不就是画画页面嘛，用那么长时间吗。我说了下面一段话:后台不就是存取数据嘛，有啥难的。你有业务逻辑，我就没有了嘛，还要比你复杂呢。测试人员天天给我开票，为毛是我先定位是后台还是前台的问题。为毛老板说页面不好看，我就得改个几遍，为毛一些验证逻辑我这边做了，后台就不做了。为毛我要兼容所有的浏览器。。
说： 结构就是仿BS哒 //：这个是BS里面的模态框吧？
说： 这性格，我喜欢 //：好呗，给你个赞，哈哈哈
说： 还有new操作符、instanceof、void、typeof等等
说： 说得好！感觉在二线城市不如一线那么注重前端，甚至很多公司要求会ps，完全成了高级美工。语言不分贵贱，其实说到底之所以后台轻蔑前端，无非是因为他们对前端的不了解。 //：看了之后，想起我的项目组，也要求前后台都懂的。我是侧重前端的。当时因为要改一个页面效果，我说得花点时间，一个后台说，说前端不就是画画页面嘛，用那么长时间吗。我说了下面一段话:后台不就是存取数据嘛，有啥难的。你有业务逻辑，我就没有了嘛，还要比你复杂呢。测试人员天天给我开票，为毛是我先定位是后台还是前台的问题。为毛老板说页面不好看，我就得改个几遍，为毛一些验证逻辑我这边做了，后台就不做了。为毛我要兼容所有的浏览器。。
说： 好呗，给你个赞，哈哈哈
说： 只要步伐不停，不论走得多慢，都是前进。 //：那我还在找这座山的路上~~~ = =|| //：可不是吗，路还很长，别人能一览众山小，我们还在半山腰。 //：突然就有了这种‘错觉’哈哈哈 //：恩，能实现的。很多书上都有，加油。还有，挑毛病谁都会的，哈哈。主要是我们怎么看待这个问题。我跟你一样感谢那些挑毛病的人。至于水平嘛，我觉得以你现在的状态，钻研下去，过段时间就会有一种自己突然变强的感觉。两年前，我静下心来看了几本书后，突然就有了这种错觉。。。 //：才看到评论~
暂时有个想法
就是把指定的属性传递进去进行判断
是否为对象(我现在这种实现是默认的传入的是一个对象)
不是对象的话就要对传入的该指定属性进行判断 再进行相应的
说： 那我还在找这座山的路上~~~ = =|| //：可不是吗，路还很长，别人能一览众山小，我们还在半山腰。 //：突然就有了这种‘错觉’哈哈哈 //：恩，能实现的。很多书上都有，加油。还有，挑毛病谁都会的，哈哈。主要是我们怎么看待这个问题。我跟你一样感谢那些挑毛病的人。至于水平嘛，我觉得以你现在的状态，钻研下去，过段时间就会有一种自己突然变强的感觉。两年前，我静下心来看了几本书后，突然就有了这种错觉。。。 //：才看到评论~
暂时有个想法
就是把指定的属性传递进去进行判断
是否为对象(我现在这种实现是默认的传入的是一个对象)
不是对象的话就要对传入的该指定属性进行判断 再进行相应的属性值拷贝~ 不造能不能实现
我的js水平现在就这
说： 可不是吗，路还很长，别人能一览众山小，我们还在半山腰。 //：突然就有了这种‘错觉’哈哈哈 //：恩，能实现的。很多书上都有，加油。还有，挑毛病谁都会的，哈哈。主要是我们怎么看待这个问题。我跟你一样感谢那些挑毛病的人。至于水平嘛，我觉得以你现在的状态，钻研下去，过段时间就会有一种自己突然变强的感觉。两年前，我静下心来看了几本书后，突然就有了这种错觉。。。 //：才看到评论~
暂时有个想法
就是把指定的属性传递进去进行判断
是否为对象(我现在这种实现是默认的传入的是一个对象)
不是对象的话就要对传入的该指定属性进行判断 再进行相应的属性值拷贝~ 不造能不能实现
我的js水平现在就这样~~~ = =
还是很谢谢老姚~
总是能提出很关键且宝贵的建议
说： 突然就有了这种‘错觉’哈哈哈 //：恩，能实现的。很多书上都有，加油。还有，挑毛病谁都会的，哈哈。主要是我们怎么看待这个问题。我跟你一样感谢那些挑毛病的人。至于水平嘛，我觉得以你现在的状态，钻研下去，过段时间就会有一种自己突然变强的感觉。两年前，我静下心来看了几本书后，突然就有了这种错觉。。。 //：才看到评论~
暂时有个想法
就是把指定的属性传递进去进行判断
是否为对象(我现在这种实现是默认的传入的是一个对象)
不是对象的话就要对传入的该指定属性进行判断 再进行相应的属性值拷贝~ 不造能不能实现
我的js水平现在就这样~~~ = =
还是很谢谢老姚~
总是能提出很关键且宝贵的建议 //：既然是混入，那就得支持copy指定的属性
说： 有改的空间，估计不会改了，哈哈。谁愿意改就改哈，没有版权。。 //：可以再改进一下
Copyright &
All Rights Reserved.1、外发光文字
text-shadow: 0 0 0.2em #f87, 0 0 0.2em #f87;
2、描边文字
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
3、立体文字
text-shadow: -1px -1px #fff, 1px 1px #333;
4、火焰文字
text-shadow: 0 0 4px #fff, 0-5px 4px #ff3, 2px -10px 6px #fd3, -2px -15px 11px #f80, 2px -25px 18px #f20;
This entry was posted in .
手机号码正则：
var mobileReg = /^1[3|5|7|8|][0-9]{9}$/;
邮箱正则：
var emailReg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
密码正则：
var passReg = /^[0-9a-zA-Z_]{6,20}$/;
This entry was posted in , .
&!DOCTYPE html&
&html lang=”zh-CN”&
&title&&/title&
&script src=”/jquery/1.9.0/jquery.js”&&/script&
&div class=”box&#1&/div&
&script type=”text/javascript”&
$(function () {
$(“.box”).click( function () {
var ele = $._data($(“.box”)[0], “events”);
console.log(ele);
console.log(ele["click"]);
if (ele && ele["click"]) {
alert(“有绑定事件！”);
alert(“无绑定事件！”);
This entry was posted in .
js、juqery
天、时、分、秒倒计时
&div class=”seckill”&
&span class=”status”&&/span&
&em&：&/em&
&span class=”day”&–&/span&天
&span class=”hour”&–&/span&小时
&span class=”minute”&–&/span&分
&span class=”second”&–&/span&秒
$.fn.seckill = function (startTimePara, endTimePara) {
var startTime = startTimePara,
endTime = endTimePara,
$this = $(this),
// 开始时间
startTime = startTime.replace(/-/g,”/”);
startTime = new Date(startTime).getTime();
// 结束时间
endTime = endTime.replace(/-/g,”/”);
endTime = new Date(endTime).getTime();
// 当前时间
function wr() {
nowTime = new Date();
nowTime = nowTime.getFullYear() + “-” +
(+ + (nowTime.getMonth() + 1)).slice(-2) + “-” +
(+ + nowTime.getDate()).slice(-2) + ” ” +
(+ + nowTime.getHours()).slice(-2) + “:” +
(+ + nowTime.getMinutes()).slice(-2) + “:” +
(+ + nowTime.getSeconds()).slice(-2);
nowTime = nowTime.replace(/-/g,”/”);
nowTime= new Date(nowTime).getTime();
compareTime(startTime, nowTime, endTime);
//console.log(flag);
// 比较时间
function compareTime(startTime, nowTime, endTime) {
if (startTime & nowTime) {
resTime = startTime – nowT
resTimes(resTime);
$this.find(“.status”).html(“距活动开始”);
} else if (startTime &= nowTime && endTime & nowTime ) {
resTime = endTime – nowT
resTimes(resTime);
$this.find(“.status”).html(“距活动结束”);
//alert(1);
$this.find(“.status”).html(“活动已结束”);
$this.find(“p”).hide();
$this.find(“.day”).html(days);
$this.find(“.hour”).html(hours);
$this.find(“.minute”).html(minutes);
$this.find(“.second”).html(seconds);
function resTimes(resTime) {
//相差的天数
days = Math.floor(resTime / (24 * 3600 * 1000));
//相差的小时数
temp1 = resTime % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
hours = Math.floor(temp1 / (3600 * 1000));
//相差分钟数
temp2 = temp1 % () //计算小时数后剩余的毫秒数
minutes = Math.floor(temp2 / (60 * 1000));
//相差的秒数
temp3 = temp2 % (60 * 1000); //计算分钟数后剩余的毫秒数
seconds = Math.round(temp3 / 1000);
setInterval(wr, 1000);
执行方法：
$(“.seckill”).seckill(&#-21 9:20:00″, &#-21 17:50:00″);
实例地址：
欢迎大家，一起学习，交流。
This entry was posted in , .
响应式网页由伊桑.马科特提出，他在发表了一篇开创性的文章，将三种已有的开发技巧整合起来，并名为响应式网页设计。响应式网页（英语：Responsive web design，通常缩写为RWD），又称为自适应网页设计、回应式网页设计。 是一种网页设计的技术做法，该设计可使网站在多种浏览设备（从桌面电脑显示器到移动电话或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。
响应式网页不仅仅是响应不同类型的设备，而且需要响应不同的用户需求。响应式的初衷是为了让信息更好的传递交流，让所有人无障碍的获取信息，同时这也是 Web 的初衷。响应式的设计应该秉承「内容优先，移动优先」的设计原则。想要实现响应式设计，要注意以下：
媒体查询：
1、阻止浏览器缩放页面
在使用智能手机浏览PC端网站时，一般会自动缩放到合适的宽度使视口能够显示整个页面，但是这样会使文字变得很小，浏览内容不方便。可以通过设置meta标签的viewport属性，设定加载网页时以原始的比例显示网页，将这个meta标签加到head标签里。下面是将页面放大设备实际尺寸两倍显示的meta标签的示例：
&meta name=”viewport” content=”width=device-width,initial-scale=2.0″ /&
当按住屏幕2点向外拉伸可放大2倍时效果。
其中initial-scale=2.0的意思是将页面初始的缩放比例放大2倍，width=device-width的意思是浏览页面的宽度应该等于设备宽度。还可以通过user-scalacle=”no”设置禁止手动缩放，height=height-viewport浏览页面的高度应该等于设备高度，minimum-scale允许用户缩放到的最小比例，maximum-scale允许用户缩放到的最大比例。下面是我最终使用的meta标签：
&meta name=”viewport” content=”width=device-width,initial-scale=1.0,maximum-scale=1″ /&
当按住屏幕2点向外拉伸可放大1倍时效果。
2、媒体查询
实现响应式设计的关键技术是CSS3的媒体查询模块，可以根据设备显示器的特性为其设定CSS样式。创建媒体查询时，较常用的是设备的视口检测，如：width视口宽度、height视口高度、device-width渲染表面的宽度（设备的宽度）、device-height渲染表面的高度（设备的高度），还有更多的媒体查询检测特征，这里不就一一列举，如果想查看请，除了scan、grid之外，都可以使用min、max前缀来创建一个查询，所以可以这样创建一段代码：
&link rel=”stylesheet” type=”text/css” media=”screen and (min-width: 200px) and (max-device-width: 360px)” href=”smallScreen.css” /&
@import url(“phone.css”) screen and (min-width: 200px) and (max-width :360px);
以上2段代码，使其在视口在200像素和360像素之间才会引用的代码。
该图显示为使用link标签引用
该图显示使用@import时引用
虽然不匹配的文件会被自动忽略，但是不确定文件不被下载，因此，将可能造成页面渲染的HTTP请求，从而导致访问速度变慢，所以建议使用在CSS样式表中使用媒体查询，如下：
@media screen and (max-width: 320px) {
/* 设备宽度小于320px */
@media screen and (min-width: 320px) and (max-width: 480px) {
/* 设备宽度小于480px大于320px */
@media screen and (min-width: 480px) and (max-width: 640px) {
/* 设备宽度小于640px大于480px */
@media screen and (min-width: 640px) and (max-width: 768px) {
/* 设备宽度小于768px大于640px */
@media screen and (min-width: 768px) and (max-width: 1280px) {
/* 设备宽度小于1280px大于768px */
@media screen and (min-width: 1280px) {
/* 设备宽度大于1280px */
以上的代码区分了几个比较常见的视口宽度下显示样式，这个可以根据自己项目需求做适当的修改。
3、百分比布局（流体式布局）
媒体查询有其优越性，但也存在一定的局限性。那些仅使用媒体查询来适应不同视口的固定宽度设计，只会从一组CSS媒体查询规则突变到另一组，两者之间没有任何平滑渐变。为了实现更灵活的设计，能在所有视口中完美显示需要使用灵活的百分比布局，这样才能让页面元素根据视口大小在一个又一个媒体查询之间灵活伸缩修正样式。Ethan Marcotte提供了一个简易可行的公式口即：
目标元素宽度÷上下文元素宽度=百分比宽度
只要明确了上下文元素，就可以很方便地将固定像素宽度转换对应的百分比宽度，实现百分比布局。假设上下文宽度为200px，如果想设置目标的宽度是20px，可以这样设置：
width: 200
height: 50
border: 1px solid #f00;
width: 10%;
height: 50
background: #0f0;
&div class=”box”&
&div class=”pox”&&/div&
该图显示了pox的实际宽度为20px
网页中指定固定像素的字体大小是经常使用的文字大小单位是 px(Pixels)，但如果你想字体大小更具弹性的话，最好还是使用相对大小，CSS中比较常用的指定字体相对大小的单位有百分比，em以及CSS3新增的。
之前在网页设计中使用em代替px主要是为了文字缩放，因为老版本的IE无法缩放px单位的文字，实际上em是相对其上下文的字体大小而确定的，同样可以使用“目标元素宽度÷上下文元素宽度=百分比宽度”这个公式转换为相对单位。唯一值得欣慰的是，现代浏览器的默认字号都是16px，也就是body的默认font-size为16px，假设设置html的font-size为10px，可以这样设置：
body{ font-size : .625 } /* 10/16=0.625 */（小数点前面的0可以省略）
由于chrome不支持小于12px的字体，可以在FFbug中查看设置后的字号实际大小。
chrome查看如上
ff bug查看如上
这样定义了body的默认字号为10px，当想设置h1的字体为32px的时候，可以这样设置了：
h1 { font-size : 3.2 }
使用了em做为字体单位，可以很方便的全局修改字体大小，只要修改了body的fonn-size大小即可。这样在配合媒体查询可以在不同视口下显示不同的字体大小，em唯一不够完美的是基于父元素的字体大小，加入有很深的结构可能计算起来会很麻烦，but，css3的rem拯救了我们，再也不用担心父级元素的字体大小了，因为它始终是基于根元素的。通常在标题，正文等大面积文字的位置可以使用 rem。但是在一些特殊的设计场景，rem 可能会导致布局错位。
网页上除了文字就是图片，实现图片的流动布局非常简单，如下：
img { width : 100%;}
这样就可以使用图片自动缩放与其容器100%匹配。
推荐使用chrome浏览器模拟，既有手势，还有 mouse touch事件，同事也可以附加一个chrome插件《 》
响应式设计，也就是在一般设计的基础上加了媒体查询特性，使其能根据不同的视口加载不同的css样式，从而显示不同的效果。这里介绍的只是一些基础的知识，例如浏览器的兼容问题，当使用css精灵时候背景图片的问题，这些我会在后面的文章中再做介绍。这里提供一下我工作的案例供大家查考，《》《》！欢迎大家，一起学习，交流。处女男处女文章！
This entry was posted in , .
2016 年二月
891011121314
15161718192021
22232425262728