Webデザインスキル強化計画　【演習課題11 】

* 演習課題-11 *

f:id:ooigawa-bitter-sweet:20131012030423g:plain

《html》

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>課題-11</title>
<link rel="stylesheet" href="kadai-11.css" madia="all">
</head>

<body>

<div id="header">
             <h1>Cafe de la plante</h1>
             <h2>サブタイトルサブタイトルサブタイトル</h2>
      </div>

      <div id="content">

<div id="nav">
                  <ul>
                  <li><a href="#">トップページ</a></li>
                  <li><a href="#">カフェについて</a></li>
                  <li><a href="#"> 本日のおすすめ</a></li>
                  <li><a href="#">ブログ</a></li>
                  <li><a href="#">お問い合わせ</a></li>
                  </ul>
            </div>

<div id="content-left">
<h3>コンテンツのタイトル</h3>

<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>

<p>コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。コンテンツの本文を記述します。</p>

</div>

</div>

<div id="footer">
            <address>Copyright c2013 AUTHOR NAME, All Rights Reserved.</address>
      </div>

</div>

</body>
</html>

《css》

@charset "utf-8";
/* CSS Document */

/* css reset */

/* ///// IE6対策です　　//// */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}

table {
         border-collapse:collapse;
         border-spacing:0;
       }
fieldset,img {
border:0;
               }
address,caption,cite,code,dfn,em,strong,th,var {
font-style:normal;
font-weight:normal;
              }
ol,ul {
        list-style:none;
      }

caption,th {
text-align:left;
             }
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
            }
q:before,q:after {
content:'';
               }
abbr,acronym {
          border:0;
          }
body {
     font-family:"メイリオ","ＭＳＰゴシック", Tahoma, Arial, sans-serif;
     line-height: 1.7;
     color: #333;
     font-size: 14px;
     text-align: left;
     }

#container{
           width:800px;
           height:981px;
           background-color:#000;
           margin:0 auto;
}

#header{
         background-image:url("images-11/plant_top.jpg");
         width:800px;
         height:333px;
    }

h1{
    color:#FFF;
    font-size:25px;
    font-weight:bold;
    padding-top:30px;
    padding-left:30px;
}

h2{
    color:#FFF;
    padding-left:30px;
}

#content{
           width:720px;
           height:500px;
           background-color:#FFF;
           margin-left:40px;
     }

#nav{
       width:720px;
       height:100px;
       background-color:#FFF;
   }

ul{
   margin-left:110px;
   padding-top:30px;
}

li{
   float:left;
   list-style-type:none;
   margin-right:25px;
}

a{
   text-decoration:none;
   display:block;
   font-weight:bold;
}

a:hover{
         color: #FA0;
    }

#content-left{
             width:460px;
             height:300px;
             background-color:#FFF;
             margin-left:20px;
             float:left;
     }

h3{
     background-color:#000;
     color:#FFF;
     width:440px;
     height:35px;
     font-weight:bold;
     padding-left:20px;
     padding-top:10px;
}

p{
   margin-top:20px;
   font-weight:bold;
   }

#content-right{
                background-color:#FF0;
                width:200px;
                height:300px;
                float:right;
                background-image:url("images-11/photo200.jpg");
                background-repeat:no-repeat;
                margin-right:20px;
     }

#footer{
         width:800px;
         height:98px;
         background-image:url(images-11/plant_bottom.jpg);
         clear:both;
    }

address{
      text-align:center;
      color:#FFF;
      padding-top:100px;
    }

My Vector Space

人生は寄り道してなんぼ

Webデザインスキル強化計画　【演習課題11 】

* 演習課題-11 *

***** 演習課題-11 *****

* 演習課題-11 *