BERIKUT CONTOH SCRIPT CSS DAN HTML NYA
SCRIPT CSS
#image
{
background-image:url("sjcstore.jpg");
padding-left:100px;
height:210px;
}
#header{
background-color:#5f9ead;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav1{
line-height:15px;
height:600px;
width:200px;
float:left;
padding:8px;
}
#nav{
line-height:20px;
height:300px;
width:130px;
float:right;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:#5f9ead;
color:black;
clear:both;
text-align:center;
padding:5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color:black;
background-color: #5f9ead;
text-align:center;
padding:10px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color:white;
}
SCRIPT HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="alberto pratama" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav1">
<ul>
<li><a href ="nav1.html">BIODATA</a></li>
<P><img src="IMG_1273.jpg"width="140" height="120"></P>
<p>Nama:Alberto Pratama</p>
<p>Tanggal Lahir:23 juni 1995</p>
<p>Alamat:Palembang</p>
<p>Agama:Islam</p>
<p>Warga Negara:Indonesia</p>
<hr> </hr>
<p>saya adalah seorang mahasiswa di ibnusina batam, dan saya berdomisili di anggrek mas2 blok f 5,pekerja saya sehari hari makan tidur dan makan tidur :D</p>
</ul>
</div>
<div id="nav">
<ul>
<li><a href ="nav.html">Menu 1</a></li>
<li><a href ="nav.html">Menu 2</a></li>
<li><a href ="nav.html">Menu 3</a></li>
<li><a href ="nav.html">Menu 4</a></li>
</ul>
</div>
<div id="section">
<h1>PALEMBANG</h1>
<p>
Palembang terkenal dengan kota pempek dan jembaatan ampera.
</p>
<p>
Kota Palembang merupakan kota tertua di Indonesia berumur setidaknya 1382 tahun jika berdasarkan prasasti Sriwijaya yang dikenal sebagai prasasti Kedudukan Bukit.
</p>
</div>
<div id="footer">
<marquee>57C_Style.com</marquee>
</div>
</body>
</html>
HASILNYA
SCRIPT CSS
#image
{
background-image:url("sjcstore.jpg");
padding-left:100px;
height:210px;
}
#header{
background-color:#5f9ead;
color:white;
text-align:center;
padding:5px;
padding-left:150px;
}
#nav1{
line-height:15px;
height:600px;
width:200px;
float:left;
padding:8px;
}
#nav{
line-height:20px;
height:300px;
width:130px;
float:right;
padding:5px;
}
#section{
width:350px;
float:left;
padding:10px;
}
#footer{
background-color:#5f9ead;
color:black;
clear:both;
text-align:center;
padding:5px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color:black;
background-color: #5f9ead;
text-align:center;
padding:10px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color:white;
}
SCRIPT HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="alberto pratama" href="style.css">
</head>
<body>
<div id="image">
</div>
<div id="header">
<ul>
<li><a href="nav.html">Home</a></li>
<li><a href="nav.html">News</a></li>
<li><a href="nav.html">Contact</a></li>
<li><a href="nav.html">About</a></li>
</ul>
</div>
<div id="nav1">
<ul>
<li><a href ="nav1.html">BIODATA</a></li>
<P><img src="IMG_1273.jpg"width="140" height="120"></P>
<p>Nama:Alberto Pratama</p>
<p>Tanggal Lahir:23 juni 1995</p>
<p>Alamat:Palembang</p>
<p>Agama:Islam</p>
<p>Warga Negara:Indonesia</p>
<hr> </hr>
<p>saya adalah seorang mahasiswa di ibnusina batam, dan saya berdomisili di anggrek mas2 blok f 5,pekerja saya sehari hari makan tidur dan makan tidur :D</p>
</ul>
</div>
<div id="nav">
<ul>
<li><a href ="nav.html">Menu 1</a></li>
<li><a href ="nav.html">Menu 2</a></li>
<li><a href ="nav.html">Menu 3</a></li>
<li><a href ="nav.html">Menu 4</a></li>
</ul>
</div>
<div id="section">
<h1>PALEMBANG</h1>
<p>
Palembang terkenal dengan kota pempek dan jembaatan ampera.
</p>
<p>
Kota Palembang merupakan kota tertua di Indonesia berumur setidaknya 1382 tahun jika berdasarkan prasasti Sriwijaya yang dikenal sebagai prasasti Kedudukan Bukit.
</p>
</div>
<div id="footer">
<marquee>57C_Style.com</marquee>
</div>
</body>
</html>
HASILNYA
mantap gan,,,izin save dulu ya gan,,,nanti ane dicoba,,,tetep semangat berbagi,,,sukses
ReplyDeleteKunjungi website saya ya : https://faiz4l.mahasiswa.atmaluhur.ac.id/ dan website kampus saya : http://www.atmaluhur.ac.id