My Vector Space

  人生は寄り道してなんぼ

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="container">

      <div id="header">
             <h1>Cafe de la plante</h1>
             <h2>サブタイトルサブタイトルサブタイトル</h2>
      </div><!--********* header おわり ************-->   
     
      <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><!--*********** nav おわり *************-->     

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

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

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

            </div><!--*********** content-left おわり ****************-->

 

            <div id="content-right">
                        <p><img src=""></p>  
            </div><!--************ content-right おわり ***********-->


      </div><!--************ content おわり ***********-->


      <div id="footer">
            <address>Copyright c2013 AUTHOR NAME, All Rights Reserved.</address>
      </div><!--*********** footer おわり ****************-->

</div><!--************ container おわり *************-->

</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:"メイリオ","MS Pゴシック", 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;
    } 
 

 

PAGE TOP