Complete the image page navigation design according to the provided images and hyperlink resources __ Experiment 3
1. Problem analysis:
There are four pictures on the webpage. From left to right, they are iPhone, iPad, MacBook, and supplier responsibility. These four pictures correspond to the four corresponding product pages of the Apple website. We want to design a web page, the user can click on the picture on the web page to enter the relevant Apple web page.
2. Code writing:
1. Find pictures
Choose 4 pictures from the Internet. Pay attention to the save location, it will be used when writing the code.
2. Conceive the web page layout according to the pictures.
3. Preliminary preparation.
In order to find the location of the pictures conveniently, I put the pictures and code files in one place.
4. Write code
4. Notes
(1) Both herf and src point to the path where the file is located. This location can be an absolute path or a relative path. Here herf is the absolute path, the external link to Apple's official website; the src here is the relative path (relative to the location where the code is written), because my image file is downloaded and placed in the same level as the code file Location, so directly enter the picture name, you can link to this picture.
Relative path: If you want to go to the next level of the code file, for example: link news.htm under the yule file of this level, then scr="yule/news.htm"; if you want to go to the upper level of the code file, for example: Return to the upper level oa.htm, then scr=".../oa.htm" be
careful not to drop the extension.
(2) The attribute referred to by title is the small label that is displayed when the mouse is pointed at the image; width sets the width of the image; height sets the height of the image; border sets the width of the border; hspace sets the spacing between pictures
3. Web page effect
Effect video
Image hyperlink