1.gambar galeri
<!DOCTYPE html>
<html>
<head>
<style>
div.img {
margin: 5px;
border: 1px solid
#ccc;
float: left;
width: 180px;
}
div.img:hover {
border: 1px solid
#777;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align:
center;
}
</style>
</head>
<body>
<div class="img">
<a
target="_blank" href="img_fjords.jpg">
<img
src="img_fjords.jpg" alt="Trolltunga Norway"
width="300" height="200">
</a>
<div
class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a
target="_blank" href="img_forest.jpg">
<img
src="img_forest.jpg" alt="Forest" width="600"
height="400">
</a>
<div
class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a
target="_blank" href="img_lights.jpg">
<img
src="img_lights.jpg" alt="Northern Lights"
width="600" height="400">
</a>
<div
class="desc">Add a description of the image here</div>
</div>
<div class="img">
<a
target="_blank" href="img_mountains.jpg">
<img
src="img_mountains.jpg" alt="Mountains"
width="600" height="400">
</a>
<div
class="desc">Add a description of the image here</div>
</div>
</body>
</html>
2.
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
width:500px;
margin: auto;
border: 3px solid
#73AD21;
}
div.ex2 {
max-width:500px;
margin: auto;
border: 3px solid
#73AD21;
}
</style>
</head>
<body>
<div class="ex1">This div element has width:
500px;</div>
<br>
<div class="ex2">This div element has
max-width: 500px;</div>
<p><strong>Tip:</strong> Drag the browser
window to smaller than 500px wide, to see the difference between
the two divs!</p>
</body>
</html>
3.
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color:
red;
position:
relative;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
-webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
animation-name:
example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px;
top:0px;}
50% {background-color:blue; left:200px;
top:200px;}
75% {background-color:green; left:0px;
top:200px;}
100%
{background-color:red; left:0px; top:0px;}
}
/* Standard syntax */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px;
top:0px;}
50% {background-color:blue; left:200px;
top:200px;}
75% {background-color:green; left:0px;
top:200px;}
100% {background-color:red;
left:0px; top:0px;}
}
</style>
</head>
<body>
<p><b>Note:</b> This example does not work
in Internet Explorer 9 and earlier versions.</p>
<div></div>
</body>
</html>
No comments:
Post a Comment