前へ 目次 次へ

背景画像の初期位置

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

style10.css 
.back1{
	background-image: url("../html/robot03.png");
	background-repeat: no-repeat;
	background-position: right bottom;
}
.back2{
	background-image: url("../html/robot03.png");
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
css10s1.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="style10.css" type="text/css">
</head>
<body class="back1">
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>

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

css10s2.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="style10.css" type="text/css">
</head>
<body class="back2">
<ul>
<li>自己紹介</li>
<li>自作歩行ロボット紹介</li>
<li>歩行ロボットリンク集</li>
<li>日記</li>
</ul>
</body>
</html>

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

2003//()

トップページへ

広告 花 万馬券 無料レンタルサーバー ブログ blog