HTML index html n html head titletitle link
- Slides: 11
HTML文書内における画面分割 index. html n <html> <head> <title>学部学科紹介</title> ① <link rel="stylesheet" href="index. css" type="text/css" media="screen" /> </head> <body> <h 1>ようこそ私のページへ</h 1> div要素で分割 n n n n ② n n ④ n n n n ⑥ <div class="leftbar"> <h 3>学部・学科</h 3> <a href="P. html">なになに学部</a> <a href="PY. html">これこれ学科</a> <div class="centerbar"> <img src="Entrance. jpg" alt="朝の通学風景"> <p>朝の通学風景</p> ⑤ </div> ③ </div> 画面中央 ｸﾗｽ名 : centerbar 画面右側 <div class="rightbar"> <h 3>関連ページ</h 3> ｸﾗｽ名 : <a href="http: //www. chubu. ac. jp/" >中部大学</a> <a href="http: //www. isc. chubu. ac. jp/">学情センター</a> <a href="http: //edu. isc. chubu. ac. jp/miyahara/2009/ACL/">コンピュータ活用</a> ⑦ </body> n n 画面左側 ｸﾗｽ名 : leftbar </html> rightbar </div>
スタイルシート index. css n body { background-color: #ddd; } n h 1 { text-align: background-color: center; #ccc; } タイトル div. leftbar { position: top: left: width: background-color: #ddd; } absolute; 20%; 1%; 25%; 左側 absolute; 20%; 25%; 50%; #ddd; solid 1 px #5 e 8 eab; 中央 n n n n n div. centerbar n n n n div. rightbar { position: top: left: width: background-color: border-left: border-right: text-align: center; } { position: top: left: width: background-color: #ddd; } absolute； 20%; 76%; 25%; ｸﾗｽ名 ： leftbar ｸﾗｽ名 ： centerbar 右側 ｸﾗｽ名 ： rightbar
