CSS課題16と課題17
<!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="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【CSS16】</title> <style type="text/css"> * { margin: 0; padding:0; } #nav { font-size: 1em; width: 200px; line-height: 1.8em; margin: 50px 0 0 50px; } #nav ul { list-style-image: url('img/tri_icon_blue.gif'); } #nav li a { color: #000; width: auto; height: auto; } #nav li a:link,#nav li a:visited { text-decoration:none; } #nav li a:hover { color: orange; } </style> </head> <body> <div id="nav"> <ul> <li><a href="##">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>
課題16
<!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="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【CSS17】</title> <style type="text/css"> * { margin: 0; padding:0; } #nav { font-size: 1em; font-weight: bold; width: 200px; line-height: 40px; margin: 50px 0 0 50px; border-top: 1px solid #ccc; border-right: 1px solid #ccc; border-left: 1px solid #ccc; } #nav ul { list-style-type: none; background-image: url('img/btn.jpg'); } #nav li a { color: #000; padding: 0 10px; display: block; border-bottom: 1px solid #ccc; } #nav li a:link,#nav li a:visited { text-decoration:none; } #nav li a:hover { background-image: url('img/btn_o.jpg'); } </style> </head> <body> <div id="nav"> <ul> <li><a href="##">メニューのリンク1</a></li> <li><a href="#">メニューのリンク2</a></li> <li><a href="#">メニューのリンク3</a></li> <li><a href="#">メニューのリンク4</a></li> <li><a href="#">メニューのリンク5</a></li> </ul> </div> </body> </html>