亚洲аv天堂手机版在线观看,亚洲国产欧美日韩欧在线高清,国产一区二区三区国产一区

　Magic Photo Frame 神奇創(chuàng)意相框

作者：wkaifang　時間： 2009-09-14　文檔類型：原創(chuàng)　來自：藍色理想

神奇創(chuàng)意相框！是的，主要利用position的relative, absolute, z-index屬性。結(jié)合Photo Frame（相框）的不規(guī)則性，來“裁剪”出具有不同Magic（神奇？）的相框效果。
先看例一，如果讓Photo Frame（相框）遮罩目標的相片？

在這里，主要應(yīng)用magic1的背景圖片，結(jié)合具有相對定位元素的em，再加上z-index。使得em中的背景可以遮罩在相片之上。

接著，我們需要修飾下，希望鼠標浮動的時候會產(chǎn)生提示效果的文字，并且結(jié)合半透明的css參數(shù)

filter:alpha(opacity=70); /* for ie */
-moz-opacity: 0.7; /* for ff */
opacity: 0.7; /* for other */

使得鼠標浮動到照片上，出現(xiàn)遮罩效果，并且出現(xiàn)提示文字。再次看例子：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Magic Photo Frame 神奇創(chuàng)意相框</title> <style type="text/css"> *{ text-align:center; border:0; list-style:none; } body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000; } .photo{ width:404px; margin:0 auto; border-left:solid 2px #333; border-right:solid 2px #333; background:#fff; } .photo h1{ font-size:14px; color:#666; line-height:40px; } .photo ul{ margin:0; padding:0; } .photo li{ position:relative; width:400px; height:300px; overflow:hidden; } .photo li a:link span,.photo li a:visited span{ display:none; } .photo li a:hover span{ display:block; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; font-size:40px; line-height:300px; color:#f00; background:#000; filter:alpha(opacity=70); -moz-opacity: 0.; opacity: 0.7; } .magic1{ position:absolute; top:0; left:0; width:100%; height:100%; } .magic1{ background: url(/articleimg/2009/09/7006/01.png) no-repeat; } a:link,a:visited,a:hover{ text-decoration:none; } </style> </head> <body> <div class="photo"> <h1>Magic Photo Frame 神奇創(chuàng)意相框</h1> <ul> <li> <a href="#"><img src="/articleimg/2009/09/7006/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a> </li> </ul> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

怎么樣，效果是不是不錯呢？既然不錯的效果，順便發(fā)揮下思維方向，擴散思維模式。再次做跟多的例子：

運行代碼框
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Magic Photo Frame 神奇創(chuàng)意相框</title> <style type="text/css"> *{ text-align:center; border:0; list-style:none; } body{ font-size:12px; font-family:Tahoma, Geneva, sans-serif; background:#000; } .photo{ width:404px; margin:0 auto; border-left:solid 2px #333; border-right:solid 2px #333; background:#fff; } .photo h1{ font-size:14px; color:#666; line-height:40px; } .photo ul{ margin:0; padding:0; } .photo li{ position:relative; width:400px; height:300px; overflow:hidden; } .photo li a:link span,.photo li a:visited span{ display:none; } .photo li a:hover span{ display:block; text-align:center; position:absolute; top:0; left:0; width:100%; height:100%; font-size:40px; line-height:300px; color:#f00; background:#000; filter:alpha(opacity=70); -moz-opacity: 0.; opacity: 0.7; } .magic1,.magic2,.magic3{ position:absolute; top:0; left:0; width:100%; height:100%; } .magic1{ background: url(/articleimg/2009/09/7006/01.png) no-repeat; } .magic2{ background: url(/articleimg/2009/09/7006/02.png) no-repeat; } .magic3{ background: url(/articleimg/2009/09/7006/03.png) no-repeat; } a:link,a:visited,a:hover{ text-decoration:none; } </style> </head> <body> <div class="photo"> <h1>Magic Photo Frame 神奇創(chuàng)意相框</h1> <ul> <li> <a href="#"><img src="/articleimg/2009/09/7006/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic1"> </em></a> </li> <li> <a href="#"><img src="/articleimg/2009/09/7006/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic2"> </em></a> </li> <li> <a href="#"><img src="http://blog.owncsser.com/wp-content/uploads/2009/08/mm.jpg" width="400" height="300" /><span>This is Magic!</span><em class="magic3"> </em></a> </li> </ul> </div> </body> </html>
[Ctrl+A 全部選擇提示：你可先修改部分代碼，再按運行]

嗯，看到例子，你想說寫什么呢? 創(chuàng)意，在于思考與練習中產(chǎn)生，就這樣。

經(jīng)典論壇交流：
http://bbs.blueidea.com/thread-2944647-1-1.html

本文鏈接：http://www.95time.cn/tech/web/2009/7006.asp　

出處：藍色理想
責任編輯：bluehearts

◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。

相關(guān)文章

手工制作海洋相框


關(guān)鍵字搜索	常規(guī)搜索	推薦文檔
熱門搜索：CSS Fireworks 設(shè)計比賽網(wǎng)頁制作 web標準用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG

站點最新

站點最新列表

周大福“敬•自然”設(shè)計大賽開啟

國際體驗設(shè)計大會7月將在京舉行

中國國防科技信息中心標志征集

云計算如何讓安全問題可控

云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會

阿里行云

云手機年終巨獻，送禮標配299起

阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"

1499元買真八核云OS雙蛋大促

首屆COCO桌面手機主題設(shè)計大賽

欄目最新

欄目最新列表

淺談JavaScript編程語言的編碼規(guī)范

如何在illustrator中繪制臺歷

Ps簡單繪制一個可愛的鉛筆圖標

數(shù)據(jù)同步算法研究

用ps作簡單的作品展示頁面

CSS定位機制之一:普通流

25個最佳最閃亮的Eclipse開發(fā)項目

Illustrator中制作針線縫制文字效果

Photoshop制作印刷凹凸字體

VS2010中創(chuàng)建自定義SQL Rule

中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx