HTML/CSS/List Style/LI
Содержание
- 1 Add different background image for each LI
- 2 Add list background image
- 3 Add style to an anchor in a LI tag
- 4 Alignment of list items
- 5 Alignment of list items with margin
- 6 Define class for to set its font weight to bold
- 7 Inline centred list
- 8 Inline centred list
- 8.1 li after
- 8.2 LI background: url(search.gif) no-repeat;
- 8.3 LI: before: "\00BB \0020"
- 8.4 LI border top: 1px solid black
- 8.5 li.className:after
- 8.6 LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
- 8.7 LI margin:25em 0
- 8.8 LI padding: .3em 0
- 8.9 LI width: 33%
- 8.10 Nested LI tag
- 8.11 Pizzas
- 8.12 Right-aligned bullets
- 8.13 Set display to inline to a LI under a UL in DIV
- 8.14 Shading border for list
- 8.15 Tab like list
- 8.16 Three level list
- 8.17 Using padding to control the list item indent
Add different background image for each LI
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> #divID #recipe { list-style: none; } #divID #recipe li { padding: 10px 50px; margin-bottom: 6px; border-bottom: 1px solid #ccc; } #divID #one { background: url(img/ol_1.gif) no-repeat 6px 50%; } #divID #two { background: url(img/ol_2.gif) no-repeat 2px 50%; } #divID #three { background: url(img/ol_3.gif) no-repeat 3px 50%; } #divID #four { background: url(img/ol_4.gif) no-repeat 0px 50%; } #divID #five { background: url(img/ol_5.gif) no-repeat 6px 50%; } </style>
</head> <body>
- this is a test.
- this is a test.
- this is a test.
- this is a test.
- this is a test.
</body> </html>
</source>
Add list background image
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Lists</title> <style type="text/css" media="screen"> #fig1_1 ul { list-style: none; } #fig1_1 li { background: url(bull.gif) no-repeat 0 50%; padding-left: 17px; } </style>
</head> <body>
- Apples
- Spaghetti
- Green Beans
- Milk
</body> </html>
</source>
Add style to an anchor in a LI tag
<source lang="html4strict">
<html> <head>
<title>Add style to an anchor in a</body> </html>
</source>
Alignment of list items
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Alignment of list items</title> <style type="text/css"> p { margin: 0.75em 0 0 1.5em; padding: 0; width: 33em; border: 1px dotted black; } ul { list-style-type: square; list-style-position: outside; margin: 0.75em 0 0 0; padding: 0 0 0 1.5em; width: 34.5em; border: 1px dashed black; } ul.indent { margin: 0.75em 0 0 1.5em; width: 33em; } li { margin: 0.75em 0 0 0; border: 1px dotted black; } </style>
</head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
- L.
- L.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
- L.
- L.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Alignment of list items with margin
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Alignment of list items</title> <style type="text/css"> p { margin: 0.75em 0 0 1.5em; padding: 0; width: 33em; border: 1px dotted black; } ul { list-style-type: square; list-style-position: outside; margin: 0.75em 0 0 0; padding: 0 0 0 1.5em; width: 34.5em; border: 1px dashed black; } ul.indent { margin: 0.75em 0 0 1.5em; width: 33em; } li { margin: 0.75em 0 0 0; border: 1px dotted black; } </style>
</head> <body>
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
- L.
- L.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
- Li.
- Li.
this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test. this is a test.
</body> </html>
</source>
Define class for to set its font weight to bold
<source lang="html4strict">
<html> <head> <title>Define class for LI to set its font weight to bold</title> <style type="text/css">
.warning { font-weight: bold; }
</style> </head> <body>
</body> </html>
</source>
Inline centred list
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> ul,li{
margin:0; padding:0; list-style:none; text-align:center; white-space:nowrap;
} li{
display:inline; position:relative; white-space:nowrap;
} li a.last{border-right:1px solid #CFD3E2;} a {
border-left:1px solid #CFD3E2; font-family: Arial; font-size: 11px; text-decoration: none; font-weight: bold; color: #4D9DDC; padding:4px 10px; line-height:21px;
}
- html a {
padding:2px 10px; display:inline-block; line-height:17px
}
- html a {
height:1%;
} a:hover{
color: #FFAD2B; border-bottom:2px solid red; padding-bottom:2px;
}
- html a:hover {
padding-bottom:0px;
}
- wrapper {
background-color: #F3F4F5; border: solid 1px #BFCCD7;
} </style> </head> <body>
Inline centred list
- <a href="#">Log in</a>
- <a href="#">Register</a>
- <a class="last" href="#">Help</a>
</body> </html>
</source>
li after
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li:after {
content: ", ";
} </style> </head> <body>
- Database
- Privacy
- Best
- Whatever
- Make One
</body> </html>
</source>
LI background: url(search.gif) no-repeat;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {
margin-left: 40px; padding-left: 0px; list-style: none;
} li {
padding: .3em 0 1em 40px; background: url(search.gif) no-repeat;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
LI: before: "\00BB \0020"
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {
list-style: none; margin: 0; padding: 0 0 0 1em; text-indent: -1em;
} li {
width: 33%; padding: 0; margin: 0 0 0.25em 0;
} li:before {
content: "\00BB \0020";
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
LI border top: 1px solid black
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li {
border-top: 1px solid black; padding: .3em 0;
} ul {
margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
li.className:after
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li.last:after {
content: ".";
} </style> </head> <body>
- Database
- Privacy
- Best
- Whatever
- Make One
</body> </html>
</source>
LI font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif;
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {
margin-left: 40px; padding-left: 0px; list-style: none;
} li {
padding: .3em 0 1em 40px; font: 1.1em/1.2 Verdana, Arial, Verdana, sans-serif; background: url(search.gif) no-repeat;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
LI margin:25em 0
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {
list-style: none; margin: 0; padding: 0 0 0 1em; text-indent: -1em;
} li {
width: 33%; padding: 0; margin: 0 0 0.25em 0;
} li:before {
content: "\00BB \0020";
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
LI padding: .3em 0
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> li {
border-top: 1px solid black; padding: .3em 0;
} ul {
margin-left: 40px; padding-left: 0px; border-bottom: 1px solid black; list-style: none; width: 36%;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
LI width: 33%
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> ul {
list-style: none; margin: 0; padding: 0 0 0 1em; text-indent: -1em;
} li {
width: 33%; padding: 0; margin: 0 0 0.25em 0;
} li:before {
content: "\00BB \0020";
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
Nested LI tag
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Nested lists</title>
</head> <body>
Pizzas
-
B
- S.
- C.
- B:
- M
- M
- S
- T.
- R.
</body> </html>
</source>
Right-aligned bullets
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Right-aligned bullets</title> <style type="text/css"> ul, li {
padding:0; margin:0;
} ul li {
list-style:none; background: url(bullet-reversed.gif) no-repeat right center; padding-right:20px; text-align:right;
} </style> </head> <body>
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
- This is a list item
</body> </html>
</source>
Set display to inline to a LI under a UL in DIV
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css">
- navsite ul li {
list-style: none; margin: 0; display: inline;
} </style> </head> <body>
</body> </html>
</source>
Shading border for list
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title>
<style type="text/css" media="Screen"> div {
padding: 10px; margin-bottom: 15px; border: 2px solid black;
} LI {
margin-top: 0px; margin-bottom: 10px; padding-right: 5px; background-color: gold; padding-top: 5px; padding-bottom: 5px; border-left: 1px solid gray; border-right: 2px solid black; border-top: 1px solid gray; border-bottom: 2px solid black;
} </style> </head> <body>
- Normal List
- Normal List
</body> </html>
</source>
Tab like list
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head> <title></title> <style type="text/css"> ul { list-style: none; border-bottom: thin solid black; height: 21px; } li { text-align: center; float: left; margin: 0 10px; border: thin solid black; width: 100px; } </style> </head> <body>
- <a href="http://www.google.ru">Google</a>
- <a href="http://www.yahoo.ru">Yahoo</a>
- <a href="http://www.ebay.ru">Ebay</a>
- <a href="http://www.wrox.ru">Wrox</a>
</body>
</html>
</source>
Three level list
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Creating better-looking lists</title>
<style type="text/css" media="screen"> ul {
list-style-type: none; background: red;
} ul ul {
background: yellow; border-left: 1px dotted #aaaaaa; padding: 10px; }
ul ul ul {
background: none; border-left: 0; }
li {
text-transform: uppercase; padding-left: 20px; font-weight: bold; color: #666666;
}
li li {
text-transform: none; background: url(list-square.gif) 0 2px no-repeat; font-weight: normal; color: #333333;
} li li li {
background: url(square.gif) 0 2px no-repeat;
} </style> </head> <body>
- List - 1.1
- List - 2.1
- List - 2.2
- List - 3.1
- List - 3.2
- List - 3.3
- List - 2.3
</body> </html>
</source>
Using padding to control the list item indent
<source lang="html4strict">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> ul { list-style-type: square; list-style-position: outside; width: 33em; padding: 0.5em; border: 1px solid black; margin: 0.75em 0 0 1.5em; } ul.one { padding-left: 0; } ul.two { padding-left: 1em; } ul.three { padding-left: 1.5em; } li { padding: 0; margin: 0; border: 1px dashed black; } </style>
</head> <body>
- Li Europan lingues es membres del sam familie.
- Li Europan lingues es membres del sam familie.
- Li Europan lingues es membres del sam familie.
</body> </html>
</source>