PHP Full stack Development (iv): HTML Learning (2. Div layout)

Source: Internet
Author: User

Unordered list, with sequence table, custom list

The unordered list is UL indicated, each element is represented by Li

The sequence list is the OL representation, each element is represented by Li

    < ul >      < Li > Home </li><li> notification </  Li><li> orders </li>    </ ul >

The list is vertically arranged by default, and if you need to control the style of the list, you can use CSS for style control

Block elements <div>

Use block labels for layout. The oldest way to lay out a Web page is to use a table, and now we don't usually use tables to lay out, but using chunk element div

<Body><DivID= "Container"style= "width:1200px; height:800px; background-color:gray;"><DivID= "header"style= "background-color:red;">Management System</Div><DivID= "Menu-top"style= "Background-color:green;">Menu</Div><DivID= "Menu-left"style= "background-color:yellow; width:100px; height:200px; float:left; ">Menu</Div><DivID= "Content"style= "Background-color:blue; width:1000px; height:200px; Float:left; ">content is here</Div></Div></Body>

You can see that we first defined a container div, which is container, then the width of the container is 1200px, the height is 800px, the background is gray, if the height is not specified, then it will be based on the contents of the height.

This container contains a total of four blocks, one is content, used as the main display, one is the head, header, used to put the first title of the page.

A left title bar, the ID of this title bar is Menu-left, the width of this block is 100, plus the content width 1000, less than the width of the container container 100, so there will be a 100px gray edge on the far right of the content.

Because the header does not specify a width, it follows the width of the container.

The span tag is an inline element that can be used as a text container within a chunk element.

Inline elements and chunk elements are two opposite concepts.

PHP Full stack Development (iv): HTML Learning (2. Div layout)

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: 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.