как да се направим галерия с CSS

money_maker

Създайте файл с име 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>

f0rward · Пуснато на: Thu Jul 16, 2009 23:46 pm Заглавие:

Урока е обяснен доста зле и ако някой, който не разбира го пробва няма да стане нищо.. Първото в HTML документа трябва да се сложи връзка към този style1.css иначе изобщо няма да работи. И между другото това може да се направи само с HTML.
_________________

PoWeR · Пуснато на: Fri Jul 17, 2009 7:41 am Заглавие:

ArchDevil · Пуснато на: Fri Jul 17, 2009 7:45 am Заглавие:

То и аз така мисля, че един урок, за да е урок трябва да се обясни, а не да се копира от някъде код и да се сложи тук или да се напише без обяснения...

PlaY.f0r.b3aUtY · Пуснато на: Tue Jul 21, 2009 13:46 pm Заглавие:

това урок ли е или просто даваш кода? Смях

_________________

Creative Ads - безплатна реклама в интернет

taxi

kanety_97 · Пуснато на: Sat Aug 01, 2009 11:32 am Заглавие:

поне аз нищу не разбирам ако правиш нещу го прави като хорта Намигане

_________________
http://fmfree.info

FeeL · Пуснато на: Tue Oct 13, 2009 20:49 pm Заглавие:

Аз мн мн не разбирам а от това нищо не разбрах Усмивка

. Се пак има мн сайтове с уроци специално само за това Усмивка

_________________
By FeeL Усмивка

K.Daskalov · Пуснато на: Sun Aug 08, 2010 19:08 pm Заглавие:

аз дето разбирам от цсс като видях кода ми стана лошо ако следвате стъпките няма да стане ако не аразбирате нищо
_________________
http://www.k-daskalov.eu