リストサンプル 覚書

会社の帰りがけにちょこっと作った覚書です。
この覚書の説明はこちら

リセット

＜dl id="sample">

＜dt>たも＜/dt>

＜dd class="area1">日本＜/dd>
＜dd class="area2">海外＜/dd>

＜dd class="movie1">やっぱり猫が好き＜/dd>
＜dd class="movie2">かもめ食堂＜/dd>

＜dt>たも＜/dt>

＜dd class="area1">日本＜/dd>
＜dd class="area2">海外＜/dd>

＜dd class="movie1">やっぱり猫が好き＜/dd>
＜dd class="movie2">かもめ食堂＜/dd>
＜/dl>

−*-CSS-*-−
#sample {
font-size: medium;
}
dt,.area1,.area2,.movie1,.movie2 {
height: 30px;
}

dt {
width: 150px;
background-color: #999999;
margin-top: 20px;
}
.area1 {
width: 150px;
background-color: #FFFFCC;
margin-top: -30px;
margin-left: 160px;
}
.area2 {
width: 150px;
margin-left: 160px;
margin-top: 10px;
background-color: #FFCCFF;
}
.movie1 {
width: 150px;
margin-top: -70px;
margin-left: 320px;
background-color: #CCFFFF;
}
.movie2 {
width: 160px;
margin-left: 320px;
margin-top: 10px;
background-color: #CCCCFF;
}