[ CSS ] フッターのサンプル

↓この記事が気に入ったら、ぜひシェアをお願いします!

よく使う感じのフッターのサンプルを書いてみた。

スポンサーリンク

サンプルコード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<title>フッターのサンプル</title>
<style type="text/css">
<!--
* {
  margin: 0;
  padding: 0;
}
body {
  margin: 20px;
  font-size: 12px;
}
#footer {
  position: relative;
  background-color: #eeeeee;
  width: 720px;
}
#footer li {
  display: inline;
  background-image: url(list-mark.gif);
  background-repeat: no-repeat;
  padding: 0 0.75em 0 0.75em;
  background-position: 0 0.25em;
}
#footer li a {
  text-decoration: none;
}
#footer address {
  font-style: normal;
}
#footer address p {
  padding-top: 0.25em;
}
#footer .banner {
  height: 25px;
  width: 160px;
  position: absolute;
  left: 560px;
  top: 0px;
  background-color: #dddddd;
}
-->
</style>
</head>
<body>
<div id="footer">
  <ul>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">求人情報</a></li>
    <li><a href="#">個人情報の取扱について</a></li>
  </ul>
  <address>
    <p>Copyright &copy; 2007 Hogehoge Co.,Ltd. All rights reserved.</p>
  </address>
  <div class="banner">banner</div>
</div>
</body>
</html>

実際の動作サンプル

スポンサーリンク

↓この記事が気に入ったら、ぜひシェアをお願いします!

↓ブログをフォローすると更新情報が届きます。

スポンサーリンク