Difference between revisions of "09 - More Advanced CSS Examples"
From mi-linux
Jump to navigationJump to search| Line 29: | Line 29: | ||
<LI class="blueback">item 07</LI> | <LI class="blueback">item 07</LI> | ||
</UL> | </UL> | ||
| + | </BODY> | ||
| + | |||
| + | </HTML></nowiki> | ||
| + | |||
| + | ==Example 2: Simple CSS layout== | ||
| + | <nowiki> | ||
| + | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> | ||
| + | <HTML> | ||
| + | <HEAD> | ||
| + | <STYLE type="text/css"> | ||
| + | |||
| + | div {border:1px solid} | ||
| + | #top {float:top; padding:1%} | ||
| + | #left {float:left; text-align:left; padding:1%} | ||
| + | #right {float:right; text-align:right; padding:1%} | ||
| + | #middle {text-align:center; padding:1%} | ||
| + | #bottom {float:bottom; padding:1%} | ||
| + | |||
| + | </STYLE> | ||
| + | </HEAD> | ||
| + | |||
| + | <BODY> | ||
| + | <DIV id="top">this is top</DIV> | ||
| + | <DIV> | ||
| + | <DIV id="left">this is left</DIV> | ||
| + | <DIV id="right">this is right</DIV> | ||
| + | <DIV id="middle">this is middle</DIV> | ||
| + | </DIV> | ||
| + | <DIV id="bottom">this is bottom</DIV> | ||
| + | |||
</BODY> | </BODY> | ||
</HTML></nowiki> | </HTML></nowiki> | ||
Revision as of 10:48, 20 October 2006
Example 1 - Lists, Boxes, Colours and Stuff
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
ul {list-style:none;}
li {padding: 1em; display:inline;margin-left: 1em; margin-top: 1em;}
.redback {background-color: red; color:green;}
.yellowback {background-color: yellow; color:blue;}
.pinkback {background-color: pink; color:white;}
.greenback {background-color: green; color:red;}
.purpleback {background-color: purple; color:yellow;}
.orangeback {background-color: orange; color:blue;}
.blueback {background-color: blue; color:yellow;}
</STYLE>
</HEAD>
<BODY>
<UL>
<LI class="redback">item 01</LI>
<LI class="yellowback">item 02</LI>
<LI class="pinkback">item 03</LI>
<LI class="greenback">item 04</LI>
<LI class="purpleback">item 05</LI>
<LI class="orangeback">item 06</LI>
<LI class="blueback">item 07</LI>
</UL>
</BODY>
</HTML>
Example 2: Simple CSS layout
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<STYLE type="text/css">
div {border:1px solid}
#top {float:top; padding:1%}
#left {float:left; text-align:left; padding:1%}
#right {float:right; text-align:right; padding:1%}
#middle {text-align:center; padding:1%}
#bottom {float:bottom; padding:1%}
</STYLE>
</HEAD>
<BODY>
<DIV id="top">this is top</DIV>
<DIV>
<DIV id="left">this is left</DIV>
<DIV id="right">this is right</DIV>
<DIV id="middle">this is middle</DIV>
</DIV>
<DIV id="bottom">this is bottom</DIV>
</BODY>
</HTML>
