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

This article introduces the relevant knowledge of "how to achieve the production of css control list and navigation". Many people will encounter this dilemma in the operation of actual cases, 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!

The code is as follows:

/ * body has margins by default * /

Body {margin:0;}

/ * ul has a margin by default, so remove the margin first. IE78 only needs to add margin, but not IE6, so add padding to achieve compatibility among all browsers * /

Ul {list-style:none; margin:0; padding:0;}

Wizards

Village

Celestial stem

Talented worker

Snow field

1. Set the style of list symbols: list-style-type

None unsigned

The dot of a disc solid. (default)

Circle hollow dots.

Square solid cube.

Decimal 1,2,3...

Lower-roman i,ii,iii...

Upper-roman I,II,III...

Lower-alpha a,b,c,d,e...

Upper-alpha A,B,C,D,E...

The code is as follows:

Ul {list-style:none;}

# df {list-style:lower-roman;}

Stand on the shore of the years and drift away to your past.

2011 I marry you, 2012 I protect you, 2013 love you all my life, 2014 love you forever!

Life is like a journey, it is not the destination that matters. But the "SB" along the way, and the mood when dealing with "SB"!

All smelly men like coquettish women.

Fasten your seat belt, there may be a love waiting for you.

If you sleep on the printer, you can print a dream all night, right?

two。 Styling list symbols with pictures (this method is rarely used): list-style-image

The code is as follows:

Body {margin:50px;}

Ul {list-style:none; margin:0; padding:0; list-style-image:url (fasfas.gif); line-height:150%;}

Wizards

Village

Celestial stem

Talented worker

Snow field

3. Set list items to move left and right: list-style-position

The inside list item is moved to the right.

The outside manifest items are displayed normally (default properties).

4. Use the background picture as the project list icon: this method is better (commonly used) and can be transferred at will.

The code is as follows:

Body {

Margin:50px

}

Ul {

List-style:none

Margin:0

Padding:0

}

Ul li {

Background:url (fasfas.gif) no-repeat left 50% Splink * only shows one * /

Padding-left:20px

}

Wizards

Village

Celestial stem

Talented worker

Snow field

5. Inline list:

Ul and li are blocks by default. Check to see whether blocks can be color tested. After converting the list to inline, the project icon will disappear. You can use floating or use the following columns to achieve this.

The display attribute here is the setting of the block-level value that defines whether to become a block. Inline is inline and block is a block.

The code is as follows:

Body {margin:50px;}

Ul {list-style:none; margin:0; padding:0;}

Li {display:inline;}

Wizards

Village

Celestial stem

Talented worker

Snow field

6. Background picture and inline list: using this method to turn li into inline, the background picture is still there.

The code is as follows:

Body {margin:50px;}

Ul {list-style:none; margin:0; padding:0;}

Li {display:inline; background:url (fasfas.gif) no-repeat left center; padding-left:20px;}

Wizards

Village

Celestial stem

Talented worker

Snow field

7. Vertical navigation bar:

The code is as follows:

Body {margin:50px;}

Ul {list-style:none; margin:5px; padding:2px; width:250px; font-size: 19px;}

Li {background: # ddd url (fasfas.gif) no-repeat 10px center; margin: 0; padding: 2px 35px; border-left: 1px solid # fff

Border-top: 1px solid # fff; border-right: 1px solid # 666; border-bottom: 1px solid # aaa;}

Drubjs Menu

Beer

Spirits

Cola

Lemonade

Tea

Coffee

8. Create a list of vertical flips:

The code is as follows:

Body {

Margin:50px

}

Ul {

List-style:none

Margin:0

Font-size:16px

}

Ul li a {

Display:block

Width:200px

Height:40px

Line-height:40px

Color:#000

Text-decoration:none

Background:#94b8e9 url (2014-03-08_220129.gif) no-repeat left center

Text-indent:50px

}

A:hover {

Background-position: right bottom

}

Drubjs Menu

Beer

Spirits

Cola

Lemonade

Tea

Coffee

9. Create a horizontal navigation bar:

The code is as follows:

Body {

Margin:50px

}

Ul {

List-style:none

Margin:0px

Padding:0px

Width:798px

Line-height:50px

Background:#faa819 url (2014-03-08_223706.png) repeat-x

Font-size:16px

Float:left;/* should be compatible with browsers and float here * /

}

/ * Don't use inline here, because you can't adjust the height * /

Ul li {

Float: left

Width:114px

Background: url (2014-03-08_223754.png) no-repeat right center

Text-align:center

}

Ul a {

Color:#fff

Padding: 0 4px

/ * background: url (2014-03-08_223754.png) no-repeat right center;*/

Text-decoration: none

} / * /

Menu

Beer

Spirits

Cola

Lemonade

Tea

Coffee

This is the end of the content of "how to make css control list and navigation". 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.