This section describes how to create a menu used in a Web page, including a project list, a menu that does not need a table, the horizontal and vertical configuration of menus, and popular tab menus.
First, let's look at the project list: the symbol of the List; let's look at the Code:
<HTML>The body is very simple. UL's unsigned project list and a group of Li tags are marked separately in CSS code. The most important part is list-style-type: Circle. This statement indicates that the project list symbol is expressed with a hollow circle. Let's take a look at the browsing effect:
Of course, we can also set different display methods. You can try it yourself. Although ul displays the unsigned list, you can set the list symbol in CSS. Our CSS can not only create the list symbol, but we will try the image symbol next. Let's first look at the effect:
We can see that this is different from the list symbol we mentioned above. Here we use images as symbols. Let's take a look at this Code:
<HTML>The list-style-image in the Code is followed by an image link. Generally, HTML designers usually use tables to store hyperlinks in the cells of the table. After the UL and Li project symbols are introduced, generally, the UL and Li labels are used to create menus. Let's take a look at how they are implemented:
<HTML>The body is very simple. The div id is marked with navigation, and there are several simple project lists in the middle. Each subitem uses the mark to represent a hyperlink. In the code, the most critical lines are, list-style-type: none, the project symbol is not displayed; the Li mark is used to add an underline. We set border-left: 12px and border-Right: 1px in A. Let's take a look at the display effect:
We sometimes need horizontal menus to display the webpage, while CSS can easily convert the menus. Let's take a look at the effect:
Let's take a look at the CSS code:
<HTML>First, this body part is exactly the same as that in the previous example. The difference is only the setting of CSS, so that you can easily implement the horizontal and vertical conversion of menus, which is conducive to our later maintenance, if we need to convert the menu from vertical to horizontal or horizontal to vertical, it will be very convenient. Here we will set the Li attribute float: left, and the attribute will also set the border.
In the design of web pages, UL and Li are often used to set menus, which facilitates our later maintenance.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
