1 / 35

Extra CSS

Extra CSS. Content. Website development process CSS Javascript. Website development process. Content. I want… I need …. Customer. Website specification. Tester. Analyst. Sitemap. Web developer. Designer. Wireframe. Website. Page design. Template. Box model.

sani
Télécharger la présentation

Extra CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Extra CSS

  2. Content • Website development process • CSS • Javascript

  3. Website development process Content I want… I need … • Customer Website specification • Tester • Analyst Sitemap • Web developer • Designer Wireframe Website Page design Template

  4. Box model • Total element width = width + left padding + right padding + left border + right border + left margin + right margin • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin • IE includes padding and border in the width, when the width property is set, unless a DOCTYPE is declared.

  5. Fixed layout • A fixed layout is a layout with a fixed width • Pros : • Easy to create • Width are the same in all browser • No need min-width, • max-width • Cons : • Additional spaces in high resolution • Scrollbars when in low resolution • Examples : • http://www.lebloe.com • http://www.floridaflourish.com

  6. Fluid layout • Fluid (liquid) layout is a layout that adjust to the user’s screen resolution • Pros : • More use friendly • No unused spaces • Eliminate horizontal scrollbar • Cons : • May look awful in some resolution • Image, video may have multiple width • Additional space while less content in large resolution • Examples : • http://www.blossomgraphicdesign.com

  7. Floating element • CSS float allows element to be pushed to left or right so that other elements will wrap on it • Ex : img{ float:left;} • Float usually used for images and layout • To turn off other elements to wrap around float, use {clear:both} or clearfix (google it)

  8. Layout using float

  9. Positioning element • Using {position} we can place an element anywhere on webpage • position : static; • position : fixed; • position : relative; • position : absolute;

  10. Static position • static — The default positioning of all elements. Static elements remain in the normal page flow and do not move.

  11. Fixed position • fixed — Element will be taken out of the normal flow of the page, and attach to viewable page edges • fixed element will stay visible even when the page is scrolled. • Internet Explorer 6 does not support fixed positioning without !DOCTYPE

  12. Demo fixed element • PositionFixed.html

  13. Relative position • relative — A relative element will be positioned according to its static place holder • relative element will have a place holder to mark its original place

  14. Demo relative element • PositionRelative.html

  15. Absolute position • absolute — An absolute-positioned element will be taken out of the normal flow of the page & placed according to its nearest relative-positioned parent. • By default, <body> will has position:relative;

  16. Demo absolute position • AbsolutePosition.html

  17. Overlap element • If 2 element are overlapped when displaying, z-index will be used to specify their orders • z-index can be positive or negative • Higer z-index will be in front of others

  18. Demo overlap • PositionOverlap.html

  19. Image replacement • A technique to replace text with image using CSS <h1 class=“header"> Toosols online </h1> .header{ overflow:hidden; text-indent:-9999px; background:url(logo.gif) no-repeat; }

  20. Sliding door

  21. Rounded box

  22. Cross browser issue • IE6 and below has many CSS bugs • Some bugs : • PNG transparency • IE Box model • Double margin bug • No min/max width/height

  23. Double margin bug • Float left (right) element that has left (right) margin will have double margin • Demo : • Fix : • Add display:inline; to the floated element

  24. Min Height • E6 ignores the min-height property and instead treats height as the minimum height • Demo : • Fix : /*For IE6*/ #container {min-height:200px; height:200px;} /*For all other browsers*/ html>body #container { height:auto;}

  25. 100% Height • 100% height doesn’t effect in IE6 • Fix : • Specify a fixed height of its parent element. • Need element fill the full-length of your page, apply height:100%; to both the html and body elements /*100% height of the parent element for IE6*/ #parent {height:500px;} #child {height:100%;} /*100% of the page length for IE6*/ html, body {height:100%;} #fullLength {height:100%;}

  26. Float Drops • Floated elements drop below their expected position when their total width exceeds the content’s width of its container. • Demo • Fix : • Wrap content in a fixed-width container large enough to accommodate the content, or remove the width from the static block.

  27. Clear float • Container will not wrap floated elements properly • Fix : • Add width & overflow : hidden to its container

  28. 3px text jog bug • When text is next to a floated element. IE6 will add a 3px margin between the element and the text, even if none is specified • Fix : • When in IE6, apply margin-left : -3px for text

  29. Introduce Blueprint • http://blueprintcss.googlecode.com • License: MIT • Based on the idea of splitting the width of apage into 24 columns (with 40px = 30px +10px margin each) • By default max-width 950px (24 * 40 -10) • No fluid layout possible (yet)

  30. Ví dụ Style object example

  31. Ví dụ

  32. Thay đổi border, margin, padding DOM Node properties

  33. Thay đổi background Style background

  34. Thay đổi font Style font

  35. Objects • Everything in Javascript is object includes function • Object is simple name-value pairs, as seen in: • Dictionaries in Python • Hashes in Perl and Ruby • Hash tables in C and C++ • HashMaps in Java • Associative arrays in PHP • Very common, versatile data structure • Name part is a string; value can be anything

More Related