[英]Is this a placeholder link?
在此頁面上 ,如何在標記中完成<img>
引用? 樣式表有[src]
選擇器,但我迷路了(或者愚蠢地不知情)。
CSS如何讓HTML知道圖像的位置?
<!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 }
它非常簡單 - 它們實際上是有效的URL,例如
<img src=4>
是相對鏈接,指向:
http://playground.deaxon.com/css/slideshow/4
要么:
HTML可能形成的“共同風格”是:
<ul>
<li><img src="1"></li>
<li><img src="2"></li>
<li><img src="3"></li>
<li><img src="4"></li>
</ul>
不:
<ul>
<li><img src=1>
<li><img src=2>
<li><img src=3>
<li><img src=4>
</ul>
我認為缺少"
令你困惑的標記"
。
雖然,正如@Wesley指出的那樣,這也是完全有效的HTML(除了缺少的alt
標簽)。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.