リンクページの画面割りを作る
各リンクページの内容はlink1が私の節約術、ink2が私のイチ押し節約レポートです。ソースをコピーしてみて下さい。
link1.htmlへコピー→
<div id="container">
<div id="linktop"><h1>私の節約術</h1></div>
<div id="linkcontent">
<h2 class="midashi">光熱費の節約</h2>
<p>文章を入れて下さい。</p>
<p>下にboxが伸びていくので、いくらでも書けます。</p>
<h2 class="midashi">食費の節約</h2>
<p>文章を入れて下さい。</p>
</div>
</div>
＊link2もタイトルだけ変更して、同じものをコピーして下さいね。
index.cssへ追加のコピー→#linktop{width:735px;height:70px;text-align:center;
padding-top:40px;color:#ffb6c1;
border-top:1px solid #000000;
border-left: 1px solid #000000;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
}
#linkcontent{width:725px;margin-top:10px;background:#f5f5f5;
padding-left:10px;padding-top:10px;margin-rigt:5px;
border-top:1px solid #000000;
border-left: 1px solid #000000;
border-right: 5px solid #000000;
border-bottom: 5px solid #000000;
}
.midashi{width:98%;border-left: 15px solid #ffb6c1;
border-bottom: 2px solid #ffb6c1;
font-weight:bold;
}
＊うまく表示されましたか？後は、自分なりに文章を作っていけば、節約を紹介したページの完成です。
合計:
 |