How to make css Control list and Navigation
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!
