I want to design my webpage layouts only using div tags. But i'm not good at it. I need to underst开发者_运维百科and the basic techniques to build re-sizable websites.
Can you suggest some good tutorials/ tips to kickstart.
There are not many better frameworks for liquid layouts than http://cssgrid.net/
It isn't so much a tutorial as it is a starting point for pre-designed websites, but works wonders in helping you understand building sites for different screen sizes (all the way down to phones).
Check out this link as well for testing purposes - http://www.resizemybrowser.com/
There are many sites with tutorials which cover this. Here are a few I would recommend you checking out:
http://www.colorplexstudios.com/articles/div_web_design_tutorial/
http://www.mardiros.net/liquid-css-layouts.html
Also try looking for tutorials on fluid/elastic layouts if you want dynamic/resizeable designs using div tags and css.
I know that you're asking how to get started understanding CSS-based layout.
I'd like to point out at this early stage that DIV tags simply serve as containers which have no semantic meaning. While they sometimes help with layout, you can often achieve the same results by thoughtful styling of the HTML elements themselves.
For instance, a UL is a block-level element and CSS treats it exactly the same as a DIV in that respect.
I strive to use a few DIV tags as possible in my layouts, preferring instead to exploit the box model of the HTML elements. This minimizes variables and results in much cleaner, more maintainable code for the future.
As you learn, get in the habit of working without DIVs where possible. You'll understand the HTML and the CSS much better in the long run.
精彩评论