HTML

, 24

2012

,
.

.
Gatcke

HTML

:
:

99Lime.com (

),

HTML5,

, jQuery

headstart

)
10

.
"

HTML

"

HTML
?"

?"
,

"
,"

:
,
.

HTML

.
.
,
.

"

"

"

unordered

"

"

"

<-

->

<

="

">

<

="

"> <

href = "">

<Li> <a href = "">

</ a> </ li>

</ a> </ li>

<Li> <a href = ""> </ a>

<Ul>
<Li> <a href = "">

</ a> </ li>

<Li> <a href = "">

</ a>

<Ul>
<Li> <a href = "">

</ a> </ li>

<Li> <a href = "">

</

a> </ li>

<Li> <a href = "">

</ a> </ li>

</ Ul>
</ Li>
<Li> <a href = ""> UX

</ a> </ li>

</ Ul>
</ Li>
<Li> <a href = "">

</ a> </ li>

</ Ul>
HTML

,
.

,
.

<Div

="

">

<H1>

<>

</ h1>

HTMLKickStart

<a href =

"http://www.99lime.com/elements/"> 99Lime.com </ a> </ p>

</ Div> <!

->

h1

. Style.css
.

.{
:
}
. H1 {
: 0;
}
.

{
: 0;

HTML
prebuilt

960.gs

12

(col_5

,
12

,
.

,
6 + 12 =)

divs,
.

col_6 (6
12

: col_7 col_5 + col_2, col_10 +,

.
,

divs, "col_4"
(H3)

div
placehold.it

.
<Div

= "col_4">
<H3>

</ h3>

<> Lorem ipsum

amet ... </ p>

<Img src =
"http://placehold.it/284x100/4D99E0/ffffff.png&text=284 x
100"

= "284"

= "100" />

</ Div>
<Div

= "col_4">
<H3>

</ h3>

<> Lorem ipsum

amet ... </ p>

<Img src =
"http://placehold.it/284x100/4D99E0/ffffff.png&text=284 x
100"
</ Div>

= "284"

= "100" />

<Div

= "col_4">
<H3>

</ h3>

<> Lorem ipsum

amet ... </ p>

<Img src =
"http://placehold.it/284x100/4D99E0/ffffff.png&text=284 x
100"

= "284"

= "100" />

</ Div>
.
?

,
.

"col_12" div

,
.

tweaking
.

/ * --------------------------------
/ * ----------------------------------{

style.css

: 0;
padding: 0;
: # 000;
: efefef # (

/ grid.png ) url

;
:

0.9em / 150% Arimo ', "Trebuchet MS', Arial,

Verdana,
-

;
: 0px 0px 1px

;/*

----

/*

}
"grid.png"
.
.

Slideshows

scraped.

<Div

="

col_12">

<H1>

</ h1>

<>

</ p>
</ Div> <!
<Div

->

= "col_8">

<-

>

<

="

"

= "600"

"350">

</ Ul>
</ Div> <!
<Div

->

= "col_4">
<H3>

</ h3>

<> Lorem ipsum

<

="

">

amet ... </ p>

<

/>

</ Div> <! END

->

.
reused.
,

HTML

"

.
,

unordered

HTML

"col_8 div,

col_4 div"

"

"

"
:

"

.
,

,
feats

,
.

<Div

="

"> </ div>

<Div id = "

">

<a href = "http://www.99lime.com"

> </ a> <a href =

"http://designshack.net/">
<

="

</ a>.

" href = "#

>

</ a>

</ Div>
,

div

.
div

padding

prettied

.
#
:

padding: 20px;
: 0;
background: efefef;

: 1px

# ccc;

: # 999;
: 0.8em;
: 0px 1px 1px fff;
}
#

{
;

: 666 #;
-

:
:

: 5px 10px;
background: e5e5e5 #;

: 100%;

- MOZ

: 3px;

: 3px;
: 3px;

Toolkit
.
,

, breadcrumbs,
.

,
.

tweak

:
:

HTML

HTML

.
boilerplates

HTML

, HTML

Toolkit
.

."

wireframes

.
?
,

HTML
.

.
,
.

offsetting

.
,
.

, HTML

"
.
,

handwork

HTML