Posts

Showing posts with the label liquid website example by css zilla

Basic concept of liquid css and design

Theory:- Hello Guys, hope you doing well. Today i explain the basic concept of liquid design which make your web page totally fluid and looks good in all screen sizes. Fonts sizes issue:- Good question!! if we stick with our liquid design principles we’ll need to use relative font units. Our choices are: 1:-Em's 2:-%'s 3:-ex's 4:-css keywords What is Liquid Design? The term "Liquid" means a webpage should flow smoothly in all screen sizes. <style> body { font-size:1.5em;} .top_header { background:#666; color:#fff; min-height:50px; width:100%; float:left; padding:15px 0px;} .block1 { width:50%; float:left; background:#033; min-height:50px;} .block2 { width:50%; float:left; background:#090; min-height:50px;} .middle_part { background:#CCC; width:100%; float:left; padding:15px 0px;} .left_part { min-height:100px; float:left; width:30%; background:#960;} .right_part { min-height:100px; float:left; width:70%; background:#690;} .foote...