Css layout

416 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
416
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Css layout

  1. 1. Pemrograman InternetSuprayogi,S.KomMembuat Layout menu dengan CSSLangkah 1Membuat file index.html dan style1.css, kemudian jalankan file index.html tersebut padabrowser IEScript 1script 2 (style1.css)gb1
  2. 2. Pemrograman InternetSuprayogi,S.KomLangkah 2Menambahkan box header pada halaman webScript 3script 4 (style1.css)Gb2.
  3. 3. Pemrograman InternetSuprayogi,S.KomLangkah 3Menambahkan style teks pada halaman webScript 5Script6 (style1.css)Gb 3
  4. 4. Pemrograman InternetSuprayogi,S.KomLangkah 4Menambahkan box navigasi kanan dan atas pada halaman webScript 7Script 8 (style1.css)
  5. 5. Pemrograman InternetSuprayogi,S.KomGb4
  6. 6. Pemrograman InternetSuprayogi,S.KomLangkah 6Menambahkan box content dan link pada halaman webScript 9Scrip 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; }
  7. 7. Pemrograman InternetSuprayogi,S.KomGb 5 Gambar Hasil akhir Layout menggunakan CSS

×