CSS：CSS基礎(chÇ”)之åå››
系統(tǒng)
2101 0
第一æ¥ï¼š
TurnPage2.html
<title>
ç´”
CSS
代碼實ç¾(xià n)ç¿»é
</title>
<link href="TurnPage2.css" rel="stylesheet" type="text/css" />
<body>
<dl>
<dt><a href=
"#a"
>1</a><a href=
"#b"
>2</a><a href=
"#c"
>3</a></dt>
<dd>
<img src="1.jpg"
id="a"
/>
<img src="2.jpg"
id="b"
/>
<img src="3.jpg"
id="c"
/>
</dd>
</dl>
</body>
</html>
第二æ¥ï¼š
TurnPage.css
* { margin: 0px;padding: 0px; }
body {
"
宋體
";
font-size: 12px;
text-decoration: none;
margin: 10px;
}
/***********dl dt dd **************/
dl {
height: 170px;
width: 240px;
position: absolute;
border: 10px solid #CCCCCC;
}
dd
{
height: 170px;
width: 240px;
overflow: hidden;
}
dt
{
position: absolute;
top: 50px;
right: 5px;
}
img{ border: 1px solid #000; }
a{
display: block;
height: 20px;
width: 20px;
background-color: #666;
border: 1px solid #fff;
filter: Alpha(Opacity=40);
"
宋體
";
font-size: 12px;
line-height: 20px;
text-decoration: none;
font-weight: 700;
vertical-align: middle;
text-align: center;
color: #fff;
}
a:hover { background:#000; }
分æž
:
1ã€
dl dt
/*--
åŒæ™‚é‹ç”¨
position: absolute;--*/
2ã€
dd
/*--
overflow: hidden;
是實ç¾(xià n)åªé¡¯ç¤ºä¸€å¼µåœ–çš„é—œ(guÄn)éµ--*/
3ã€
a
filter: Alpha(Opacity=40); /*-
主è¦ç‚ºäº†å¯¦ç¾(xià n)åŠé€æ˜Žæ•ˆæžœ*/
ç·´ç¿’(xÃ):
1ã€
完æˆåŽ,è«‹å°‡æ ¸å¿ƒéƒ¨åˆ†æŠ„åœ¨ç†è¨˜æœ¬ä¸Š
2ã€
æ ¹æ“š(jù)教師所發(fÄ)çš„ç´ æ，é¸å…¶ä¸ä¹‹ä¸€ï¼Œè‡ªè¡Œå‰µ(chuà ng)作一個作å“。由教師安排å¸(xué)生上交并å“評。
效果圖:
CSS：CSS基礎(chÇ”)之åå››
æ›´å¤šæ–‡ç« ã€æŠ€è¡“(shù)交æµã€å•†å‹™(wù)åˆä½œã€è¯(lián)ç³»åšä¸»
微信掃碼或æœç´¢ï¼šz360901061
å¾®ä¿¡æŽƒä¸€æŽƒåŠ æˆ‘ç‚ºå¥½å‹
QQ號è¯(lián)系： 360901061
您的支æŒæ˜¯åšä¸»å¯«ä½œæœ€å¤§çš„動力，如果您喜æ¡æˆ‘çš„æ–‡ç« ï¼Œæ„Ÿè¦ºæˆ‘çš„æ–‡ç« å°æ‚¨æœ‰å¹«åŠ©ï¼Œè«‹ç”¨å¾®ä¿¡æŽƒæ下é¢äºŒç¶ç¢¼æ”¯æŒåšä¸»2å…ƒã€5å…ƒã€10å…ƒã€20å…ƒç‰æ‚¨æƒ³æ的金é¡å§ï¼Œç‹ ç‹ é»žæ“Šä¸‹é¢çµ¦é»žæ”¯æŒå§ï¼Œç«™é•·éžå¸¸æ„Ÿæ¿€æ‚¨ï¼æ‰‹æ©Ÿå¾®ä¿¡é•·æŒ‰ä¸èƒ½æ”¯ä»˜è§£æ±ºè¾¦æ³•ï¼šè«‹å°‡å¾®ä¿¡æ”¯ä»˜äºŒç¶ç¢¼ä¿å˜åˆ°ç›¸å†Šï¼Œåˆ‡æ›åˆ°å¾®ä¿¡ï¼Œç„¶åŽé»žæ“Šå¾®ä¿¡å³ä¸Šè§’掃一掃功能，é¸æ“‡æ”¯ä»˜äºŒç¶ç¢¼å®Œæˆæ”¯ä»˜ã€‚
ã€æœ¬æ–‡å°æ‚¨æœ‰å¹«åŠ©å°±å¥½ã€‘å…ƒ
