ตั้งค่าการอ่าน

ค่าเริ่มต้น

  • เลื่อนอัตโนมัติ
    ★Free ID.★ ID. DREAM [Close]

    ลำดับตอนที่ #34 : ★ ID. DREAM ::: envy & inspiration

    • อัปเดตล่าสุด 11 ธ.ค. 53


    ตัวอย่าง
     

    Code
    <head>
    <style type="text/css">
    <!--
    #Layer22 {
        position:absolute;
        left:259px;
        top:353px;
        width:201px;
        height:356px;
        ;
    }
    -->
    </style>
    <head>
    <title>.</title>
    <style type="text/css">
    <!--
    a:link {
       text-decoration: none;
    }
    a:visited {
       text-decoration: none;
    }
    a:hover {
       text-decoration: none;
    }
    a:active {
       text-decoration: none;
    }
    -->
    </style></head>


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    #Layer1 {
        position:absolute;
        left:252px;
        top:4px;
        width:518px;
        height:220px;
        ;   background-color: #ECE9D8;
    }
    #Layer2 {
        position:absolute;
        left:802px;
        top:3px;
        width:116px;
        height:301px;
        ;   background-color: #F4F2E8;
    }
    #Layer3 {
        position:absolute;
        left:816px;
        top:97px;
        width:84px;
        height:174px;
        px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav1 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav2 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav3 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav4 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav5 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav6 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav7 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav8 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav9 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer4 {
        position:absolute;
        left:806px;
        top:118px;
        width:101px;
        height:24px;
        ;   position:absolute;
        left:809px;
        top:9px;
        width:88px;
        height:70px;
        ;   position:absolute;
        left:806px;
        top:145px;
        width:101px;
        height:24px;
        ;   position:absolute;
        left:252px;
        top:305px;
        width:666px;
        height:487px;
        ;   background-color: #FFFFFF;
    }
    #Layer8 {
        position:absolute;
        left:252px;
        top:792px;
        width:666px;
        height:15px;
        ;   background-color: #FFFFCC;
    }
    #Layer9 {
        position:absolute;
        left:809px;
        top:116px;
        width:97px;
        height:21px;
        {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav11 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav12 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav13 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav14 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav15 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer10 {
        position:absolute;
        left:809px;
        top:138px;
        width:97px;
        height:21px;
        {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer11 {
        position:absolute;
        left:809px;
        top:160px;
        width:97px;
        height:21px;
        {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer12 {
        position:absolute;
        left:252px;
        top:326px;
        width:666px;
        height:18px;
        ;
        background-color: #DAC5B2;
    }
    .nav18 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer13 {
        position:absolute;
        left:548px;
        top:581px;
        width:364px;
        height:133px;
        ;
    }
    .style1 {
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-size: 9px;
        color: #660033;
    }
    .style2 {
        color: #660000;
        font-weight: bold;
        font-style: italic;
        font-family: "Times New Roman", Times, serif;
    }
    .nav171 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer14 {
        position:absolute;
        left:811px;
        top:182px;
        width:97px;
        height:20px;
        ;
    }
    .nav19 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    #Layer15 {
        position:absolute;
        left:807px;
        top:132px;
        width:102px;
        height:133px;
        ;
    }
    .nav20 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav21 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav22 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav23 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav24 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav25 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    .nav26 {color: #fff; font-family: times new roman; font-size: 10px; letter-spacing: -0.5px; text-align: center; margin-bottom: 2px; text-transform: uppercase;
    background: #EED4C2; padding: 4px 4px 4px 4px; -webkit-border-radius: 0px; font-weight: bold; -webkit-transition-duration: .5s; opacity: .8;
     -webkit-border-radius: 0px;}
    -->
    </style>
    </head>

    <body>
    <div id="Layer1"><img src="http://i1191.photobucket.com/albums/z471/thepata2/BNC__My_competition_entry_by_killtheliights.png" border="0" alt="Photobucket"></div>
    <div id="Layer2"></div>
    <div id="Layer5"><img alt="the image" src="http://i.imgur.com/dS7lS.png" /></div>
    <div class="style1" id="Layer7">Welcome to My id. </div>
    <div class="style3" id="Layer8"><span class="style1">FANTASIER , Design Yoshi </span></div>
    <div class="style2" id="Layer12">WHAT'S UP </div>
    <div class="style2" id="Layer13">Wow, that was so cool! and they showed your amazing hit, which was definitely your best of the season." Penelope cheered.<br>
    "But   when she says 'what they have been doing for the past few months,' does   she mean practices every other day from three in the afternoon to seven   at night?"</div>
    <div id="Layer15">
      <table width="106" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td><div class="nav20" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A></div ></td>
        </tr>
        <tr>
          <td><div class="nav21" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A></div ></td>
        </tr>
        <tr>
          <td><div class="nav22" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A> </div ></td>
        </tr>
        <tr>
          <td><div class="nav23" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A> </div ></td>
        </tr>
        <tr>
          <td><div class="nav24" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A> </div ></td>
        </tr>
        <tr>
          <td><div class="nav25" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A> </div ></td>
        </tr>
        <tr>
          <td><div class="nav26" onMouseOut="this.style.color='#'; this.style.background='#';" onMouseOver="this.style.color='#';
    this.style.background='#'" onClick="changeNavigation('Affies')"><A HREF="ชื่อ URL ที่ต้องการจะไป" class="nav">Link</A> </div ></td>
        </tr>
      </table>
    </div>
    <div class="style2" id="Layer21">For the next seven hours, almost everyone spent their time talking,   sleeping, listening to music, etc. But I had a window seat, and I sat   next to Penelope, so I talked to her for a while, but after that, I   sketched the view from my window, over the clouds with the ocean tossing   and turning, the moonlight shining off the waves. Not many people knew   that I enjoy expressing myself artistically; everyone who did know about   it thought that it wasbest thatI didn't tell many people, because then I   might come across as some perfect girl who is good at everything.</div>
    <div id="Layer22"><img src="http://image.dek-d.com/18/741806/15166575" alt="http://image.dek-d.com/18/741806/15166575" width="285" height="422"></div>
    <div id="Layer23"></div>
    <div id="Layer20"></div>
    <div id="Layer18"></div>
    </body>
    </html>
    <style type="text/css">
    img { filter: alpha(opacity=100); opacity:1.0; }
    img:hover { filter: alpha(opacity=70); opacity:.7; }
    </style>
    <style type="text/css">
    <!--
    body {background-image: url(http://i1191.photobucket.com/albums/z471/thepata2/cats-1.jpg);
    background-attachment: fixed;
    background-repeat: repeat;

     #Layer16 {
        position:absolute;
        left:0px;
        top:0px;
        width:158px;
        height:101px;
        ;
    }
    #Layer16 {
        position:absolute;
        left:38px;
        top:246px;
        width:107px;
        height:1px;
        ;
    }
    #Layer17 {
        position:absolute;
        left:264px;
        top:358px;
        width:237px;
        height:402px;
        ;
    }
    #Layer19 {
        position:absolute;
        left:549px;
        top:355px;
        width:364px;
        height:206px;
        ;
    }
    </style>
    <style type="text/css">
    a:hover { letter-spacing: 2px; }
    #Layer21 {
        position:absolute;
        left:550px;
        top:353px;
        width:361px;
        height:216px;
        ;
    }
    </style>



    โค้ดพวกนี้ต้องนำไปทำในDreamweaverก่อนนะครับ
    วิธีต่างๆ
    Click

    ฝากแจกจ่ายหน่อยนะครับ
     แจก ไอดีดรีม!!!!



    + +

    ติดตามเรื่องนี้
    เก็บเข้าคอลเล็กชัน

    ผู้อ่านนิยมอ่านต่อ ดูทั้งหมด

    loading
    กำลังโหลด...

    อีบุ๊ก ดูทั้งหมด

    loading
    กำลังโหลด...

    ความคิดเห็น

    ×