Shulou(Shulou.com)06/02 Report--

Dreamweaver how to use div to show picture effects, I believe that many inexperienced people do not know what to do, so this article summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

1. Start dreamweaver cs5, execute the File-New command, select the html file in the pop-up New document dialog box, and click the create button.

2. Change the name to div layout picture effect in the tag untitled document.

3. Enter the relevant code under the tag to define the overall style of the web page, which directly affects the beauty of the web page.

4, then enter three div tags in, and set the class they belong to respectively. The outermost div setting class is db, and the middle two are zpxc1 and zpxc, respectively. You will see the basic frame effect below.

5. After the external frame is designed, the design uses div layout picture, writes the corresponding code, sets the size and related properties of div, and designs the relevant properties of the picture at the same time.

The code is:

Div.pt img {margin:0px; height:220px; width:120px; margin-top:10px; border: 1px solid # 333;}

Div.pt {float:left; height:240px; width:140px; margin:6px; padding:0px; margin-top:10px; filter:light; background:#333; margin-left:0.8em;}

.pic {float:right;}

6. Create four new div in the div whose class is zpxc1, and set the src attribute value of img to link the picture correctly.

7. Press f12 to preview the effect in the browser, and the reminder message "whether to save the changes to" appears. Click "Yes" directly and find a suitable location to save.

8, then enter the word "work display" in the div with the class of zpxc, and see the effect again. If it is not suitable, you can modify it again.

9. If there are too many pictures, you can modify the height of the class zpxc1 and db, modify them repeatedly until they are appropriate, and repeat steps 6 and 7 to create multiple image div using the same method.

10. If you are not satisfied with the word "work display", you can replace it with a picture. Until you are satisfied, press f12 again to view the effect in the browser.

11, execute the file-Save as a command, enter the name "div layout picture" in the pop-up dialog box, and find a suitable location to save.

After reading the above, have you mastered how to use div to show the effect of pictures in dreamweaver? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.