でざいんとうぇぶ。｜WEB学習

WEBスクール半年間の学習過程

9/2｜２カラムサイト製作 / 画像加工, ナビゲーション製作

HTML&CSS WEB学習

9/2

- 2カラムサイト製作 (カフェ)

f:id:tk3m:20140911122444j:plain

　ナビゲーション製作

　ページ内リンクに移動

　画像加工

 

背景レイヤーは、素材を消すのでは無く
ctrl or alt + Back spaceで塗りつぶす

 

 

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ホーム｜cafe</title>
<style>
html, body, div, h1, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
}
#container {
  width: 760px;
  margin: 10px auto;
  padding: 30px;
  background: #FFF;
}

body {
  background:#E6DAB7;
}
#header {
  height: 250px;
  margin-bottom: 20px;
  background:url(img/main.jpg) no-repeat;
}
#header h1 {
  padding: 200px 0 0 30px;
  color:#FFFFFF;
}
#wrapper {
  overflow: hidden;
  margin-bottom: 0px;
}
#content {
  float: right;
  width: 520px;
  height: 600px;
  background:url(img/main5.jpg) no-repeat;
}
#sidebar {
  float: left;
  width: 240px;
  height: 200px;
  background:#D1BCA3;
}
#nav {
  display: inline-block;
}
ul {
  list-style: none;
  background:#E6DAB7;
}
a {
  text-decoration: none;
}
li {
  padding: 2px;
  font-size: 22px;
  font-weight: bold;
}
li a {
  display: block;
  padding: 20px;
  border-bottom: 2px solid #FFF;
}
li a:link { color:#1C1100;}
li a:visited { color:#1C1100;}
li a:hover { color: #1C1100; background: #E6D1A2;}

#footer {
  width: 760px;
  height: 120px;
  background:#E6D1A2;
}
#footer p {
 padding: 95px 0 0 670px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">

<h1>Café felica</h1>

</div><!--/#header-->
<div id="wrapper">
  <div id="content">
  
  </div><!--/#content-->
  <div id="sideber">
  <div id="nav">
  <ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="cafefood/index.html">カフェフード</a></li>
<li><a href="cafedrink/index.html">カフェドリンク</a></li>
<li><a href="info/index.html">インフォメーション</a></li>
<li><a href="contact/index.html">お問い合わせ</a></li>
</ul>
</div><!--/#nav-->
  </div><!--/#sideber-->
</div><!--/#wrapper-->
<div id="footer">
<p>Café felica</p>
</div><!--/#footer-->
</div><!--/#container-->
</body>
</html>