Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Head First CSS Layout

Head First CSS Layout

Something about CSS Layout.

大澤木小鐵

January 03, 2012
Tweet

More Decks by 大澤木小鐵

Other Decks in Technology

Transcript

  1. html, body, div, span, applet, object, iframe, h1, h2, h3,

    h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } ୅ৰᓭᚎኜཫணᅵό һІٙ͟዁છᅵό ࠅІࠈһεٙᅵό YUI CSS Reset: http://yuilibrary.com/yui/docs/cssreset/ CSS Reset ?
  2. ̒ீ׼˴ྡ ̙͜Ը࿁ᄁਜ෯ ˢ࿁֠͊રوٙਜ෯ ʔ̙ঐ๟ᆽ <div id="tracing-paper"></div> #tracing-paper position: absolute top:

    0 left: 50% width: 540px margin: 0 auto margin-left: -270px height: 100% z-index: 9999 background: url(img/_tracing-paper.png) no-repeat center 0
  3. Compass ౤Զ஢ε੶ɽٙNJYJO ཫ༱ͦۃ੬͜Ҧஔ ͜əఱΫʔ̘ə ცࠅτༀ3VCZ $ compass create <project> --syntax

    sass \ --sass-dir "sass" \ --css-dir "css" \ --javascripts-dir "js" \ --images-dir "img" Іࠈਖ਼ࣩͦ፽ Compass: http://compass-style.org