HTML/CSS/CSS Controls/List menu — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
|
Текущая версия на 11:16, 26 мая 2010
Содержание
<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">
- navigation ul {
list-style-type: none; padding: 0; margin: 0; width: 140px;
}
- navigation a {
text-decoration: none; display: block; padding: 3px 12px 3px 8px; background-color: #666; color: #fff; border: 1px solid #ddd;
}
- navigation a:active {
padding: 2px 13px 4px 7px; background-color: #444; color: #eee; border: 1px solid #333;
}
- navigation li li a {
text-decoration: none; padding: 3px 3px 3px 17px; background-color: #999; color: #111111;
}
- navigation li li a:active {
padding: 2px 4px 4px 16px; background-color: #888; color: #000;
} </style> <script type="text/javascript"> function swap(targetId){
if (document.getElementById){ target = document.getElementById(targetId); if (target.style.display == "none"){ target.style.display = ""; } else{ target.style.display = "none"; } }
} </script> </head> <body>
</body> </html>
</source>
<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=ISO-8859-1" /> <title></title> <style type="text/css"> li {
border: 1px solid; float: left; list-style-type: none; padding: 0.2em 1em;
} </style> </head> <body>
- <a href="">Home</a>
- <a href="">Contact</a>
- <a href="">About</a>
- <a href="">Archive</a>
</body> </html>
</source>
<source lang="html4strict">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head>
<title>CSS Positioning Example</title> <style rel="stylesheet" type="text/css">
- page {
position: absolute; top: 10px; left: 10px; width: 800px; background-color: #fff;
}
- masthead {
border-bottom: 1px solid black;
}
- sideNav {
float: left; width: 150px; background-color: #ccc; border-bottom: 1px solid black;
}
- sideRight {
float: right; width: 150px; padding: 0px; background-color: #aaa; border-bottom: 1px solid black;
}
- content {
margin: 0px 150px 0px 150px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;
} .item {
padding: 10px; min-height: 75px; height: 75px;
}
- sideNav a:link,#sideNav a:visited {
display: block; padding: 5px;
}
- sideNav a:hover {
background-color: #eee;
} </style> </head> <body>
Masthead
Lorem ipsum dolor sit amet.
Item One
This is a test.
Item Two
This is a test.
</body> </html>
</source>
<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">
- navigation ul {
list-style-type: none; padding: 0; margin: 0; width: 140px; font-size: 100%;
}
- navigation a {
text-decoration: none; display: block; padding: 3px 12px 3px 8px; background-color: #666; color: #fff; border-top: 1px solid #ddd; border-right: 1px solid #333; border-bottom: 1px solid #333; border-left: 1px solid #ddd;
}
- navigation a:active {
padding: 2px 13px 4px 7px; background-color: #444; color: #eee; border-top: 1px solid #333; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #333;
}
- navigation li li a {
text-decoration: none; padding: 3px 3px 3px 17px; background-color: #999; color: #111111;
}
- navigation li li a:active {
padding: 2px 4px 4px 16px; background-color: #888; color: #000; border-top: 1px solid #333; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; border-left: 1px solid #333;
} </style> </head> <body>
</body> </html>
</source>
<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">
- navigation ul {
list-style-type: none; padding: 0; margin: 0;
}
- navigation li {
display: inline; font: 12px Arial, sans-serif; padding: 0 10px 0 15px;
}
- navigation a {
color: #000000;
} </style> </head> <body>
</body> </html>
</source>
Put anchor into li
<source lang="html4strict">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title></title> <style type="text/css"> body { margin: 15%; } a:link { color: #777; text-decoration: none; } a:visited { color: #333; text-decoration: none; } a:hover, a:hover { color: #777; background-color: #ccc; } a:active, a:active { color: #ccc; background-color: #ccc; } </style> </head> <body>
<a name="europan">Anchor</a>
<a href="http://www.wbex.ru">Link</a> and <a href="http://www.wbex.ru">Another link</a>
</body> </html> </source>
Unordered list containing hyperlinks
<source lang="html4strict">
<?xml version = "1.0"?> <!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>Unordered list containing hyperlinks</title> </head> <body>
- <a href = "">D</a>
- <a href = "">W</a>
- <a href = "">Y</a>
- <a href = "">C</a>
</body>
</html>
</source>