The method is to display the li element as inline,so that the list will be horizontal.Set the background color of a:hover differntely to make the change.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>This is a damn test</title> <style type="text/css"> li { display: inline; } a { float:left; width:8em; background-color:navy; text-align:center; margin:0 2px 0 2px; color:white; } a:hover { background-color:green; } </style> </head> <body> <ul> <li><a href="http://danmarner.blogspot.com">one</a></li> <li><a href="http://www.xfocus.net">two</a></li> <li><a href="http://www.justlinux.com">three</a></li> </ul> </body> </html>
Tuesday, December 11, 2007
The way to implement buttons with CSS and list in HTML
Saturday, November 24, 2007
Summary on Basic HTML
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3 <html> 4 <head> 5 <title>One of my web pages</title> 6 </head> 7 <body> 8 <p id="top">Let's see what is <em>emphasis</em> and what is <strong>strong</strong></p> 9 And I'd like to see the result of <br /> 10 this. 11 <p>let's see these Hs in lists</p> 12 <ol> 13 <li>one</li> 14 <li> 15 No2 is an unordered list 16 <ul> 17 <li><h1>h1</h1></li> 18 <li><h2>h2</h2></li> 19 <li><h3>h3</h3></li> 20 <li><h4>h4</h4></li> 21 <li><h5>h5</h5></li> 22 <li><h6>h6</h6></li> 23 </ul> 24 </li> 25 <li>three</li> 26 </ol> 27 <p>Now this is <a href="http://DaNmarner.blogspot.com">hypertext which links to my blog</a></p> 28 <p>followed by <a href="#top"> a link to <em>the top of the page</em></a></p> 29 <img src="http://www.htmldog.com/r/logo.gif" alt="Logo of HTML dog,from where I learn HTML" /> 30 <p>Above is the logo of HTML Dog</p> 31 <p>In a table,"tr" stands for <strong>table row</strong>,"td" stands for <strong>table data cell</strong></p> 32 <table> 33 <tr> 34 <td>Row 1, cell 1</td> 35 <td>Row 1, cell 2</td> 36 <td>Row 1, cell 3</td> 37 </tr> 38 <tr> 39 <td>Row 2, cell 1</td> 40 <td>Row 2, cell 2</td> 41 <td>Row 2, cell 3</td> 42 </tr> 43 <tr> 44 <td>Row 3, cell 1</td> 45 <td>Row 3, cell 2</td> 46 <td>Row 3, cell 3</td> 47 </tr> 48 <tr> 49 <td>Row 4, cell 1</td> 50 <td>Row 4, cell 2</td> 51 <td>Row 4, cell 3</td> 52 </tr> 53 </table> 54 <h1>There are some forms below</h1> 55 <p>this is the example of the tutorial</p> 56 57 <form action="contactus.php" method="post"> 58 59 <p>Name:</p> 60 <p><input type="text" name="name" value="Your name" /></p> 61 62 <p>Comments: </p> 63 <p><textarea name="comments" rows="5" cols="20">Your comments</textarea></p> 64 65 <p>Are you:</p> 66 <p><input type="radio" name="areyou" value="male" /> Male</p> 67 <p><input type="radio" name="areyou" value="female" /> Female</p> 68 <p><input type="radio" name="areyou" value="hermaphrodite" /> An hermaphrodite</p> 69 <p><input type="radio" name="areyou" value="asexual" checked="checked" /> Asexual</p> 70 71 <p><input type="submit" /></p> 72 73 <p><input type="reset" /></p> 74 75 </form> 76 <h2>But I want to try some more</h2> 77 <form action="somescript" method="post"> 78 <p>type="text"</p> 79 <p><input type="text" value="test" /></p> 80 <p>type="password"</p> 81 <p><input type="password" /></p> 82 <p>type="checkbox"</p> 83 <p><input type="checkbox" value="checked" />No1</p> 84 <p><input type="checkbox" />No2</p> 85 </form> 86 <body> 87 88 </html> 89
