Nolan's Blog

a PHP JS UI APP developer


HTML Character Code

Char Code Char Code Char Code Char Code Char Code
´ ´ © © > > µ µ ® ®
\& & amp; ° ° ¡ ¡   » »
¦ ¦ ÷ ÷ ¿ ¿ ¬ ¬ § §
• ½ ½ « « ¶ ¨ ¨
¸ &cedil; ¼ &frac14; < &lt; ± &plusmn; × &times;
¢ &cent; ¾ &frac34; ¯ &macr; &quot; &trade;
&euro; £ &pound; ¥ &yen;
&bdquo; &hellip; · &middot; &rsaquo; ª &ordf;
ˆ &circ; &ldquo; &mdash; &rsquo; º &ordm;
&dagger; &lsaquo; &ndash; &sbquo; &rdquo;
&Dagger; &lsquo; &permil; &shy; ˜ &tilde;
&asymp; &frasl; &larr; &part; &spades;
&cap; &ge; &le; &Prime; &sum;
&clubs; &harr; &loz; &prime; &uarr;
&darr; &hearts; &minus; &prod; &zwj;
&diams; &infin; &ne; &radic; &zwnj;
&equiv; &int; &oline; &rarr;
α &alpha; η &eta; μ &mu; π &pi; θ &theta;
β &beta; γ &gamma; ν &nu; ψ &psi; υ &upsilon;
χ &chi; ι &iota; ω &omega; ρ &rho; ξ &xi;
δ &delta; κ &kappa; ο &omicron; σ &sigma; ζ &zeta;
ε &epsilon; λ &lambda; φ &phi; τ &tau;
Α &Alpha; Η &Eta; Μ &Mu; Π &Pi; Θ &Theta;
Β &Beta; Γ &Gamma; Ν &Nu; Ψ &Psi; Υ &Upsilon;
Χ &Chi; Ι &Iota; Ω &Omega; Ρ &Rho; Ξ &Xi;
Δ &Delta; Κ &Kappa; Ο &Omicron; Σ &Sigma; Ζ &Zeta;
Ε &Epsilon; Λ &Lambda; Φ &Phi; Τ &Tau; ς &sigmaf;


Height equals width with pure css

I was looking for a solution for flexible elements which remain the aspect ratio when resized. Until now I used some Javascript for resizing the elements. But using the resize event and recalculate the height of an element is some kind of nasty and never felt right. Recently I found a solution in an article from A List Apart and a topic on StackOverflow, which works quite well.

<div class='box'> 
	<div class='content'>Aspect ratio of 1:1</div> 

Css Link this:
We use :before to set the height

	position: relative;
	width: 50%;		/* desired width */
	content: "";
	display: block;
	padding-top: 100%; 	/* initial ratio of 1:1*/
	position:  absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;

But IE7 and below not work again..


, ,

HTML 5 little cookbook


Voice input :

<input type=”text” x-webkit-speech />

Get picture form Camera :

<input type=”file” accept = “image/*; capture=camera” />
<input type=”file” accept = “video/*; capture=camcorder” />
<input type=”file” accept = “audio/*; capture=microphone” />

Send sms to people :

<a href="sms:18005555555?body=Text%20goes%20here">Send SMS</a> 

Tel somebody :

<a href="tel:18005555555">Call us at 1-800-555-5555</a>


, , ,

CSS3 transition

W3C: CSS Transitions

W3C 中对 Transitions 是这是样描述的:“css的transition允许css的属性值在一定的时间区间内平滑地过渡. 这种效果可以在鼠标单击/获得焦点/被点击或对元素任何改变中触发, 并圆滑地以动画效果改变CSS的属性值. ”

其实广泛的解释是, 当一个dom的style从A变为B时, 值的变化过程.

transition : [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]

transition 是一个复值属性, 可以接受多个属性变化的设定. 以逗号隔开.



CSS 解决常规布局clear:both的作用溢出问题


< !DOCTYPE html>
	<nav style="float:left; width:200px;">Nav</nav>
	<div style="margin-left:210px;">Content</div>

然后问题就来了, 当他在div里增加内容后(包含了float样式的), 然后尝试用clear在内部清除float.
悲剧发生了… 清除后的效果是这样…


内部 Content 的 clear:both 属性将外面的 nav 的 float 一起清除了…
难道是 html5 的问题?


, , , , , ,

Powered by