前へ 目次 次へ

背景画像の繰り返し

背景のための画像
背景画像(robot03.png)

style08.css 
.back1{
	background-image: url("../html/robot03.png");
	background-repeat: repeat;
}
.back2{
	background-image: url("../html/robot03.png");
	background-repeat: repeat-x;
}
.back3{
	background-image: url("../html/robot03.png");
	background-repeat: repeat-y;
}
.back4{
	background-image: url("../html/robot03.png");
	background-repeat: no-repeat;
}
css08s1.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style08.css" type="text/css">
</head>
<body class="back1">
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>

クリックすると表示結果をみることができます。

css08s2.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style08.css" type="text/css">
</head>
<body class="back2">
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>

クリックすると表示結果をみることができます。

css08s3.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style08.css" type="text/css">
</head>
<body class="back3">
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>

クリックすると表示結果をみることができます。

css08s4.html 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<title>「歩行ロボット進化論」</title>
<meta http-equiv="content-type" content="text/html;charset=Shift_JIS">
<link rel="stylesheet" href="style08.css" type="text/css">
</head>
<body class="back4">
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>

クリックすると表示結果をみることができます。

2003//()

トップページへ

SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送