Как да си направите галерия с CSS.
Публикувана от smilev на January 12 2011 10:52:30
Разширена новина
Създайте файл с име style1.css отворете го и напишете следния код:
#zagl {position: absolute; top: 10px; left: 185; width: 500px; text-align: center; color: black; font-family: comic sans MS}
#pix {position: absolute; top: 0px; left: 0px}
#pix2 {position: absolute; top: 0px; left: 700px}
dt {margin: 10px}
img {border: none; width: 115px}
#pix a img.skr {width: 500px; position: absolute; top: 60px; left: 165px; visibility: hidden}
#pix a:active {background: gray}
#pix a:active img.skr {visibility: visible}
#pix2 a img.skr {width: 500px; position: absolute; top: 60px; left: -515px; visibility: hidden}
#pix2 a:active {background: gray}
#pix2 a:active img.skr {visibility: visible}
После създайте файл например, gallery.html и напишете този код вътре:
<html>
<link href="style2.css" rel="stylesheet" type="text/css">
<head>
<title>Галерия</title>
<meta http-equiv="Content-Type" content="text/html; charset="windows-1251">
</head>
<body leftmargin="0" topmargin="0">
<h3 id="zagl">Галерия.</h3>
<dl id="pix">
<dt><a href="http://uroci.net/#"><img src="img1.jpg">
<img class="skr" src="img1.jpg">
</a>
</dt>
<dt><a href="http://uroci.net/#"><img src="img2.jpg">
<img class="skr" src="img2.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img3.jpg">
<img class="skr" src="img3.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img4.jpg">
<img class="skr" src="img4.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img5.jpg">
<img class="skr" src="img5.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img6.jpg">
<img class="skr" src="img6.jpg">
</a>
</dt>
</dl>
<dl id="pix2">
<dt>
<a href="http://uroci.net/#"><img src="img7.jpg">
<img class="skr" src="img7.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img8.jpg">
<img class="skr" src="img8.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img9.jpg">
<img class="skr" src="img9.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img10.jpg">
<img class="skr" src="img10.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img11.jpg">
<img class="skr" src="img11.jpg">
</a>
</dt>
<dt>
<a href="http://uroci.net/#"><img src="img12.jpg">
<img class="skr" src="img12.jpg">
</a>
</dt>
</dl>
</body>
</html>