HTML 5 for ASP.NET 4 & 4.5 - Osbornm.com

adhocjackpotΑσφάλεια

5 Νοε 2013 (πριν από 4 χρόνια και 8 μέρες)

90 εμφανίσεις

PRACTICAL

WHAT

A NEW

Standard

Web

s
ection

hgroup

footer

article

aside

websockets

keyframes

validation

boxshadow

storage

video

audio

header

t
ime

s
ection

hgroup

footer

article

aside

websockets

keyframes

validation

boxshadow

storage

video

audio

header

t
ime

s
ection

hgroup

footer

article

aside

websockets

keyframes

validation

boxshadow

storage

video

audio

header

t
ime

WHY

s

impler

emantic

maller

s

s

<style>


.rounded {


padding: 10px;


position: relative;


}




.rounded
-
top
-
left,


.rounded
-
top
-
right,


.rounded
-
bottom
-
left,


.rounded
-
bottom
-
right {


height: 10px;


position: absolute;


width: 10px;


}



.rounded
-
top
-
left {


background
-
image:
url
(../images/topleft.gif);


left: 0;


top: 0;


}




.rounded
-
top
-
right {


background
-
image:
url
(../images/topright.gif);


right: 0;


top: 0;


}




.rounded
-
bottom
-
left {


background
-
image:
url
(../images/bottomleft.gif);


bottom: 0;


left: 0;


}




.rounded
-
bottom
-
left {


background
-
image:
url
(../images/bottomright.gif);


bottom: 0;


left: 0;


}

</style>


<div>


<div class="rounded
-
top
-
left"></div>


<div class="rounded
-
top
-
right"></div>


<p>Rounded Corners</p>


<div class="rounded
-
bottom
-
left"></div>


<div class="rounded
-
bottom
-
right"></div>

</div>

<style>


.rounded {


border
-
radius: 10px;


}

</style>


<p class="rounded">


Rounded corners

</p>

47
lines

9

lines

<script>

$(function () {


$("input[type=text]").each(function () {


$(this).
val
(
this.title
);


$(this).
addClass
("placeholder");


});



$("input[type=text]").focus(function () {


if ($(this).
val
() ===
this.title
) {


$(this).
val

= "";


$(this).
removeClass
("placeholder");


}


});



$("input[type=text]").blur(function () {


if ($(this).
val
() === "") {


$(this).
val
(
this.title
);


$(this).
addClass
("placeholder");


}


});

});

</script>


<form action="/stuff" method="post">


<input type="text" name="value"
title="
Value" />


<input type="submit" value="Submit" />

</form>

<form action="/stuff" method="post">


<input type="text" name="value" placeholder="Value" />


<input type="submit" value="Submit" />

</form>

1
pat
h

5
path
s

<div class="header">


<div id="
nav
">


<
ul
>


<li><a
href
="#">Link</a></li>


<li><a
href
="#">Link</a></li>


<li><a
href
="#">Link</a></li>


</
ul
>


</div>

</div>

<div class="page
-
body">


<div class="post">


<p>Some Content</p>


</div>


<div id="ads">Ad</div>

</div>

<div id="footer">


&copy;

</div>

<header>


<
nav
>


<
ul
>


<li><a
href
="#">Link</a></li>


<li><a
href
="#">Link</a></li>


<li><a
href
="#">Link</a></li>


</
ul
>


</
nav
>

</header>

<section>


<article>


<p>Some Content</p>


</article>


<aside>Ad</aside>

</section>

<footer>


&copy;

</footer
>

DEMO

http
://
modernizr.com

http
:/
/html5test.com

http://dev.w3
.org/html5
/
spec

http://
www.html5labs.co
m

Resource
s

OSBORNM

.com

twitter

github

codeplex