HTML/CSS/List Style/UL
Содержание
- 1 Add alignment line for UL
- 2 Add style to multi-level UL
- 3 Advanced Lists: nested and ordered
- 4 Define class for UL for border (1px solid black) and padding (40px)
- 5 Left margin for list
- 6 List with background
- 7 This is the title
- 7.1 This is the sub title
- 7.2 Nested UL and LI tags
- 7.3 Set margin for UL and LI
- 7.4 Turn off list style
- 7.5 turns off bullets for multi-level bullets
- 7.6 UL border bottom: 1px solid black
- 7.7 UL list style: none
- 7.8 UL margin: 0
- 7.9 UL margin left and padding left
- 7.10 UL padding:m
- 7.11 UL tag
- 7.12 UL text index: -1em
- 7.13 UL width: 36%
- 7.14 Use DIV to wrap a UL
Add alignment line for UL
<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" /> <title></title> <style type="text/css" media="screen"> div { margin-bottom: 30px; } #divID #sitemap { font-size: 140%; font-weight: bold; color: #f63; } #divID #sitemap li { list-style: none; } #divID #sitemap li ul { margin: 6px 15px; padding: 0 15px; font-size: 90%; color: #000; border-left: 1px dotted #999; } #divID #sitemap li ul li ul { border: none; } #divID #sitemap li ul li ul li { font-weight: normal; padding-left: 16px; background: red; } </style>
</head> <body>
- This is a test.
-
- This is a test.
- This is a test.
- Part I
- Part II
- This is a test.
- This is a test.
</body> </html>
</source>
Add style to multi-level UL
<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" /> <title></title> <style type="text/css" media="screen"> div { margin-bottom: 30px; } #divID #sitemap { font-size: 140%; font-weight: bold; color: #f63; } #divID #sitemap li ul { font-size: 90%; color: #000; } </style>
</head> <body>
- This is a test.
-
- This is a test.
- This is a test.
- Part I
- Part II
- This is a test.
- This is a test.
</body> </html>
</source>
Advanced Lists: nested and ordered
<source lang="html4strict">
<?xml version = "1.0"?> <!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>Advanced Lists: nested and ordered</title> </head> <body>
- New games
-
New applications
- For business
- For pleasure
- Around the clock news
- Search engines
- Shopping
-
Programming
- XML
- Java
- XHTML
- Scripts
- New languages
- Links
- Keeping in touch with old friends
- It is the technology of the future!
</body>
</html>
</source>
Define class for UL for border (1px solid black) and padding (40px)
<source lang="html4strict">
<html> <head>
<title>Define class for- for border (1px solid black) and padding (40px)</title>
<style type="text/css">
#navigation {
border: 1px solid black;
padding: 40px;
}
</style>
</head>
<body>
</body> </html>
</source>
Left margin 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" 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; padding-left: 0; } </style>
</head> <body>
- Apples
- Spaghetti
- Green Beans
- Milk
</body> </html>
</source>
List with background
<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> <meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /> <meta http-equiv="content-language" content="en-us" /> <style type="text/css"> ul#top { color: black; } ul#top li a { color: red; background: pink; } </style> </head> <body>
This is the title
This is the sub title
- <a href="#">This is a test. </a>
- <a href="#">This is a test. </a>
- <a href="#">This is a test. </a>
- <a href="#">This is a test. </a>
- <a href="#">This is a test. </a>
- <a href="#">This is a test. </a>
header 3<a href=""></a>
This is a test.
</body>
</html>
</source>
Nested UL and LI tags
<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" /> <title></title> <style type="text/css" media="screen"> div { margin-bottom: 30px; } </style>
</head> <body>
- This is a test.
-
- This is a test.
- This is a test.
- Part I
- Part II
- This is a test.
- This is a test.
</body> </html>
</source>
Set margin for UL and LI
<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"> .tblcontent p {
margin: 0; padding: 0; font-weight: bold;
} .tblcontent ul {
margin: 0; padding: 0;
} .tblcontent li {
margin: 0; padding: 0; line-height: 1.5;
} .tblcontent li a {
padding-left: 15px; background: red;
} </style> </head> <body>
To-do list on your day off.
|
</body> </html>
</source>
Turn off list style
<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; } </style>
</head> <body>
- Apples
- Spaghetti
- Green Beans
- Milk
</body> </html>
</source>
turns off bullets for multi-level bullets
<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" /> <title></title> <style type="text/css" media="screen"> div { margin-bottom: 30px; } #divID #sitemap { font-size: 140%; font-weight: bold; color: #f63; } #divID #sitemap li { list-style: none; } #divID #sitemap li ul { font-size: 90%; color: #000; } </style>
</head> <body>
- This is a test.
-
- This is a test.
- This is a test.
- Part I
- Part II
- This is a test.
- This is a test.
</body> </html>
</source>
UL border bottom: 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>
UL list style: none
<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>
UL margin: 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>
UL margin left and padding left
<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;
} </style> </head> <body>
- V
- S
- T
- P
</body> </html>
</source>
UL padding:m
<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>
UL 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>Unordered list</title>
</head> <body>
- water
- yeast
- flour
- oil
- salt
</body> </html>
</source>
UL text index: -1em
<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>
UL width: 36%
<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>
Use DIV to wrap a UL
<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 {
list-style: none; margin: 0; padding: 0;
} </style> </head> <body>
</body> </html>
</source>