Several methods of making horizontal thin lines

First, horizontal line method

1. Create a new document in Dreamweaver, insert a horizontal line, double-click horizontal lines, and pull up the properties panel.

2. Set the height H = 0 pixel on the property panel of the horizontal line.

3.Copy This horizontal line, in the property panel to the shade point off.

4. Press F12 to preview, please compare the following (1) (2) source code and effect.

(1) Source code: <HR size= "0" color= "#3366FF" noshade> (2) Source code: <HR size= "0" color= "#3366FF" >

5. Another two H = 1 pixels horizontal line, respectively, there are shade and no shade.

(1) Source code: <HR size= "1" color= "#3366FF" noshade> (2) Source code: <HR size= "1" color= "#3366FF" >

6. Make two H = 2 pixels horizontal line, and define color, there are shade and no shade respectively.

(1) Source code: <HR size= "2" color= "#3366FF" noshade> (2) Source code: <HR size= "2" color= "#3366FF" >

7. Make two H = 2 pixels horizontal line, the color is the default value, there are shade and no shade respectively.

(1) Source code: <HR size= "2" noshade> (2) Source code: <HR size= "2" >

Looking at the above horizontal line effect, we found that when the height of the horizontal level H set to "0 pixel" and "1 pixel", regardless of the horizontal line has no shade (shadow), it in IE browser display as 1 pixel thin lines. In the forum has found that some netizens set the height of H to decimal value, such as: 0.1, in order to achieve the effect of 1 pixel, in essence, in the Dreamweaver Web page Editor, the property panel can not set the decimal value, but if we enter the source code directly, the property panel recognized , you can display a decimal value. At the same time, IE browser to the height of 2 pixel below the horizontal line identified as 1pixel.

In the production of horizontal lines we have shade and no shade, after comparison found that when the horizontal line height h is 2 pixels below, shade does not work, only to 2 pixels more than see the shade effect.

Second, table law

Tables are often used for positioning in web design, especially for large web sites, but because their servers are powerful, they don't slow down.

Here is another magical application of the table, making horizontal thin lines.

1. In Dreamweaver, insert a single row of tables, set border= "0" cellspacing= "0" cellpadding= "0". Then set the background color of the table in the Properties panel.

(1) Source:

2. Copy the above form, press Ctrl + Tab to enter the source code window, and delete the <td></td> Center system automatically.

(2) Source:

After a preview of the comparison, found that when the "" deleted, the table is shrunk, set the background color is also the color of the horizontal thin line. It should be noted that it is best to set the background color and then "" deleted, or in the design window to change the color of some trouble.

Third, the background law

The background method is relatively much more, and the software that needs to be used is Photoshop and Dreamweaver,

1. In Photoshop, press Ctrl + N to create a new 1x1 pixel size file.

2. Adjust the foreground color, set it to a line, and press ALT + DELETE to fill the file.

3. Press the shortcut key Ctrl + Alt + SHIFT + S to save the file as a Web page image file Bg.gif

4. Open Dreamweaver, create a new document, click the Insert Table button, insert a single row of the table, set as follows: border= "0" cellspacing= "0" cellpadding= "0".

5. Make the table selected, bring up the property panel and click on the "BG" button to insert the background picture "Bg.gif". Below the source code and effect are displayed, let everyone make a comparison, the effect of the principle of achieving a more in-depth understanding.

(1) Source:

6. Copy the above form, press Ctrl + Tab to enter the source code window, and delete the <td></td> Center system automatically.

(2) Source:

Some Web pages may be made at the same time set the cell or table height of 1 pixels, in fact, can not be set.