横並びnav 宿題
宿題内容
[ボタンを作成(角丸矩形)し、CSS Spriteで設定しなさい。]
※アップロードがうまくいかなかったので、イラストレータで作成時のものを添付します。
<?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type"content="text/html;charset=UTF-8" /> <meta http-equiv="Content-Type"content="text/css" /> <title>横nav復習1015</title> <link href="css/yokonavfukusyu1015.css" rel="stylesheet" type="text/css" media="screen, print" /> </head> <body> <div id="nav"> <ul> <li id="home"><a href="#"><em>HOME</em></a></li> <li id="Blog"><a href="#"><em>BLOG</em></a></li> <li id="Products"><a href="#"><em>PRODUCTS</em></a></li> <li id="About"><a href="#"><em>ABOUT</em></a></li> <li id="Contact"><a href="#"><em>CONTACT</em></a></li> </ul> </div> </body> </html> @charset "UTF-8"; /* reset */ html, body, div, h1, h2, h3, h4, h5, h6, p, blockquote, pre, address, ul, ol, li, dl, dt, dd, table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", Osaka, "MS P Gothic", "MS Pゴシック", sans-serif; } ul{ list-style-type: none; } a{ text-decoration: none; } img{ border: 0; } em{ visibility: hidden; } /* nav */ #nav{ width: 800px; height: 60px; margin: 50px 0 0 50px; } #nav li{ float: left; display: inline; } #nav li a{ width: 160px; height: 60px; display: block; background-color: #FFF; background-image: url(../images/kadomarutankei1015.jpg); background-repeat: no-repeat; } /* individual */ #nav li#Home a{ background-position: left 0; } #nav li#Home a:hover,#nav li#Home a:active{ background-position: left -80px; } #nav li#Blog a{ background-position: -160px 0; } #nav li#Blog a:hover,#nav liBlog a:active{ background-position: -160px -80px; } #nav li#Products a{ background-position: -320px 0; } #nav li#Products a:hover,#nav li#Products a:active{ background-position: -320px -80px; } #nav li#About a{ background-position: -480px 0; } #nav li#About a:hover,#nav li#About a:active{ background-position: -480px -80px; } #nav li#Contact a{ background-position: -640px 0; } #nav li#Contact a:hover,#nav li#Contact a:active{ background-position: -640px -80px; }