Using HTML to design mall Homepage

Time:2020-10-21

Home page

requirement analysis

According to the product documentation, complete the mall home page, the display effect is as shown in the figure

technical analysis

Table label

Table tag
Common attributes:

  • Bgcolor: background color
  • Width: width
  • Height: height
  • Align: alignment

TR tag
TD tag

Merge cells:

  • ColSpan: cross column operation
  • Rowspan: cross row operation
    Note: after cross row or cross column operations, the occupied grid needs to be deleted

Nesting of tables: a table can be nested in TD
Common attributes:
Width = “100%” padding

Step analysis

  1. Create a table with eight rows and one column
  2. The first part: logo part: nesting a table with one row and three columns
  3. Part 2: navigation bar part: place 5 hyperlinks
  4. The third part: rotation chart
  5. Part 4: nesting a table with three rows and seven columns
  6. Part 5: put a picture directly
  7. Part six: copy part four
  8. Part 7: place a picture
  9. Part 8: put a bunch of hyperlinks

code implementation

Sign in
								register
								Shopping Cart
							
						
					
				
			
			
			
				
					home page
					Mobile phone digital
					Shoe bags
					Computer office
					Cigarettes and drinks
				
			
			
			
				
					
				
			
			
			
				
					 
						
							
								Latest products
							
						
						
							
							
								
							
							
																
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
						
						
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
						
					
				
			
			
			
				
					
				
			
			
			
				
					 
						
							
								Hot products
							
						
						
							
							
								
							
							
																
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
						
						
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
							
								
								Washing machine
								$998
							
						
					
				
			
			
			
				
					
				
			
			
			
				
					        
					About us
					contact us
					invite to one 's side men of wisdom and valor
					Legal statement
					Links
					Payment method
					Distribution mode
					Service statement
					Advertising statement
					
Copyright? 2005-2016 Chuanzhi mall. All rights reserved

Recommended Today

The course of using Chinese software of poedit Pro

Poedit pro (formerly known as poedit) is a free (professional version charge), open source and cross platform gettext class (. Po format, gettext is used in the application program for program internationalization) International Translation editor. It is also one of the most widely used software of the same type. At present, it is available in […]