2カラムレウアウと＠11月28日
授業内に出来ませんでした・・・。
風邪をひいたらしく熱っぽいので、後日課題はアップします。
サンプルスタイルシートカンパニー
@charset "UTF-8";
/* CSS Document */
*{
margin: 0;
padding: 0;
}
img {
border:none;
vertical-align:bottom;
}
ul{
list-style-type: none
}
body {
font-size: 0.8em;
line-height: 1.4;
font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
background:#e4e4e4;
background: #F4F4F4 url(../images/body_bg.gif) left top repeat-x;
}
#container {
width:741px;
height: auto;
margin: 0 auto;
padding: 0;
background-color: #fff;
position: relative;
background: url(../images/content_bg.gif) repeat-y #fff left top;
}
#header{
width:741px;
height: 103px;
}
h1 {
position: absolute;
left: 15px;
top: 19px;
}
#nav{
position: absolute;
top: 73px;
left: 0;
width:741px;
height:33px;
overflow: hidden;
list-style-type: none;
background: #000000 url(../images/global_nav_bg.gif) left top repeat-x;
}
#wrapper {
width:740px;
overflow /**/:hidden;
margin-bottom: 25px;
}
#main {
width:494px;
float: left;
display:inline;
}
h3{
background: url(../images/title_bg.gif) repeat-x;
}
#sidebar {
width:245px;
float:right;
padding-left: 1px;
}
#footer{
width:741px;
height: 33px;
background: url(../images/global_nav_bg.gif) repeat-x;
}
/*========nav=======*/
#nav li {
display: inline;
float: left;
}
#nav li a{
width:94px;
height: 33px;
display: block;
text-indent: -999em;
background-image: url(../images/global_nav.gif);
color: #fff;
}
/*========通常の位置=======*/
#btn01 a{
background-position: 0 0; }
#btn02 a{
background-position: -94px 0; }
#btn03 a{
background-position: -188px 0; }
#btn04 a{
background-position: -282px 0; }
#btn05 a{
background-position: -376px 0; }
#btn06 a{
background-position: -470px 0; }
#btn07 a{
background-position: -564px 0; }
/*========a:stay現在位置=======*/
#btn01 a:stay{
background-position: 0 -66px; }
#btn02 a:stay{
background-position: -94px -66px;}
#btn03 a:stay{
background-position: -188px -66px;}
#btn04 a:stay{
background-position: -282px -66px;}
#btn05 a:stay{
background-position: -376px -66px;}
#btn06 a:stay{
background-position: -470px -66px; }
#btn07 a:stay{
background-position: -564px -66px; }
/*========a:hover押したとき=======*/
#btn01 a:hover{
background-position: 0 -33px; }
#btn02 a:hover{
background-position: -94px -33px;}
#btn03 a:hover{
background-position: -188px -33px;}
#btn04 a:hover{
background-position: -282px -33px;}
#btn05 a:hover{
background-position: -376px -33px;}
#btn06 a:hover{
background-position: -470px -33px; }
#btn07 a:hover{
background-position: -564px -33px; }
/*========content=======*/
#main .section {
width: 465px;
margin: 15px 0 10px 15px;
border-bottom: 1px solid #333;
}
#main p {
font-size: 0.875em;
line-height: 1.4;
font-weight: normal;
padding: 10px 0 0 0;
padding-bottom: 10px;
}
#main .section .mark{
background: url(../images/arrow.gif) left center no-repeat;
padding-left:15px;
}
#sidebar dl{
margin: 15px 0 0 15px;
}
#sidebar dt{
font-size: 0.8em;
font-weight: bold;
}
#sidebar dd {
font-size: 0.8em;
line-height: 1.4;
font-weight: normal;
margin: 5px 13px 10px 0;
}
<!DOCTYPE HTML> <html lang="ja"> <head> <meta charset="UTF-8"> <title>サンプルスタイルシートカンパニー</title> <link href="css/base.css" rel="stylesheet" media="screen,print"> </head> <body> <div id="container"> <div id="header"> <h1><img src="images/logo.gif" width="290" height="38" alt="サンプルスタイルシートカンパニー" title="サンプルスタイルシートカンパニー"></h1> <ul id="nav"> <li id="btn01"><a href="#">* トップページ</a></li> <li id="btn02"><a href="#">* ソリューション</a></li> <li id="btn03"><a href="#">* 実績紹介</a></li> <li id="btn04"><a href="#">* パートナー</a></li> <li id="btn05"><a href="#">* カスタマー</a></li> <li id="btn06"><a href="#">* 会社概要</a></li> <li id="btn07"><a href="#">* お問い合わせ</a></li> </ul> </div> <div id="wrapper"> <h2><img src="images/main_copy.jpg" width="740" height="272" alt="あなたにとっての最高のパートナーであるために"></h2> <div id="main"> <h3><img src="images/title_about.gif" width="107" height="42" alt=""弊社について></h3> <div class="section"> <h4><img src="images/section_01.gif" width="292" height="38" alt="スタイルシートによるレイアウトで、表現力と機能性が共存したサイトを構築。"></h4> <p>サンプルスタイルシートカンパニーでは、ウェブサイトの構築にスタイルシートによるレイアウトを採用しています。そのため、視覚的に美しい表現力だけでなく、ユーザーにとって使いやすい機能性とを合わせ持ったウェブサイトを提供することができます。</p> <p class="mark"><a href="#">ソリューションへ</a></p> </div> <div class ="section"> <h4><img src="images/section_02.gif" width="297" height="38" alt="ウェブサイトを成功に導く、構造設計とインターフェース構築を武器に。"></h4> <p>100件あまりのウェブサイト構築経験から培った企画・開発力をバックボーンにもつ、サンプルスタイルシートカンパニー。競争に勝ち抜くための構造設計と、インターフェース構築を武器に、お客様のウェブサイトを成功に導くお手伝いをします。</p> <p class="mark"><a href="#">実績紹介へ</a></p> </div> </div> <div id="sidebar"> <h3><img src="images/title_news.gif" width="119" height="42" alt="ニュースリリース"></h3> <dl> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dt>2006年4月1日</dt> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> <dd>サンプルスタイルシートカンパニーのウェブサイトがリニューアルしました。</dd> </dl> </div> </div> <div id="footer"> <address><img src="images/copyright.gif" width="319" height="33" alt="Copyright © Sample Stylesheet Company All Rights Reserved."> </address> </div> </div> </body> </html>
