訓練7日目
訓練7日目。
Dreamweaverでの作業とIllustratorでのマップとレース。
①背景画像のパターン配列(repeat-x,repeat-y)
②div idを作成して#Sidebarと#Content#wrapperで囲み、Float、overflow:hiddenさせて横並びに配列。clear:both;はfooterのtop上のマージンが設定出来ないため、現在は使用しないらしい。
③Illustratorでのトレース。角丸やユニットを作成して配列する方法などを学ぶ。
floatを設定した際の、overflow:hidden設定の意味がイマイチわかっていなかったのだが、理解が出来たので一つ疑問が解決した。
-------------------------------------
①<!DOCTYPE HTML>
<HTML lang="ja">
<html>
<head>
<meta charset="utf-8">
<title>背景画像２</title>
</head>
<style>
body
{ background: url(img/03.jpg) repeat-y;
}
h1{
color: #FFF; }
</style>
<body>
<h1>Page Design</h1>
</body>
</html>
-------------------------------------
②CSS部分のみ
<style>
html, body, div {
margin:0;
padding:0;
}
body{
background: #AAA;
}
#container {
width: 800px;
height: auto;
background-color: #FFF;
margin:20px auto;
padding: 10px;
}
#header {
height:100px;
background: #036;
margin-bottom: 10px;
}
#nav{
height:50px;
background: #696;
margin-bottom: 10px;
}
#wrapper {
overflow: hidden;
margin-bottom: 10px;
}
#content {
float: right;
height: 300px;
width: 590px;
background: #F60;
}
#sidebar{
height: 300px;
width: 200px;
background: #0F3;
margin-right:10px;
}
#footer{
height: 100px;
background: #0CC;
}
</style>
