Home > Developer > Web Develop
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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
