Dreamweaver Tutorial: Create a box with CSS

A fine-box table is one of the effects that we often use in creating web pages. There are many ways to create a fine-box table, and the most compatible code is the cell background filling method, however, the conventional writing method produces a lot of junk code. Today we use CSS to convert our ideas to achieve this effect. The whole process is completely completed on the Dreamweaver visual interface, which is very simple without manual code.

Create a CSS style

Run Dreamweaver and click "window"> "CSS style" to call the CSS panel. Click "create CSS rule" on the panel, 1.

Figure 1

In the "Create CSS rule" dialog box, set "selector type" to "advanced", and enter "selector" Name :. bk (the name is determined by everyone, but it will be called repeatedly in the future and cannot be mistaken); Set "definition in" to "only for this document", and click "OK, 2.

Figure 2

Next, the "CSS rule definition" dialog box is officially displayed. Click "background" in the category and set "background color" as required. In this example, the value is "#000000 ", that is, black (using the color selector provided by the software, the specific color code does not need to be manually entered ). This is the border color of the final table. Click "OK" to complete the settings.

Figure 3

Now the CSS named ". bk" is created. Next we will add a sub-selector for it. Click the "Create CSS rule" button in the CSS panel and set basic 2. However, the selector name is defined as ". bk td" (indicating that this is a substyle attached to. bk ). Go to the "CSS rule definition" dialog box and set the background color. In this example, the value is "# FFFFFF", which is white. Click "OK.

• 2 pages in total:
• Previous Page
• 1
• 2
• Next Page