Nolan's Blog

a PHP JS UI APP developer

Html

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> 
</div>

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


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

But IE7 and below not work again..

继续阅读》

, ,

HTML 5 little cookbook

Tag

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的作用溢出问题

今天晚上同事发来段html5的布局,用的是老方法的左float右block的组合.简单如下


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

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

clear_both_1

内部 Content 的 clear:both 属性将外面的 nav 的 float 一起清除了…
咦…闻所未闻啊…做过无数的站点都没出现过这种情况呀?!
嘛,之前wp的后台也是这种布局的说…
难道是 html5 的问题?

继续阅读》

, , , , , ,

Powered by WordPress.org.