Geek Answers Handbook

Is this a link to a placeholder?

On this page , how do <img> links cope in the markup? There is a [src] selector in the stylesheet, but I'm lost (or stupidly not informed).

How does CSS let HTML know where the image is?

 <!doctype html> <title>Slideshow</title> <link href=s.css rel=stylesheet> <ul> <li><img src=1> <li><img src=2> <li><img src=3> <li><img src=4> </ul> 
 @-webkit-keyframes f { 0% { opacity:0; } 12% { opacity:1; -webkit-transform:scale(1.03) } 25% { opacity:1; -webkit-transform:scale(1.06) } 37% { opacity:0; -webkit-transform:scale(1.30) } 100% { opacity:0; } } @-moz-keyframes f { 0% { opacity:0; } 12% { opacity:1; -moz-transform:scale(1.03) } 25% { opacity:1; -moz-transform:scale(1.06) } 37% { opacity:0; -moz-transform:scale(1.30) } 100% { opacity:0; } } body { background:#f0f0eb } ul, [src] { position:absolute } ul { overflow:hidden; top:50%; left:50%; width:650px; height:300px; margin:-200px 0 0 -340px; padding:0; list-style:none; border:15px solid #fff; -webkit-box-shadow:0 1px 2px rgba(0,0,0,.2); box-shadow:0 1px 2px rgba(0,0,0,.2) } [src] { opacity:0; -webkit-animation:f 12s linear infinite; -moz-animation:f 12s linear infinite } [src="2"] { -webkit-animation-delay:3s; -moz-animation-delay:3s } [src="3"] { -webkit-animation-delay:6s; -moz-animation-delay:6s } [src="4"] { -webkit-animation-delay:9s; -moz-animation-delay:9s }
+4
source share
1 answer

It's pretty simple - they are really valid urls, for example.

 <img src=4>

This is a relative link pointing to:

 http://playground.deaxon.com/css/slideshow/4

Or:

a

The "regular style" of how HTML can be formed is:

 <ul> <li><img src="1"></li> <li><img src="2"></li> <li><img src="3"></li> <li><img src="4"></li> </ul>

Not:

 <ul> <li><img src=1> <li><img src=2> <li><img src=3> <li><img src=4> </ul>

I think the flaw " hinder you.

Although, as @Wesley points out , this is also perfectly valid HTML (with the exception of alt tags).

+3
source

More articles:


All Articles