Ini kerangka layout design yang sederhana LOOOO, pelajari Ya karena ini awal kita bisa buat layout yang jauh lebih keren dengan gambar dan tulisan maupun link di dalamnya..!!
Ini Programnya:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Layout Sederhana</title>
<link rel="stylesheet" href="mystyle.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
Header
</div>
<div id="inner">
<div id="sidebar">
Sidebar
</div>
<div id="content">
Top
</div>
<div id="gooter">
Content
</div>
<div id="right">
Right
</div>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
Kode Css:
#wrapper {
margin: auto;
width: 750px;
border: 1px solid red;
}
#header {
height: 80px;
border: 1px solid blue;
}
#inner {
float: left;
margin: 5px 0;
border: 1px solid black;
}
#sidebar {
float: left;
margin-right: 20px;
width: 180px;
height: 330px;
border: 1px solid red;
}
#content {
float: left;
width: 543px;
height: 100px;
border: 1px solid green;
}
#gooter {
float: left;
width: 320px;
height: 230px;
border: 1px solid pink;
}
#right {
float:right;
width:200px;
height:150px;
border:1px solid orange;
}
#footer {
clear: both;
height: 50px;
border: 1px solid blue;
}
Nah Ini baru Kerangka Yang udah berbentuk Design denga Gambar & tulisan, Lucu Yaaa???
Coment ya ke aku!!!
INi programnya:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Desain Web Football</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="header">
<div id = "box1">
<img src="Persema.gif">
</div>
<div id = "box7">
<img src="teksboxatas1.GIF">
</div>
<div id = "box5">
</div>
<div id = "box6"><font color="black"> About :
</div>
<div id = "box2">
<a href="link.html"> <font color="black">Contact</a></p>
</div>
<div id = "box3">
<a href="link.html"><font color="black"> Rss</a></p>
</div>
<div id = "box4">
<a href="link.html"><font color="black"> Sitemap</a></p>
</div>
</div>
<div id="inner">
<div id="sidebar">
<div id="leftmenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">News and Media</a></li>
<li><a href="#">Tutorials</a></li>
<li><a href="#">Tips & Tricks</a></li>
<li><a href="#">Downloads</a></li>
</ul>
</div>
</div>
<div id="top">
<div id = "box8">
<img src="persema1.jpg">
</div>
<div id = "box9">
<img src="AremaMalang1.jpg">
</div>
</div>
<div id="content">
<b>Persema Bangkit<br/></b>
<br/>
Persema mulai berbenah dengan mulai pelatihan menjelang derby melawan Arema. Kemenangan akan menjadi motivasi mereka meraih posisi papan atas.
Persema sendiri tidak diperkuat dua pemain asing dari korea park chul hyung dan back seme petrick<br/>
</div>
<div id="right">
<b>Jadwal Tim :</b>
<ul>
<li>Latihan Pemusatan di Gajayana </li>
<li>Gladi Bersih Formasi</li>
<li>Hari Pertandingan</li>
</div>
</div>
<div id="footer">
<h3 align="center"><b>2010 PERSEMA MALANG, Indonesia Super League </b></h3>
</div>
</div>
</body>
</html>
Kode Cssnya:
#wrapper {
margin: auto;
width: 1000px;
background: blue;
border: 1px solid blue;
}
#header {
height: 100px;
background: blue;
border: 1px solid blue;
}
#inner {
float: left;
margin: 3px 0;
border: 1px solid blue;
}
#sidebar {
float: left;
margin-right: 5px;
width: 175px;
height: 357px;
background: #blue;
border: 1px solid white;
}
#top {
float: left;
width: 813px;
height: 135px;
background: #FFFFCC;
border: 1px solid white;
}
#content {
float: left;
margin-right: 5px;
width: 450px;
height: 220px;
background: #FFFFCC;
border: 1px solid white;
}
#right {
float: right;
width: 357px;
height: 165px;
background: #CCFF99;
border: 1px solid white;
}
#footer {
clear:both;
height: 50px;
background: red;
border: 1px solid white;
}
#leftmenu ul {
width: 175px;
list-style-type:none;
padding:0; margin:0;
}
#leftmenu a:link, #leftmenu a:visited, #leftmenu a:active {
padding-left: 15px;
text-decoration: none;
}
#leftmenu a {
padding: 5px 0px 5px 15px; display: block;
background: red no-repeat left center;
margin: 0px 0px 1px; color: black;
}
#leftmenu a:hover {
background: black no-repeat left center; color: black
}
#box1 {
float: left;
margin-right:10px;
width: 91px;
height: 98px;
background: #FFFFFF;
border: 1px solid white;
}
#box2{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 60px;
height: 20px;
background: red;
border: 1px solid #blue;
}
#box3{
float: right;
margin-right: 10px;
margin-top: 7px;
width: 35px;
height: 20px;
background: red;
border: 1px solid #blue;
}
#box4{
float: right;
margin-right: 20px;
margin-top: 7px;
width: 48px;
height: 20px;
background: red;
border: 1px solid #blue;
}
#box5{
float: right;
margin-right: 15px;
margin-top: 7px;
width: 100px;
height: 20px;
background: #FFFFFF;
border: 1px solid #99CC00;
}
#box6{
float: right;
margin-right: 5px;
margin-top: 7px;
width: 50px;
height: 20px;
background: red;
border: 1px solid #blue;
}
#box7 {
float: left;
margin-right: 5px;
margin-top: 2px;
width: 490px;
height: 85px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box8 {
float: left;
margin-right: 3px;
margin-top: 5px;
width: 406px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
#box9 {
float: left;
margin-right: 0px;
margin-top: 5px;
width: 400px;
height: 110px;
background: #FFFFCC;
border: 1px solid #FFFFCC;
}
0 komentar:
Posting Komentar