Docstoc

css layout

Document Sample
css layout Powered By Docstoc
					Pemrograman Internet
Suprayogi,S.Kom

Membuat Layout menu dengan CSS

Langkah 1
Membuat file index.html dan style1.css, kemudian jalankan file index.html tersebut pada
browser IE

Script 1




script 2 (style1.css)




gb1
Pemrograman Internet
Suprayogi,S.Kom

Langkah 2
Menambahkan box header pada halaman web
Script 3




script 4 (style1.css)




Gb2.
Pemrograman Internet
Suprayogi,S.Kom

Langkah 3
Menambahkan style teks pada halaman web
Script 5




Script6 (style1.css)




Gb 3
Pemrograman Internet
Suprayogi,S.Kom

Langkah 4

Menambahkan box navigasi kanan dan atas pada halaman web

Script 7




Script 8 (style1.css)
Pemrograman Internet
Suprayogi,S.Kom

Gb4
Pemrograman Internet
Suprayogi,S.Kom

Langkah 6
Menambahkan box content dan link pada halaman web
Script 9




Scrip 10 (style1.css)
#box_content                                           padding-right:0px;
 {                                                     padding-bottom:3px;
          background-color:olive;                      padding-left:10px;
          position : absolute;                         text-decoration:none;     }
          height:450px;                      #stylelink a:hover
          width:700px;                            {
          left:50px;                                   border-bottom:1px solid #cccccc;
          top:148px;                              height:25px;
          padding:1em;                                 background-color:maroon;
          border-left-width:1px;                       background-image:none;
          border-left-style:dotted;                    font-size:8pt;
          border-left-color:#666666;                   text-decoration:none;
          border-right-width:1px;                      color:#ffffff; }
          border-right-style:dotted;         #stylelink_top a:link
          border-right-color:#666666; }           {
#stylelink a:link                                      border-bottom:1px solid #cccccc;
     {                                                 background-color:cyan;
          display:block;                          font-size:10pt;
          border-bottom:1px solid #cccccc;             color:maroon;
          background-color:#606060;               height:25px;
     font-size:8pt;                                    width:100px;
          color:#ffff00;                               padding-top:3px;
     height:25px;                                      padding-right:0px;
          width:100px;                                 padding-bottom:3px;
          padding-top:3px;                             padding-left:10px;
          padding-right:0px;                           text-decoration:none; }
          padding-bottom:3px;                #stylelink_top a:visited
          padding-left:10px;                      {
          text-decoration:none;      }                 border-bottom:1px solid #cccccc;
#stylelink a:visited                                   background-color:cyan;
     {                                            font-size:10pt;
          display:block;                               color:maroon;
          border-bottom:1px solid #cccccc;        height:25px;
          background-color:#606060;                    width:100px;
     font-size:8pt;                                    padding-top:3px;
          color:#ffff00;                               padding-right:0px;
     height:25px;                                      padding-bottom:3px;
          width:100px;                                 padding-left:10px;
          padding-top:3px;                             text-decoration:none; }
Pemrograman Internet
Suprayogi,S.Kom

Gb 5 Gambar Hasil akhir Layout menggunakan CSS

				
DOCUMENT INFO
Categories:
Tags: layout
Stats:
views:7
posted:11/18/2012
language:
pages:7