随笔分类 -  Front End

6 种CSS设置居中的方法
摘要：原文Demos of each of the methods below byclicking here.Horizontal centering with cssis rather easy. When the element to be centered is an inline element... 阅读全文
posted @ 2014-10-15 09:53 若愚Shawn 阅读(404) 评论(0) 推荐(0)
如何设置Grunt
摘要：原文地址：Step 1: Install Node.jsDownload a Node installerand run it. Installation packages are available for Mac, Windows, Linux, and SunOS. Alternatively... 阅读全文
posted @ 2014-10-15 08:27 若愚Shawn 阅读(264) 评论(0) 推荐(0)
JQuery(DOM操作)
摘要：DOM Core节点操作查找节点：$()插入节点：append(), appendTo(), prepend(),prependTo(),after(), insertAfter(), before(), insertBefore()删除节点：remove(), empty()复制节点：clone()替换节点：replaceWith(), replaceAll()包裹节点：wrapAll(), wrap(),wrapinner()属性操作get/set属性：attr('属性')删除属性：removeAttr()class操作get class：attr('class&# 阅读全文
posted @ 2013-02-14 06:56 若愚Shawn 阅读(154) 评论(0) 推荐(0)
JQuery（选择器）
摘要：1：选择器一般前面是$(something),$()内部会自动使用loop寻找参数指定的元素Selector type CSS jQuery What it does Tag name p{} $('p') selects all 'p' in the document ID #some-id {} $('#some-id') selects the single element in the document that has as ID of ... 阅读全文
posted @ 2013-02-12 00:10 若愚Shawn 阅读(344) 评论(0) 推荐(0)
3 ways to define a JavaScript class
摘要：3 ways to define a JavaScript classIntroductionJavaScript is a very flexible object-oriented language when it comes to syntax. In this article you can find three ways of defining and instantiating an object. Even if you have already picked your favorite way of doing it, it helps to know some alterna 阅读全文
posted @ 2013-02-08 05:45 若愚Shawn 阅读(402) 评论(0) 推荐(0)
CSS Layout
摘要：position有四种relative, absolute, static(默认), fixed， 其中relative不长用来对block element定位，但是relative和absolute用来标识其contain 的子是按照他们的位置做references的。Relative：1： 一般用法<style> div#outer { position: relative; width: 750px; height: 500px; margin: 0px auto; background-color: #369;... 阅读全文
posted @ 2013-02-05 06:49 若愚Shawn 阅读(315) 评论(0) 推荐(0)
CSS Reset
摘要：为什么要reset不同的broswer对css属性有不同的初始默认值，如果css里没有overwrite默认的css属性，浏览器使用初始值赋值这些css属性。所以写css之前，我们需要对所有浏览器首先来一次清盘，reset css，以便日后不会出现某明其妙的问题。Common Reset Propertymargin, padding, border, font-size- line-heightHow to reset in CSS注意一定要放在css文本的最前面，It's important these styles are the first styles your browse 阅读全文
posted @ 2013-01-21 04:52 若愚Shawn 阅读(342) 评论(0) 推荐(0)
Use Web Fonts and the @font-face CSS Method
摘要：预备知识CDN-hosted & FontSquirrelfontsquirrel如何设置font-faceWeb Fonts的知识项目总结：在实际项目中置入MyriadPro Cond字体。这里可以下载到convert好的MyriadPro字体。1：Good structure for the saved fonts：最好把调用font-face的css和字体放在同一个文件夹下： 或者 2：检查调用字体的css里是否有写font-face@charset "UTF-8";@font-face { font-family: 'MyriadPro Cond&# 阅读全文
posted @ 2013-01-19 00:57 若愚Shawn 阅读(344) 评论(0) 推荐(0)
Layout(CSS)
摘要：理解boxinner content width: border + padding + width(如果没有margin在的情况下inner content超过outer container的时候，会sacrifice outter padding， 用overflow控制）inner containner width: margin + border + padding + width(如果当有margin在的情况下inner containner超过outer container的时候，会sacrifice inner magrin， 用overflow控制）verticle margi 阅读全文
posted @ 2012-12-22 04:32 若愚Shawn 阅读(459) 评论(0) 推荐(0)
HTML基础
摘要：Fundamentals of HTML<head>:html tag的第一大项，里面用来放<meta><title><link><script><style>等向浏览器描述文件用。<head> <meta charset="UTF-8" /> <title> HTML Meta Information </title> <link rel="stylesheet" type="text/css" href=& 阅读全文
posted @ 2012-12-09 10:41 若愚Shawn 阅读(144) 评论(0) 推荐(0)