前端开胃菜
关注
分享
扫一扫
文章平均质量分 59
u011263845
一个热爱前端但不愤怒的前端工程师。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Front end foundation course 5(javascript 1)
JavaScript 基础 Part 1什么是 JavaScriptJavaScript（以下简称JS）是一种动态脚本语言，弱类型，继承基于原型。遵循的规范是 ECMAScript。如何引入 JS外部文件内部脚本script src=''>script>script> // do some stuffscript>Hello world// 输出 He原创 2015-04-11 12:00:20 · 526 阅读 · 0 评论 -
css让footer永远保持在页面底部
案例1：只保存在页面底部，不固定。思路： html： <div class="body"> <header>我是头部</header> <div class="content">我是内容</div></div><footer>我是页脚，我总是固定在页面底部</footer> * { margin: 0; padding: 0;}html, body {原创 2015-08-17 16:54:45 · 5069 阅读 · 2 评论 -
两端居中
http://codepen.io/tianzi77/pen/GJayoR原创 2015-08-18 10:15:38 · 491 阅读 · 0 评论 -
CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
http://codepen.io/tianzi77/pen/GJayoR原创 2015-08-19 09:59:00 · 5653 阅读 · 2 评论 -
玩玩斜线导航
很多网站采用怪异的导航，看起来很酷，斜线导航就是一种。 demo见：http://codepen.io/tianzi77/pen/bVNvpq <ul id="nav"> <li id="nav-1"><a href="#">I love you</a></li> <li id="nav-2"><a href="#">Test nav</a></li>原创 2015-09-04 22:36:27 · 561 阅读 · 0 评论 -
解读CSS布局之-水平垂直居中
地址：http://f2e.souche.com/blog/jie-du-cssbu-ju-zhi-shui-ping-chui-zhi-ju-zhong/转载 2015-07-26 11:36:03 · 562 阅读 · 0 评论 -
好玩的input输入框
这个效果可以用于各种输入框效果，搜索什么的。 demo：http://codepen.io/tianzi77/full/XmXZmW简单的input标签作为html结构： <input type="search" size="50" id="search"> <label for="search" class="searchlabel"></label>样式主要玩到了before原创 2015-09-15 17:33:34 · 545 阅读 · 0 评论 -
垂直居中解决方案，兼容ie6+
本来想发在博客上的。妈的最近博客抽风。文章发布老是有问题。哎不想折腾。烦死人了。直接放个demo得了垂直居中demo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>垂直居中解决方案（兼容ie6+）</title> <link rel="stylesheet" href="http://w原创 2016-04-28 16:08:19 · 2407 阅读 · 0 评论 -
复习一下两列布局。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>两列布局</title> <link rel="stylesheet" href="http://www.zhangweiwei.cn/demo/reset.css"> <style> .wrap {原创 2016-04-22 17:23:38 · 468 阅读 · 0 评论 -
网页遮层
<div class="mask-cj" style="display:none; position:absolute; width:100%; height:100%; top:0; left:0; z-index:888;background:rgba(0,0,0,0.5);"> </div>网站body顶部添加一层遮罩原创 2015-08-10 14:32:54 · 618 阅读 · 0 评论 -
机票去程返程的切换效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport原创 2017-09-04 16:40:53 · 1065 阅读 · 0 评论 -
用svg实现上传图片进度条效果
demo:http://codepen.io/tianzi77/pen/jPXRKo<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <svg width="440" height="440"> <circle原创 2015-08-04 09:13:12 · 996 阅读 · 0 评论 -
表格js插件highcharts
中文官网：http://www.hcharts.cndemo：http://www.hcharts.cn/demo/index.php?p=27确实很方便。另外 var arr=[{ "endCount": 12, "hour": 0, "minutes": 0, "week": 0},{ "endCount": 2, "hour": 0, "minutes"原创 2015-08-03 19:04:18 · 642 阅读 · 0 评论 -
css中的bfc怎么玩？
首先弄明白一个概念，上面是bfc？ w3c是这样解释 BFC(Block Formatting Context)是Web页面中盒模型布局的CSS渲染模式。它的定位体系属于常规文档流。说通俗一点就是： float的值不为none position的值不为static或者relative display的值为 table-cell, table-caption, inline-block,原创 2015-08-02 19:17:40 · 720 阅读 · 0 评论 -
JavaScript 基础 Part 2
常用对象上节课有提到引用对象，并大致的讲了一下。这里再选取其中3种稍微详细的讲一下。Object对象，其内容形式为键值对，主要用来存储和封装。创建对象创建一个对象有两种常见方式，通过对象字面量 {} 或者 new 操作符。如下：var obj = {};var obj2 = new Object();对象内容的键值对中，值可以是各种类型的数据，如：var obj原创 2015-04-11 16:13:10 · 511 阅读 · 0 评论 -
Front end foundation course 2(html2)
HTML tags part 2imgsrcaltheightwidthformactionmethodfieldsetlegendbuttonlabelinputcheckboxradiotextbuttonresetdate, url, color, email ... e.t.c [HTML5]textareaselectoptiontabletheadtbodytfoottrtht原创 2015-04-06 15:36:41 · 422 阅读 · 0 评论 -
JavaScript 基础 Part 3
第一题function min(arr) { var len = arr.length; if (!len) return; var res = arr[0], i; for (i = 1; i < len; i++) { res = arr[0] > arr[i] ? arr[i] : res; } re原创 2015-04-11 22:54:08 · 386 阅读 · 0 评论 -
Front end foundation course 1（html1）
前端开胃菜第一课，本节课主要内容为：开发环境介绍HTML 入门 Part 1Development environmentText editor文本编辑器主要用来进行一些文本编辑工作，是开发中的主力工具。使用自己熟悉或者顺手的文本编辑器即可。Sublime textAtomNodepad++Vime.t.cIntegrated development environ原创 2015-04-06 15:25:47 · 447 阅读 · 0 评论 -
JavaScript 基础 Part 4
小练习将一个日期字符串如 '2014-12-12' 转化为中文 '二零一四年一二月一二日'。function date2CN(str) { var date = new Date(str); if (date.toString() === 'Invalid Date') return 'Not a Date'; return str2CN(date.getFul原创 2015-04-12 17:52:25 · 458 阅读 · 0 评论 -
初识jQuery 什么是jquery
本节课的主要内容为:jQuery 初识jQuery 选择器关于 $ 函数关于 jQuery 对象常用 DOM 方法jQuery 初识jQuery 是由美国人 John Resig 于 2006 年创建的一个开源项目，基本功能包含访问和操作 DOM、控制页面样式、处理页面事件、便捷的动画、便捷的 AJAX 等。大家可以通过这个链接下载到 jQuery 2.1.3 的压缩版本，请大原创 2015-04-13 17:10:11 · 657 阅读 · 1 评论 -
Front end foundation course 3（css1）
CSS基础什么是CSSCSS 即层叠样式表，主要作用就是指定 HTML 中各元素的样式，从而使整个页面达到很好的展示效果。CSS引入方式外部文件内部样式表内联样式CSS语法基础语法selector 表示选择器，花括号中即为对其修饰的属性和值的键值对。selector { roperty: value}分组通过逗号分隔可以将选择器分组，这一组的原创 2015-04-09 16:45:28 · 400 阅读 · 0 评论 -
高亮显示当前导航条的javascript
首先写一下html结构:<div id="nav"> <ul> <li><a href="#1">首页</a></li> <li><a href="#2">产品</a></li> <li><a href="#3">地址</a></li> <li><a href="#4">关于</a></li> <li><a hr原创 2015-05-25 20:55:35 · 3510 阅读 · 3 评论 -
innerHTML,innerText,outHTML的用法及区别详解
innerHTML,innerText,outHTML的用法及区别,今天就详细的解说并且带有实例说明。大家一看就明白，进入正题，接下来我们用下面的这段代码做测试<div id="tianzi"> <span style="color:red">www.seostudying.com</span> </div>1.tianzi.innerText 它得到的是<div></div>标签中的文本节点的内原创 2015-07-28 20:49:36 · 1423 阅读 · 0 评论 -
页面仔玩样式
demo地址：http://codepen.io/tianzi77/pen/pJYQLw结构html： <!--做一名合格的页面仔--> <div id="nav"> <ul> <li>hl</li> <li>hl</li> <li>hl</li> <li>hl</li>原创 2015-08-11 16:18:13 · 643 阅读 · 0 评论 -
纯css玩转三角形
如今css3盛行的时代，用canvas，svg以及linear-gradient，radio－gradient都能画出各种各样的图形。但是早在css2时代，画三角形就不是什么新鲜事。这里简单总结一下，也方便自己查阅。<div class="triangle-up"></div>写出通用结构， .triangle-up { width: 0;原创 2015-08-27 18:57:33 · 816 阅读 · 0 评论 -
腾讯观看高清视频的方法
https://v.qq.com/x/page/y0539nxjptf.htmly0539nxjptf为iframe中的vid，这样就可以选择观看的清晰度原创 2017-10-09 21:00:22 · 926 阅读 · 0 评论