http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FList_Style%2FUL
HTML/CSS/List Style/UL - История изменений
2026-04-05T04:22:17Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/List_Style/UL&diff=5624&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/List_Style/UL&diff=5625&oldid=prev
Admin: 1 версия
2010-05-26T08:17:07Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==Add alignment line for UL==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="screen"><br />
div {<br />
margin-bottom: 30px;<br />
} <br />
#divID #sitemap {<br />
font-size: 140%;<br />
font-weight: bold;<br />
color: #f63;<br />
}<br />
<br />
#divID #sitemap li {<br />
list-style: none;<br />
}<br />
<br />
#divID #sitemap li ul {<br />
margin: 6px 15px;<br />
padding: 0 15px;<br />
font-size: 90%;<br />
color: #000;<br />
border-left: 1px dotted #999;<br />
}<br />
#divID #sitemap li ul li ul {<br />
border: none;<br />
}<br />
<br />
#divID #sitemap li ul li ul li {<br />
font-weight: normal;<br />
padding-left: 16px;<br />
background: red;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="divID"><br />
<ul id="sitemap"><br />
<li>This is a test. </li><br />
<li><br />
<ul><br />
<li>This is a test. </li><br />
<li>This is a test. <br />
<ul><br />
<li>Part I</li><br />
<li>Part II</li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul> <br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Add style to multi-level UL==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="screen"><br />
div {<br />
margin-bottom: 30px;<br />
} <br />
#divID #sitemap {<br />
font-size: 140%;<br />
font-weight: bold;<br />
color: #f63;<br />
}<br />
<br />
#divID #sitemap li ul {<br />
font-size: 90%;<br />
color: #000;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="divID"><br />
<ul id="sitemap"><br />
<li>This is a test. </li><br />
<li><br />
<ul><br />
<li>This is a test. </li><br />
<li>This is a test. <br />
<ul><br />
<li>Part I</li><br />
<li>Part II</li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul> <br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Advanced Lists: nested and ordered==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<?xml version = "1.0"?><br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns = "http://www.w3.org/1999/xhtml"><br />
<head><br />
<title>Advanced Lists: nested and ordered</title><br />
</head><br />
<body><br />
<ul><br />
<ul><br />
<li>New games</li><br />
<li><br />
New applications<br />
<ol type = "I"><br />
<li>For business</li><br />
<li>For pleasure</li><br />
</ol><br />
</li> <br />
<li>Around the clock news</li><br />
<li>Search engines</li><br />
<li>Shopping</li><br />
<li><br />
Programming<br />
<ol type = "a"><br />
<li>XML</li><br />
<li>Java</li><br />
<li>XHTML</li><br />
<li>Scripts</li><br />
<li>New languages</li><br />
</ol><br />
</li><br />
</ul> <br />
</li> <br />
<li>Links</li><br />
<li>Keeping in touch with old friends</li><br />
<li>It is the technology of the future!</li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Define class for UL for border (1px solid black) and padding (40px)==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<html><br />
<head><br />
<title>Define class for <UL> for border (1px solid black) and padding (40px)</title><br />
<style type="text/css"><br />
#navigation {<br />
border: 1px solid black;<br />
padding: 40px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul id="navigation"><br />
<li class="warning"><a href="http://www.wbex.ru">A</a></li><br />
<li><a href="http://www.wbex.ru">B</a></li><br />
<li><a href="http://www.wbex.ru">C</a></li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Left margin for list==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Lists</title><br />
<style type="text/css" media="screen"><br />
#fig1_1 ul {<br />
list-style: none;<br />
padding-left: 0;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="fig1_1"><br />
<ul><br />
<li>Apples</li><br />
<li>Spaghetti</li><br />
<li>Green Beans</li><br />
<li>Milk</li><br />
</ul><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==List with background==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" /><br />
<meta http-equiv="content-language" content="en-us" /><br />
<style type="text/css"><br />
ul#top {<br />
color: black;<br />
}<br />
ul#top li a {<br />
color: red; <br />
background: pink;<br />
}<br />
</style><br />
</head><br />
<body><br />
<h1>This is the title</h1><br />
<div><br />
<h2>This is the sub title</h2><br />
<ul id="top"><br />
<li><a href="#">This is a test. </a></li><br />
<li><a href="#">This is a test. </a></li><br />
<li><a href="#">This is a test. </a></li><br />
<li><a href="#">This is a test. </a></li><br />
<li><a href="#">This is a test. </a></li><br />
<li><a href="#">This is a test. </a></li><br />
</ul><br />
<h3 id="">header 3<a href=""></a></h3><br />
<p><br />
This is a test. <br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Nested UL and LI tags==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="screen"><br />
div {<br />
margin-bottom: 30px;<br />
} <br />
<br />
</style><br />
</head><br />
<body><br />
<div id="fig9_1"><br />
<ul id="sitemap"><br />
<li>This is a test. </li><br />
<li><br />
<ul><br />
<li>This is a test. </li><br />
<li>This is a test. <br />
<ul><br />
<li>Part I</li><br />
<li>Part II</li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul> <br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set margin for UL and LI==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
.tblcontent p {<br />
margin: 0;<br />
padding: 0;<br />
font-weight: bold;<br />
}<br />
.tblcontent ul {<br />
margin: 0;<br />
padding: 0;<br />
}<br />
.tblcontent li {<br />
margin: 0;<br />
padding: 0;<br />
line-height: 1.5;<br />
}<br />
.tblcontent li a {<br />
padding-left: 15px;<br />
background: red;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<tr><br />
<td><br />
<div class="tblcontent"><br />
<p>To-do list on your day off.</p><br />
<ul><br />
<li><a href="">W</a></li><br />
<li><a href="">W</a></li><br />
<li><a href="">W</a></li><br />
<li>no link.</li><br />
</ul> <br />
</div><br />
</td><br />
</tr><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Turn off list style==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title>Lists</title><br />
<style type="text/css" media="screen"><br />
<br />
#fig1_1 ul {<br />
list-style: none;<br />
<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="fig1_1"><br />
<ul><br />
<li>Apples</li><br />
<li>Spaghetti</li><br />
<li>Green Beans</li><br />
<li>Milk</li><br />
</ul><br />
</div><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==turns off bullets for multi-level bullets==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="screen"><br />
div {<br />
margin-bottom: 30px;<br />
} <br />
#divID #sitemap {<br />
font-size: 140%;<br />
font-weight: bold;<br />
color: #f63;<br />
}<br />
<br />
#divID #sitemap li {<br />
list-style: none; <br />
}<br />
<br />
#divID #sitemap li ul {<br />
font-size: 90%;<br />
color: #000;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="divID"><br />
<ul id="sitemap"><br />
<li>This is a test. </li><br />
<li><br />
<ul><br />
<li>This is a test. </li><br />
<li>This is a test. <br />
<ul><br />
<li>Part I</li><br />
<li>Part II</li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul><br />
</li><br />
<li>This is a test. </li><br />
</ul> <br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL border bottom: 1px solid black==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li {<br />
border-top: 1px solid black;<br />
padding: .3em 0;<br />
}<br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
border-bottom: 1px solid black; <br />
list-style: none;<br />
width: 36%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL list style: none==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li {<br />
border-top: 1px solid black;<br />
padding: .3em 0;<br />
}<br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
border-bottom: 1px solid black; <br />
list-style: none;<br />
width: 36%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL margin: 0==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0 0 0 1em;<br />
text-indent: -1em; <br />
}<br />
li {<br />
width: 33%;<br />
padding: 0;<br />
margin: 0 0 0.25em 0;<br />
}<br />
li:before {<br />
content: "\00BB \0020"; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL margin left and padding left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL padding:m==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0 0 0 1em;<br />
text-indent: -1em; <br />
}<br />
li {<br />
width: 33%;<br />
padding: 0;<br />
margin: 0 0 0.25em 0;<br />
}<br />
li:before {<br />
content: "\00BB \0020"; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL tag==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br />
<title>Unordered list</title><br />
</head><br />
<body><br />
<ul><br />
<li>water</li><br />
<li>yeast</li><br />
<li>flour</li><br />
<li>oil</li><br />
<li>salt</li><br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL text index: -1em==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
ul {<br />
list-style: none;<br />
margin: 0;<br />
padding: 0 0 0 1em;<br />
text-indent: -1em; <br />
}<br />
li {<br />
width: 33%;<br />
padding: 0;<br />
margin: 0 0 0.25em 0;<br />
}<br />
li:before {<br />
content: "\00BB \0020"; <br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
<br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==UL width: 36%==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
li {<br />
border-top: 1px solid black;<br />
padding: .3em 0;<br />
}<br />
ul {<br />
margin-left: 40px;<br />
padding-left: 0px;<br />
border-bottom: 1px solid black; <br />
list-style: none;<br />
width: 36%;<br />
}<br />
</style><br />
</head><br />
<body><br />
<ul><br />
<li>V</li> <br />
<li>S</li><br />
<li>T</li> <br />
<li>P</li> <br />
</ul><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Use DIV to wrap a UL==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<style type="text/css"><br />
#navsite ul {<br />
list-style: none; <br />
margin: 0; <br />
padding: 0; <br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="navsite"><br />
<p>Site navigation:</p><br />
<ul><br />
<li><a href="">Home</a></li><br />
<li><a href="">About</a></li> <br />
<li><a href="">Archives</a></li><br />
<li><a href="">Writing</a></li><br />
<li><a href="">Speaking</a></li><br />
<li><a href="">Contact</a></li><br />
</ul><br />
</div><br />
</body><br />
</html><br />
</source></div>
Admin