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

This article introduces the knowledge of "how Div and CSS use lists to make forms". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Using list to make menu in Div+CSS layout introduction tutorial

Before you begin this section, please make sure that you have written DIV+CSS to the index.htm and css.css files with reference to the previous sections.

In this section I will show you how to use lists to make menus.

Home page a > li > li > blog a > li > li > Design a > li > li > album a > li > li > Forum a > li > li > about a > li > ul > div >

The above is the structure of this part, about these two HTML elements, please refer to the relevant content, their main function is to display some information in the form of a list in HTML.

There is another point that we must make clear. When it is defined as id= "divID" in HTML, the corresponding setting syntax in CSS is # divID {}, and if it is defined as class= "divID" in HTML, the corresponding setting syntax in CSS is .divID.

If the id= "divID" layer includes a

At this point, the contents of the list are arranged on one line, and we add the code margin:0 10px in # menu ul li {}

# menu ul {list-style:none;margin:0px;} # menu ul li {float:left;margin:0 10px}

The function of margin:0 10px is to create a distance of 20 pixels between the contents of the list (left: 10px, right: 10px). The preview effect is as follows:

Now that the prototype of ◆ is out, let's fix the menu and change the code as follows:

# menu {padding:20px 20px 0} / * use padding:20px 20px 0 to fix the menu position * / # menu ul {float:right;list-style:none;margin:0px;} / * add float:right to make the menu on the right side of the page * / # menu ul li {float:left;margin:0 10px}

At this point, the location has been determined, but in the idea diagram, there is a vertical line between the menu options. What should I do?

Don't forget, we have already reserved an empty one, and we will use it if we want to add a vertical bar.

According to the above method, let's add the following code:

.menuDiv {width:1px;height:28px;background:#999}

Save the preview, has the vertical bar come out? I won't say much about this code, it should be easy to understand.

However, the text of the menu option is at the top, and we modify it to the following code:

# menu ul li {float:left;margin:0 10px match displayRod blockterLineSuite heightRod 28px}

You can refer to the manual about display:block;line-height:28px, but I won't say much about it.

The ◆ effect has basically been implemented, and all that's left is to modify the hyperlink style of the menu and add the following code to css.css:

# menu ul li a:link,#menu ul li a:visited {font-weight:bold;color:#666} # menu ul li a:hover {}

There is no more to say about this, there is nothing to say, the effect of * * is as follows:

That's all for "how Div and CSS use lists to make forms". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.