Page Layout 1: Page Layout

Page Layout 1: Page Layout

Analyze the question-making ideas first

I. Layout

1. Because I have just learned the table layout, I first divide the page into several parts.

2. After observation, we found that this table can be divided into six rows. First, we can set table and tr.

3. Write the elements of each row

(1) The first row can be divided into two columns.

Column 1: An Image

Column 2: a row of hyperlinks (included with p). After the line breaks automatically, an input box and a normal button

(2) The second row is a cell.

First, a

There are 6 hyperlinks in the following line. In one line, my own ideas are always wrapped with p labels.

(3) The third row is an image.

(4) The fourth row adds a table in td, which is divided into three columns (not directly set to three columns, because it is difficult to merge cells, in the first row, I have already set two columns, so I can make up my mind for the weird combination)

4.1 first cell: There is a title and Image

4.2 Second cell: clearly shows the title and text (if every text I use p, the spacing is too large, so I use a line break because I haven't learned the ul li list yet)

The text below is a hyperlink, because you need to set the distance between Chinese characters and time in the hyperlink, so the span

4.3 cell 3: Obviously, the title is a table with four rows and two columns, and the corresponding content is written.

(5) rows 5th

After the title, there is a table. The content of the five cells is basically similar to a line break, a title, and a paragraph of text.

(6) rows 6th

One cell with two text segments

Second Style

(1) only the first row of the merged cell contains two columns, and the remaining columns are one column, which must be written in columns 2, 3, 4, 5, and 6.

(2) set the right arrangement of the content of the second td in the first line

(3) set the hr color and width

(4) set the width, height, and background color of the p label in the second line (remember to add class to the p label)

(5) The size, color, and underline Of the hyperlink in the p tag set the spacing between the hyperlinks.

(6) set the hyperlink font to bold

(7) set the left distance of the first Hyperlink and use the structure pseudo-class selector.

(8) In Row 4, set the distance between the text and the image in the title (measured by PS)

(9) I found that all the content is crowded together because no table width is added, and the content is scaled out by default. In addition, the table is vertically centered and aligned, because the height of the three columns is different, so the center is not aligned, So let them align up

When alignment all columns vertically, I select the subclass selector and select only the child's td to align them vertically.

(10) set the distance between news and time in the hyperlink. I used margin-left to pack the time with span.

(11) set the third column. The text size color adds class tab2 to the table.

(12) set the distance between tables in the third column

(13) after the modification, I found that the title and image are different from the source image and should be a little bit on the right. The method I used was to widen each td and align them horizontally.

(14) The title is also centered and pulled back.

(15) distance between images and hyperlinks

(16) set the project size

 

(17) set the h4 font size

 

(18) set the text color and size of p.

(19) to set the gap between cells, set the cell width.

(20) set the project settings and the margin to the left of the table

(21) set the last cell, height, background color, center content, font size

Then it is complete.