My Vector Space

  人生は寄り道してなんぼ

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

***** 演習課題-3 *****

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

 《html》

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>初心者課題-3-b</title>
<link rel="stylesheet" href="kadai-3.css">
</head>

<body>
<div id="container">
   
      <div id="header">
            <img src="images-3/main.gif" alt="ガラスの靴の持ち主を探しています!">
      </div><!--******* header おわり *********-->

      <div id="content">
            <p id="gazou-2"><img src="images-3/b_1.gif" alt="パソコンでご応募する方"></p>
          <p id="a">下記の「応募規約」、「個人情報のお取り扱いについて」をお読みいただき、
ご同意いただける方は「はい」をクリックし、応募フォームにお進みください。</p>


<h3>【応募規約】</h3>

    <ul>
        <li>○パソコンでのご応募は、お一人様一回限り(複数ご応募いただいた場合は最終応募のみ有効)とさせていただきます。
※但し、郵便ハガキでのご応募は、ハガキ1通を1口として、お一人様何口でもご応募できます。</li>
        <li>○商店街で同時期に行われる他のキャンペーンと重複して当選することはできません。</li>
        <li>○当選後の権利譲渡、換金はできません。</li>
        <li>○応募の際の必要事項に、不備や虚偽があった場合は、無効になります。</p>
        <li>○ご応募は日本国内在住の方に限らせていただきます。</li>
        <li>○応募受付の確認、抽選結果に関するお問合せには、お受けいたしかねますのでご了承ください。</li>
       <li>○景品の"ガラスの靴"は、11月17日から12月25日まで商店街内(サン広場)に展示した靴となりますので、予めご了承ください。また、サイズは23.5cmとなります。</li>
    </ul>
<h3>【個人情報のお取扱いについて】</h3>

    <p id="kojin-jouhou">ご応募にあたり、ご記入いただいた個人情報(郵便番号、住所、氏名、電話番号、年齢)は、当社にて適切に管理し、ご当選の場合の景品受け渡し、及び個人を識別できない統計情報として、応募状況の傾向把握に利用します。当社は、上記の目的範囲内で、個人情報の取り扱いを外部の第三者に委託することがあります。この場合、個人情報の漏洩等が無いよう、業務委託契約に基づく適切な管理を行います。</p>

<h3>【個人情報のお取扱いについて】</h3>

(プライバシーポリシー)

<p id="doui"><img src="images-3/b_2.gif"></p>
<ul>
    <li id="yes"><img src="images-3/b_yes.gif"></li>
    <li id="no"><img src="images-3/b_no.gif"></li>
</ul>
    </div><!--******** content *********-->

    <div id="footer">
    </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;
     }


body{
     background-color:#FFF;
    
#container{
         width:600px;
         height:1330px;
         background-color:#FFF;
         margin:0 auto;
         border:solid 4px #6FF;
      }
 
#gazou-2{
          margin-top:20px;
          margin-left:70px;
          margin-bottom:20px;
       }   
        
#a{
    width:480px;
    margin-left:60px;
    margin-bottom:20px;
    } 
            
h3{
  margin-left:20px;
  margin-bottom:5px;
  font-size:18px;
  font-weight:bold;
  margin-top:20px;
 }   

li{
margin-left:20px;
 }   

#kojin-jouhou{
              margin-left:20px;
            } 

#doui{
         margin-left:75px;
         }   
                 
#yes{
     float:left;
     margin-left:220px;
    }                   
                   
#no{
    float:right;
    margin-right:210px;
  }

#footer{
       background-image:url("images-3/address.gif");
       width:600px;
       height:96px;
       clear:both;
     }     

PAGE TOP