Персональный сайт - CSS

CSS_источник-2

Рядом помещен пример реализации HTML кода, приведенного ниже, на основе которого сделаны основные решения в виде галлереи картин настоящего сайта.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><title> Stu Nicholls | CSSplay | A complex slide show</title><meta name="Author" content="Stu Nicholls" /><meta name="Keywords" content= "cssplay, css, play, Cascading, Style, Sheets, experiments, demonstrations, gallery, galleries, photo, albums, slide, show, complex " /><meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" /><meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" /><meta http-equiv="imagetoolbar" content="no" /><link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" /><meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0)  gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' /><link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />

<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /><link rel="icon" href="../favicon.ico" type="image/ico" /><style type="text/css">@import url(http://www.google.com/cse/api/branding.css);</style><link rel="stylesheet" media="all" type="text/css" href="../css/default.css" /><style type="text/css">/* ================================================================ This copyright notice must be untouched at all times.The original version of this stylesheet and the associated (x)htmlis available at http://www.cssplay.co.uk/menu/complex_slides.htmlCopyright (c) 2005-2007 Stu Nicholls. All rights reserved.This stylesheet and the associated (x)html may be modified in any way to fit your requirements.=================================================================== *//* common styling */a {color:#000;}a:hover {text-decoration:none;}a:visited {color:#000;}/* slides styling */.photo {padding:20px; background:#222 url(photo/gallery_back.gif); width:600px; height:330px; text-align:left; position:relative; margin:0 auto 20px auto;}img.default {position:absolute; left:334px; top:25px; z-index:0;}.photo ul.topic {padding:0; margin:0; list-style:none; width:218px; height:auto; position:relative; z-index:10;}.photo ul.topic li {display:inline; width:54px; height:20px; float:left;}.photo ul.topic li a.set {display:block; font-size:11px; width:54px; height:20px;  background:transparent; text-align:center; line-height:18px; color:#aaa; text-decoration:none;}.photo ul.topic li a ul, .photo ul.topic li ul {display:none;}.photo ul.topic li a:hover,.photo ul.topic li:hover a{border:0; color:#fc0;}.photo ul.topic li a:hover em, .photo ul.topic li:hover em{display:block; position:absolute; left:-18px;top:-18px; width:634px; height:364px; z-index:-1; border:1px solid #888;}.photo ul.topic li a:hover ul, .photo ul.topic li:hover ul {display:block; position:absolute; left:0; top:20px; list-style:none; padding:0; margin:0; width:216px; height:150px;}.photo ul.topic li a:hover ul li, .photo ul.topic li:hover ul li {display:inline; width:24px; height:24px; float:left; margin:6px;}.photo ul.topic li a:hover ul li a, .photo ul.topic li:hover ul li a {display:block; width:24px; height:24px; cursor:default; background:url(photo/arrow.gif) no-repeat; float:left; text-decoration:none;}.photo ul.topic li a:hover ul li a b,.photo ul.topic li:hover ul li a b{visibility:hidden; position:absolute; width:206px; height:115px; top:180px; left:0; color:#ddd; font-weight:normal; font-size:10px; padding:6px; text-align:left; line-height:15px;}.photo ul.topic li a:hover ul li a img, .photo ul.topic li:hover ul li a img {display:block; width:22px; height:22px; border:1px solid #666; border-top-color:#ccc;}.photo ul.topic li a:hover ul li a:hover, .photo ul.topic li:hover ul li a:hover {white-space:normal;position:relative;}.photo ul.topic li a:hover ul li a.vert:hover img, .photo ul.topic li:hover ul li a.vert:hover img {position:absolute; left:-12px; top:-20px; width:48px; height:64px; border-color:#fc0;}.photo ul.topic li a:hover ul li a.hor:hover img, .photo ul.topic li:hover ul li a.hor:hover img {position:absolute; left:-20px; top:-12px; width:64px; height:48px; border-color:#fc0;}.photo ul.topic li:hover ul li a:focus, .photo ul.topic li:hover ul li a:active,.photo ul.topic li a:hover ul li a:active {position:static; outline:0;}.photo ul.topic li:hover ul li a:focus.vert img, .photo ul.topic li:hover ul li a:active.vert img, .photo ul.topic li a:hover ul li a:active.vert img {position:absolute; left:270px; top:-19px; width:240px; height:320px; padding:4px 44px; background:#000; border:0; z-index:10;}.photo ul.topic li:hover ul li a:focus.hor img, .photo ul.topic li:hover ul li a:active.hor img,.photo ul.topic li a:hover ul li a:active.hor img {position:absolute; left:271px; top:-19px; width:320px; height:240px; padding:44px 4px; background:#000; border:0; z-index:10;}.photo ul.topic li:hover ul li a:focus b, .photo ul.topic li:hover ul li a:active b,.photo ul.topic li a:hover ul li a:active b {visibility:visible;}</style></head><body id="www-cssplay-co-uk">	<div id="wrapper">	<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>

		<div id="topad">	<!-- <img src="http://www.cssplay.co.uk/newweb/ads/468x60.gif" alt="" /> -->	<div style="float:left; width:468px; height:60px;">	<script type="text/javascript">Vertical1242022 = false;ShowAdHereBanner1242022 = true;RepeatAll1242022 = false;NoFollowAll1242022 = false;BannerStyles1242022 = new Array(    "a{display:block;font-size:11px;color:#888;font-family:verdana,sans-serif;margin:0;text-align:center;text-decoration:none;overflow:hidden; float:left;}",    "img{border:0;}",    "a.adhere{color:#666;font-weight:bold;font-size:12px;background:#f8f8f8;text-align:center;}",    "a.adhere:hover{background:#ddd;color:#333;}");document.write(unescape("%3Cscript src='"+document.location.protocol+"//s3.buysellads.com/1242022/1242022.js?v="+Date.parse(new Date())+"' type='text/javascript'%3E%3C/script%3E"));</script></div>	<img src="http://www.cssplay.co.uk/newweb/ads/shadow_logo.png" alt="" />	<a href='http://www.ibuilt.net/' title='Website Builder' id="ibuilt"><img src='http://d1.openx.org/avw.php?zoneid=87749&amp;cb=1111115555&amp;n=a48b58a2' alt='Website Builder' title='Website Builder' /></a>	</div>		<div id="header">

		<div id="logo">					<h1><a accesskey="1" href="../index" title="Home Page">CSS</a></h1>			<h2><a accesskey="1" href="../index" title="Home Page"><i>p</i>lay</a></h2>			<h3>Experiments with Cascading Style Sheets</h3>			</div> <!-- end of logo -->			<div id="toplink">

			<ul>			<li><a accesskey="W" href="http://www.cssplay.biz/" title="CSSplay.biz Website" rel="nofollow">CSSPLAY.BIZ</a></li>			<li><a accesskey="H" href="../service" title="Help and Services">HELP &amp; ASSISTANCE</a></li>			<li><a accesskey="Q" href="../faqs" title="Frequently Asked Questions">FAQs</a></li>			<li><a accesskey="N" href="../w3c/contact" title="Contact us">CONTACT ME</a></li><li><a accesskey="V" href="../w3c/privacy" title="Privacy Policy">PRIVACY POLICY</a></li>			<li><a accesskey="S" href="../sitemap" title="Site map">SITE MAP</a></li>

			<li><a accesskey="K" href="../accesskeys" title="Accesskeys">ACCESSKEYS</a></li>			<li><a accesskey="P" href="../support" title="Support">SUPPORT</a></li>						<li><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="../images/rss.png" alt="rss feed" title="RSS2.0 feed" /></a></li>			</ul>			</div>			<div id="midlink">			<ul id="main_menu">

			<li class="demos"><a class="chosen" accesskey="T" href="../menu/">Demos</a></li><li class="menus"><a accesskey="M" href="../menus/">Menus</a></li><li class="layouts"><a accesskey="Y" href="../layouts/">Layouts</a></li><li class="boxes"><a accesskey="B" href="../boxes/">Boxes</a></li><li class="mozilla"><a accesskey="Z" href="../mozilla/">Mozilla</a></li><li class="explorer"><a accesskey="E" href="../ie/">Explorer</a></li><li class="opacity"><a accesskey="O" href="../opacity/">Opacity</a></li>			<li class="java"><a accesskey="J" href="http://www.stunicholls.com" title="Over to http://www.stunicholls.com" rel="nofollow">Javascript</a></li>			</ul>			</div>			<div id="botlink">

			<ul id="sub_menu">			<li><a accesskey="H" href="../index">HOME</a></li>			<li><a href="index.html" accesskey="F" title="First - Section List">LIST</a></li><li><a href="simple_slides" accesskey="P" title="Previous">PREVIOUS</a></li><li><a href="photo_strip" accesskey="N" title="Next">NEXT</a></li><li><a href="conditional" accesskey="L" title="Last">LAST</a></li>			<li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Complex%20slideshow"  accesskey="C" title="Comments for this page">COMMENTS</a></li>			<li>TUTORIAL</li>			</ul>

			</div> <!-- end of botlink -->		<div id="search"><div class="cse-branding-right" style="background-color:transparent;color:#000000">  <div class="cse-branding-form">    <form action="http://www.cssplay.co.uk/search.html" id="cse-search-box">      <div>        <input type="hidden" name="cx" value="partner-pub-6651950180071236:chrtwm-4ria" />        <input type="hidden" name="cof" value="FORID:10" />        <input type="hidden" name="ie" value="UTF-8" />

        <input type="text" name="q" size="19" class="search" />        <input type="submit" name="sa" value=" Search" />      </div>    </form>  </div>  <div class="cse-branding-logo">    <img src="http://www.google.com/images/poweredby_transparent/poweredby_AAAAAA.gif" alt="Google" />  </div>  <div class="cse-branding-text">

    Custom Search  </div></div>		</div> <!-- end of search -->		</div> <!-- end of header --><div id="info"><h2>A more complex slideshow</h2>

<h3>2nd March 2007</h3><div class="photo"><img class="default" src="photo/pic_27v.jpg" alt="" title="" /><ul class="topic"><li><a href="#nogo" class="set">#1<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><em></em><ul><li><a href="#nogo" class="hor"><img src="photo/pic_1h.jpg" alt="" title="" /><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_1v.jpg" alt="" title="" /><b>Vestibulum dapibus posuere enim.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_2h.jpg" alt="" title="" /><b>Curabitur vel dui. Donec libero.</b></a></li>

<li><a href="#nogo" class="vert"><img src="photo/pic_2v.jpg" alt="" title="" /><b>Ipsum, feugiat a, ultricies sit amet, rutrum at, purus.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_3h.jpg" alt="" title="" /><b>Nulla iaculis gravida turpis. Integer imperdiet.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_3v.jpg" alt="" title="" /><b>Aliquam justo nulla, sagittis ac, aliquam in, accumsan quis, tortor.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_4h.jpg" alt="" title="" /><b>Mauris id ante.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_4v.jpg" alt="" title="" /><b>Sed eu orci feugiat ante auctor interdum.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_5h.jpg" alt="" title="" /><b>Aenean auctor consequat tellus.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_5v.jpg" alt="" title="" /><b>Cras vitae est at quam bibendum aliquet.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_6h.jpg" alt="" title="" /><b>Nunc ullamcorper orci at mauris.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_6v.jpg" alt="" title="" /><b>Fusce pharetra, nulla vel tincidunt tristique.</b></a></li>

<li><a href="#nogo" class="hor"><img src="photo/pic_7h.jpg" alt="" title="" /><b>Tellus purus porttitor metus, eget sagittis sem sem sit amet nunc.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_8h.jpg" alt="" title="" /><b>Vivamus nec metus et nunc auctor tristique.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_7v.jpg" alt="" title="" /><b>Mauris tincidunt.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_8v.jpg" alt="" title="" /><b>Nisl eget euismod molestie, magna eros tincidunt magna.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_9h.jpg" alt="" title="" /><b>Et facilisis nisi nunc et eros.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_9v.jpg" alt="" title="" /><b>Morbi vitae diam vitae elit ultrices placerat.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_10h.jpg" alt="" title="" /><b>Maecenas magna pede, suscipit vitae, porttitor nec, malesuada sed, pede.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_10v.jpg" alt="" title="" /><b>Sed lacus leo, ultrices vel.</b></a></li>

</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li><li><a href="#nogo" class="set">#2<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><em></em><ul><li><a href="#nogo" class="vert"><img src="photo/pic_11v.jpg" alt="" title="" /><b>Vivamus nec metus et nunc auctor tristique.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_11h.jpg" alt="" title="" /><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_12v.jpg" alt="" title="" /><b>Sed lacus leo, ultrices vel.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_12h.jpg" alt="" title="" /><b>Et facilisis nisi nunc et eros.</b></a></li>

<li><a href="#nogo" class="vert"><img src="photo/pic_13v.jpg" alt="" title="" /><b>Cras vitae est at quam bibendum aliquet.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_14v.jpg" alt="" title="" /><b>Vestibulum dapibus posuere enim.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_13h.jpg" alt="" title="" /><b>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_15v.jpg" alt="" title="" /><b>Aenean auctor consequat tellus.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_16v.jpg" alt="" title="" /><b>Fusce pharetra, nulla vel tincidunt tristique.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_14h.jpg" alt="" title="" /><b>Nisl eget euismod molestie, magna eros tincidunt magna.</b></a></li><li><a href="#nogo" class="vert"><img src="photo/pic_17v.jpg" alt="" title="" /><b>Mauris tincidunt.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_15h.jpg" alt="" title="" /><b>Mauris id ante.</b></a></li><li><a href="#nogo" class="hor"><img src="photo/pic_10h.jpg" alt="" title="" /><b>Morbi vitae diam vitae elit ultrices placerat.</b></a></li>

<li><a href="Продолжение »

Бесплатный конструктор сайтов — uCoz

Дюрер, Рубенс, Тициан, Ренуар

18 марта 2011 года