Hatena::ブログ(Diary)

Webの道〜webの勉強 このページをアンテナに追加 RSSフィード Twitter

ページビュー
143740

2012-05-30 授業

確認テスト

| 02:23 | 確認テストを含むブックマーク 確認テストのブックマークコメント


<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認テスト(2)</title>
<style type="text/css">
<!--
*1338484986*{
 padding:0;
 margin:0;
 }
body{
  background-color:#fff;
}
#container{
  width:800px;
  height:600px;
  margin:0 auto;
  background-color:#FCFFEC;
}
#header{
  width:800px;
  height:120px;
  background-color:#FFF338;
}
#nav{
  background-color:#33cc99;
}
#nav ul{
  list-style-type:none;
}
#nav li {
  width:160px;
  height:60px;
  float:left;
  overflow:hidden;
}
#nav1{
 background-color:#B0E27C;
}
#nav2{
  background-color:#FCCF23;
}
#nav3{
  background-color:#CAE8E6;
}
#nav4{  
  background-color:#CFDB00;
}  
#nav5{  
  background-color:#C2E6ED;
}
#wrapper{
  width:800px;
  height:360px;
}

#sidebar{
  width:200px;
  height:360px;
  float:left;
  background-color:#ff9999;
}
#content{
  width:600px;
  height:360px;
  float:left;
  background-color:#FCFFEC;
}
#footer{
  width:800px;
  height:60px;
  background-color:#3173ff;
  clear:both;
}

</pp><pp>--></pp><pp></style>
</head>
<body>
<div id="container">

<div id="header"><a class="okeyword" href="g:web:keyword:header">header</a></div>

<div id="nav">
<ul>
<li id="nav1"><a href="#">nav1</a></li>
<li id="nav2"><a href="#">nav2</a></li>
<li id="nav3"><a href="#">nav3</a></li>
<li id="nav4"><a href="#">nav4</a></li>
<li id="nav5"><a href="#">nav5</a></li>
</ul>
</div>

<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>

<div id="footer"><a class="okeyword" href="g:web:keyword:footer">footer</a></div>
</div>
</body>
</html>

f:id:naoko83:20120530005118p:image:w360

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">

<title>記述実践</title>
<style type="text/css">
<!--
*{
  padding:0;
  margin:0;
}

body{
  background-color:#fff;
}
#container{
	width:800px;
	height:640px;
	margin:0 auto;
	background-color:#993366;
	padding-top:10px;
}
#header{
	width:780px;
	height:120px;
	background-color:#33CC99;
	margin:0 30px 10px 10px;
}
#nav{
	background-color:#6633FF;
	margin:0 10px;
}
#nav ul{
	list-style-type:none;
	margin:0 10px 0 0;
}
#nav li {
	width:140px;
	height:60px;
	float:left;
	overflow:hidden;
}
#nav1{
	 background-color:#FF66CC;
	 margin-left:10px;
	 
}
#nav2{
	 background-color:#FFFF66;
	 margin-left:10px;
}
#nav3{
	 background-color:#C9C;
	 margin-left:10px;
}
#nav4{
	 background-color:#FFF;
	 margin-left:10px;
}
#nav5{
	 background-color:#C90;
	 margin-left:10px;
 }
#wrapper{
	width:800px;
	height:360px;	
}
#sidebar{
	width:200px;
	height:360px;
	float:left;
	background-color:#FF9999;
	margin:10px;
}
#content{
	width:570px;
	height:360px;
	float:left;
	background-color:#33FF33;
	margin-top:10px;
	
}
#footer{
	
  width:780px;
	height:60px;
	background-color:#3366FF;
	clear:both;
	margin:10px 10px;
	
}

-->
</style>
</head>
<body>
<div id="container">
<div id="header">header</div>
<div id="nav">
<ul>
<li id="nav1"><a href="#">リスト1</a></li>
<li id="nav2"><a href="#">リスト2</a></li>
<li id="nav3"><a href="#">リスト3</a></li>
<li id="nav4"><a href="#">リスト4</a></li>
<li id="nav5"><a href="#">リスト5</a></li>
</ul>
</div>

<div id="wrapper">
<div id="sidebar">sidebar</div>
<div id="content">content</div>
</div>
<div id="footer">footer</div>
</div>

</body>
</html>

f:id:naoko83:20120530005528p:image:w360

何回かやってみるが、毎回どこかに打ち間違えや、ミスがあり安定しない結果になってしまいました。なんとか、アップしておきます。

トラックバック - http://d.hatena.ne.jp/naoko83/20120530/1338484985
Google