Flex transforms HTML learning essays about the layout of HTML pages

Source: Internet
Author: User

Write in front: This article is suitable for viewing from a friend who transforms from Flex programmer to a web programmer

The page layouts in Flex4 are fairly straightforward, such as horizontally positioned hgroup (Hbox in Flex3), vertically positioned vgroup (Flex3 in VBox), and absolutely positioned group (canvas in Flex3).

But when I transition to the Web programmer, with html+css layout page confused, what Div, what float, what position= "relative" is a what gui! As the blogger has just changed from flex to have a resistance, impatient not willing to study hard, so the bootstrap in the grid control to deal with it (don't say this grid is quite useful), but some of the layout requirements are relatively high place to modify the original CSS grid is troublesome, Later Bo Master found or simply use the original DIV+CSS layout to the convenience. With the project in-depth bloggers also gradually fell in love with the Web development today on the patience to write a few demo to enhance memory it!

Preparatory work:

A clean index.html, used for color-resolved CSS2

<HTML> <Head>  <title>Hello Html</title> </Head> <style>. Redrect{Border:1px solid #ff0000;    }. Bluerect{Border:1px solid #0000ff;    } </style> <Body>     </Body></HTML>

Let's take a look at Div, how the goods work.

1: Nothing is set, div default state is as follows

< Body >    <  class= "Redrect"></div></  Body>

Flex transforms HTML learning essays about the layout of HTML pages

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.