Carbon fiber style plug-in navigation menu: HTML code

Following the previous article "carbon fiber-style plug-in navigation menu", Richard Carpenter converted the menu image into a CSS/HTML document. Let's start learning together!

To view the full CSS/HTML version, click here:

Deployment documents

Put the sheet in another folder, "stylesheets", and then create a new folder named "images" to store the image.

Create HTML elements

Open the html file in the Code Editor, create a DIV in the tag "BODY", and set the ID attribute to "iner". This DIV will be the container of all elements. The Code is as follows:

Create another DIV in the "container" DIV. The ID attribute is "nav", which is a container containing all navigation elements. The Code is as follows:

Create a simple UL unordered list in the "nav" DIV, set the UL class attribute to "navigation", and set different class attributes for each list element (LI, set the LI style based on the class attribute. The Code is as follows:

The above is the main HTML code. Next we start to split the navigation image.

• Four pages in total:
• Previous Page
• 1
• 2
• 3
• 4
• Next Page