05 - CSS float, display, position.pdf

05. CSS Justina Balsė  05. CSS Parametras: float Parametras: clear Parametras: display Parametras: position Parametras: z-index 2  Parametras float | 1 Vaizdo medžiaga The float CSS property specifies that an element should be placed along the...

05. CSS Justina Balsė  05. CSS Parametras: float Parametras: clear Parametras: display Parametras: position Parametras: z-index 2  Parametras float | 1 Vaizdo medžiaga The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow 3 of the web page, though still remaining a part of the flow. Parametras float | 2 Float: none | left | right; Clear: left | right | both; 4  Parametras float | 3 Lorem...consequuntur totam. 5 😒 6  Display: block VS inline | 1 HTML5 Flow content HTML5 Phrasing content Block-level Inline h1, h2,..., h6 b, i p, pre strong, em ul, ol sup, sub 7 header, footer, article,... Display: block VS inline | 2 8 Block, inline, inline-block | 3 9 Parametras position Vaizdo medžiaga The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements. 10 Pavyzdys 11 Pavyzdys 12 Pavyzdys 13  position.class-name { Parametro reikšmė position: static; pagal nutylėjimą. } 14  position Static (default) Relative Absolute Fixed Sticky The top, right, bottom, and left 15 properties determine the final location of positioned element.  position: relative One.box { display: inline-block; Two width: 100px; Three height: 100px; Four background: #588C7E; color: white; }.two { position: relative; top: 20px; 16 left: 20px; background: #F2E394; color: #588C7E; } position: relative 17  position: absolute.container{ border: 1px solid #588C7E; Lorem ipsum... ores! width: 80%; One margin: 0 auto; } Two.box { Three display: inline-block; width: 100px; Four height: 100px; background: #588C7E; color: white; }.two { position: absolute; 18 top: 15px; left: 10px; background: #F2E394; color: #588C7E; } position: absolute 19  relative & absolute.container{ border: 1px solid #588C7E; Lorem ipsum... nemo! width: 80%; margin: 0 auto; One position: relative; } Two.box { display: inline-block; Three width: 100px; height: 100px; Four background: #588C7E; color: white; }.two { position: absolute; 20 top: 15px; left: 10px; background: #F2E394; color: #588C7E; } relative & absolute 21  position: fixed.two { One Two position: fixed; Three bottom: 15px; Four left: 15px; background: #F2E394; color: #588C7E; 22 } position: fixed 23  z-index The z-index CSS property specifies the z-order of a positioned element and its descendants. When elements overlap, z-order determines which one covers the other. An element with a larger z-index generally 24 covers an element with a lower one.  z-index.two { position: absolute; One top: 15px; Two left: 15px; Three background: #F2E394; Four color: #588C7E; z-index: 2; }.three { position: absolute; top: 35px; left: 75px; 25 background: #8C4646; color: #588C7E; text-align: right; z-index: 1; } z-index 26  Naudingos nuorodos The float property – https://tympanus.net/codrops/css_reference/float/ Free images – https://unsplash.com/ Color Pick for Chrome 27 – https://chrome.google.com/webstore/  Praktika (1) Duota: index.html. Išdėstyti turinį naudojant parametrą float. 28  Praktika (2) Duota: index.html, nuotraukos, stiliaus gidas. Kortelių išdėstymui naudoti parametrą 29 float.  Praktika (3) Išbandyti position parametrą: Pavyzdys 1 Pavyzdys 2 30  Praktika (4) Lorem ipsum... 31 Užvilkti tekstą ant nuotraukos.  Praktika (5) Sukurti HTML. Aprašyti CSS ir stilizuoti pagal pavyzdį. 32 Kartojimas CSS position – https://www.youtube.com/watch?v=jx5jmI0UlXU CSS float – https://www.youtube.com/watch?v=VwxGKpvW8Zk – https://www.youtube.com/watch?v=QkvFxXqElQ4 33 CSS display: inline, inline-block, block – https://www.youtube.com/watch?v=x_i2gga-sYg Praktika (*) The conversation 34 Užvilkti tekstą su fonu ant nuotraukos.  Praktika (*) Fiksuoti skaidrų footer su nuorodomis į socialinius tinklus tinklapio apačioje. 35 Justina Balsė  Praktika (*) | Timeline Duotas index.html. Sukurti laiko juostą. 36  Praktika (*) | Social Media Icons Duotas index.html. Fiksuoti ikonų bloką kairėje. 37 Praktika (*) Sukurti komiksą iš 6 paveikslėlių. Pavyzdžiai. Dialogo debesėliai: 38